Question

我在一个循环中调用ajax，如下所示，我能够在迭代循环时正确地提醒值，我想要的是在<td>部分显示相同的值，而不是发出警报，这可能吗？

<!-- 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){ 
                                  alert(msg);//how can i display this value in this place
                           }

                         });
            </td>

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

关于上面代码中使用的 x-templ

请写信给我，如果您无法理解我的问题，我会尝试以其他方式向您解释。从我试过的两天开始，最后想到每天看看StckOverflow的天才人:) -

Answer 1

AJAX = 异步 J avascipt A nd X ml

试试这个

<!-- 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>

或同步

<!-- 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>

小心，如果你要使用它，你可以阻止/锁定所有其他处理直到完成...就像在PHP中无休止地做一样。因此，如果您要求不结束..这将导致一些小问题：）

Answer 2

希望这有效：

$('#TableID').append('<tr><td>' + msg+ '</td></tr>');

或

 $('<tr>').append('<td>' + msg+ '</td>');

Answer 3

编辑：我改变了主意，在阅读帖子后我修改了我的答案，你看看这个吗？

在html代码的顶部添加此代码：

<script type="text/javascript">
    function ajaxCall(fileName, index) {
       $("#inner-file-msg-" + index).html("initializing...");
            $.ajax({
                type: "POST",
                url: "http://localhost/myappproject/trips_controller/showStatus/",
                dataType: "text",
                data: {image_name: fileName,trip_id: '2'},
                success: function(msg){ 
                    $("#inner-file-msg-" + index).html(msg);
                }
            });
    }
</script>

然后这是你的模板：

 <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>
                <span id="inner-file-msg-{%=i%}"></span>
                <script type="text/javascript">
                    ajaxCall("{%=file.name%}", "{%=i%}");
                <\/script>
            </td>
        </tr>
    {% } %}
</script>

Ps：我不确定＆lt; / script＆gt;如果它不起作用，你可以将此行更改为

Answer 4

您可以尝试这样：

<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>
           <span id="status-{%=i%}">loading...</span>
        </td>
    </tr>
    //JavaScript function call- use x-templ syntax
     showStatus(file.name,i);                        
{% } %}
</script>
<script>
function showStatus(name, id){
    $.ajax({
            type: "POST",
            url: "http://localhost/myappproject/trips_controller/showStatus/",
            dataType: "text",
            data: {image_name: a,trip_id: '2'},
            success: function(msg){ 
                  $('#status-'+id).html(msg);//or use native innerHTML prop
           }
         });
}
</script>

Answer 5

AJAX请求是异步的，因此在构建DOM之后，它们的结果将在稍后处理。没有办法（除了让请求同步，我甚至在这里进一步提及）以及＃34;在请求被调用的地方返回HTML＆＃34;，因为你＆＃39;重新尝试做。这意味着根本没有理由将请求调用放在表格单元格中。您只需要为表格单元格指定一些标识符，以便以后能够找到它们并更改其内容。然后在某个地方执行AJAX调用。我不确定您正在使用的库的确切语法，但它看起来像这样：

{% 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);
{% } %}

只是提醒一下 - 上面的示例是伪代码。您可能需要进行小幅调整，以使其适用于您正在使用的库。

如何在嵌套表td中显示警报值

5 个答案: