Question

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

我有html.twig次查看代码：

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

正如您所看到的，我要显示的foreach数据，我有一个详细信息按钮。此详细信息按钮是指另一个页面，它显示我点击的当前数据的链接数据。

这是详细视图的路线（尊重FOSjSrouting需要）：

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

目的是加载通过 Ajax ， jQuery ， FOSjSrouting dialog标记中的关联数据与id="window"的{{1}}关联数据。

但是当我点击详细信息按钮时，我有这个错误（在我的浏览器控制台中）：

未捕获的ReferenceError： currentData 未定义

我知道我需要注意路线的currentData.idData 参数。

如何加载详细信息按钮引用的页面，并通过ajax与我当前的{id}（在我的html代码末尾）显示正确的链接数据？

修改

我在script视图中的脚本标记末尾的javascript中添加了此代码，它允许我在对话框标记中显示我想要的数据：

html.twig

出现的问题是我有延迟来显示对话框标记，只有才能显示我想要的当前数据， 最后一个我点击了之前显示了几秒，然后我想要的当前数据会稍后显示。

也许这是一个缓存问题？

此外，我第一次点击detailButton时，对话框显示为空，然后在（延迟）后显示数据。

如何解决这些问题？

Answer 1

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

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

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

你也可以像这样使用已经填充的href属性（正如你所说的那样使用jQuery）：

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

使用FOSJsRoutingBundle和Ajax加载html内容时的延迟（路由参数{id}）

1 个答案: