使用FOSJsRoutingBundle和Ajax加載html內容時的延遲（路由參數{id}）

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>

如您所見，對於要顯示的每個數據，我都有一個詳細信息按鈕。 此詳細信息按鈕指的是另一個頁面，該頁面顯示到我單擊的當前數據的鏈接數據。

這是詳細視圖的路徑（遵守FOSjSrouting的需求）：

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

目的是通過Ajax ， jQuery ， FOSj 加載 ，將dialog標簽中具有id="window"的鏈接數據路由到currentData.idData 。

但是，當我單擊詳細信息按鈕時，出現此錯誤（在我的瀏覽器控制台中）：

未捕獲的ReferenceError：未定義currentData

我知道我需要注意route的{id} 參數 。

如何加載帶有詳細信息按鈕所引用的頁面，並使用當前script （在html代碼的末尾）通過ajax顯示正確的鏈接數據？

---

編輯

我將此代碼添加到html.twig視圖中script標記末尾的javascript中，它使我可以在對話框標記中顯示所需的數據：

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

發生的問題是我有一個等待時間才能顯示dialog標簽 ，並且在顯示我想要的當前數據之前 ，我單擊的最后一個 顯示在前面幾秒鍾 ，然后我想要的當前數據在以后顯示。

也許是緩存問題？

此外，我第一次單擊detailButton時，對話框顯示為空，然后（等待時間）顯示數據。

我該如何解決這些問題？

Answer 1

問題是，該變量未在javascript中定義。 您必須插入大括號以使twig將twig變量轉換為相應的值，如下所示：

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

不幸的是，它也必須在for循環中-因此最好保護data屬性中的值並使用javascript讀取它會更好。

您還可以像這樣使用已經填充的href屬性（就像您說的那樣使用jQuery）：

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