Question: I have following string example. I want to find second digit from string and replace with other random digit. I have random digit but problem is find second digit and replace with new digit. How achieve this?

```
1. "data[KPI][0][rows][0][name]"
2. "data[KPI][0][rows][1][name]"
3. "data[KPI][0][rows][2][name]"

```

**Expected Output**

```
1. "data[KPI][0][rows][4][name]"
2. "data[KPI][0][rows][5][name]"
3. "data[KPI][0][rows][6][name]"

```

Answer: 
AJAX = **Asynchronous** **J**avascipt **A**nd **X**ml

**try this**

```
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">

        <td>
           <span>{%=file.name%}</span>
              <!----- Ajax function call -------->
              var a= file.name;
              $(document).ready(function (){  //run when page load is done
                 $.ajax({
                    type: "POST",
                    url: "http://localhost/myappproject/trips_controller/showStatus/",
                    dataType: "text",
                    data: {image_name: a,trip_id: '2'},
                    success: function(msg){ 
                          return '<span>' + msg + '</span>';
                    }

                 });
              });
        </td>

    </tr>
{% } %}
</script>

```

**or make it synchron**

```
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">

        <td>
           <span>{%=file.name%}</span>
              <!----- Ajax function call -------->
                var a= file.name;
                $.ajax({
                   type: "POST",
                   url: "http://localhost/myappproject/trips_controller/showStatus/",
                   dataType: "text",
                   data: {image_name: a,trip_id: '2'},
                   success: function(msg){ 
                         return '<span>' + msg + '</span>';
                   },
                   async: false
                });
        </td>

    </tr>
{% } %}
</script>

```

***Take care, if you would use this, you block/lock all other processings until its done... Same like doing a endless while in PHP. So if you request doesnt ends.. this will cause a little problem :)***
AJAX requests are asynchronous, so their results are handled much later, when the DOM has already been constructed. There's no way (except making the request synchronous, which I won't even mention here further) to "return the HTML at the spot where the request was called", as you're trying to do. This means that there's no reason to place the request call inside the table cell at all. You just need to assign some identifiers to your table cells, so that you're able to find them later and change their contents. Then you perform your AJAX calls in one place somewhere. I'm not sure about the exact syntax of the library you're using, but it'll look something like this:

```
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        <td>
           <span>{%=file.name%}</span>
           <span id="file-{%=file.name%}-status"></span>
        </td>
    </tr>

    <!----- Ajax function call -------->
    (function (file) {
        $.ajax({
            // ...
            success: function (msg){
                $('#file-' + file.name + '-status').html(msg);
            }
        });
    })(file);
{% } %}

```

Just a reminder - the sample above is pseudo-code. You might need to make small adjustments to make it work with the library you're using.