javascript - 使用 FOSJsRoutingBundle 和 Ajax 加载 html 内容时的延迟(路由参数 {id})

Question

我正在使用FOSjSrouting在我的 symfony2.7 项目中。

我有这个html.twig View 代码:

<table>
<!--table header code ...etc... -->
  <tbody>
    {% for currentData in arrayData %}
      <tr>
        <td>{{ currentData.first_name}}</td>
        <td>{{ currentData.last_name}}</td>
        <td>{{ currentData.order}}</td>
        <td>{{ currentData.category}}</td>
        <td>{{ currentData.location}}</td>
        <td>{{ currentData.price}}</td>
        <td>
          <a><button class="btn btn-info btn-xs showDetail" href="{{ path('detailsData', {'idData': currentData.idData }) }}">Show Detail</button></a> <!-- to open dialog tag through Ajax for each lines -->
          <a href="{{ path('editData', {'idData': currentData.idData }) }}"><button class="btn btn-warning btn-xs">Edit</button></a>
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>

<!-- the dialog window to load detail content -->
<dialog id="window"></dialog>

<!-- javascript to open and close dialog window -->
<script>
  (function() {
    var dialog = document.getElementById('window');
    var showButtons = document.getElementsByClassName('showDetail');
    var showDialog = function() {
      console.log(this);
      dialog.show();
      dialog.load(Routing.generate('detailsData', {'idData': currentData.idData }) }})
    };
    var i, len = showButtons.length;
    for(i = 0; i < len; ++i) {
        showButtons[i].onclick = showDialog;
    }
    document.getElementById('exit').onclick = function() {
      dialog.close();
    };
  })();
</script>

如您所见，对于我想要显示的每个数据，我有一个详细信息按钮。此详细信息按钮引用另一个页面，该页面显示与我单击的当前数据相关的链接数据。

这是详细 View 的路由(尊重 FOSjSrouting 需求):

detailData:
    pattern:  /manage/order/detail/{idData}
    defaults: { _controller: MySpaceMyBundle:MyController:detailData }
    requirements:
    methods: GET
    options:
        expose: true

目的是通过Ajax、jQuery、FOSjSrouting加载将 dialog 标记中的数据与 id="window" 链接到 currentData.idData。

但是当我单击详细信息按钮时，出现此错误(在我的浏览器控制台中):

Uncaught ReferenceError: currentData is not defined

我知道我需要注意 {id} 路线参数。

如何使用我当前的脚本(在我的html代码末尾)加载详细信息按钮引用的页面并通过ajax显示正确的链接数据？

<小时/>

编辑

我在 html.twig View 中的 script 标记 末尾添加了这段 JavaScript 代码，它允许我在对话框标记中显示我想要的数据:

$('.showDetail').click(function() {
    $.ajax({
        'url': Routing.generate('detailsData', {'idData': $(this).val()}),
        'cache' : false,
        'success': function(loadDetail) {
            $('#window').html(loadDetail);
        }
    });
  });

出现的问题是我有一个延迟来显示对话框标记，并且就在在显示我想要的当前数据之前， 最后一个我点击之前显示几秒钟，然后我当前想要的数据稍后显示。

也许是缓存问题？

此外，第一次单击详细按钮时，对话框显示为空，然后(延迟)后，显示数据。

如何解决这些问题？

Answer 1

问题是，该变量没有在 javascript 中定义。您必须插入大括号才能让 twig 将 twig 变量转换为相应的值，如下所示:

{'idData': {{currentData.idData}} }

不幸的是，它也必须在 for 循环中 - 因此最好将值保存在数据属性中并使用 javascript 读取它。

您还可以使用已经填充的 href 属性，如下所示(按照您所说的方式使用 jQuery):

dialog.load($(this).attr('href'))