簡體   English   中英

以相同的方式在同一頁面的兩個不同的div中加載ajax內容

[英]load ajax content in two different div on the same page at the same way

使用Twig和php,我的html頁面中有三個主要的div:

<select class="form-control" id="choice" name="form[choice]">
  <option value="" disabled selected>make a choice</option>
  <!-- here the path variable matches with an url -->
  <option value="{{ path('get_data_by_choice', {'slug': variable.slug}) }}">
    {{ variable.name }} 
  </option>
</select>

<div id="showOption"></div>

<div id="showCategory">

通過jQuery腳本,我在div中返回頁面內容(在<div id="showOption"></div

看一下腳本:

<script>
  $('#choice').change(function() {
      var url = $(this).val();
      $.get(url , {} , function(showAvailableConfig) {
          $("#showOption").html(showAvailableConfig));
      })
  });
</script>

因此,它返回id="ShowOption"的div中與變量{{ path('get_data_by_choice', {'slug': variable.slug}) }}匹配的url中頁面的所有內容。

這是我通過腳本加載的頁面的內容:

<div id="content1"> some content1 here </div>

<div id="content2"> some other content2 here </div>

事實上,同樣的劇本,我想追加,填充div id="showOption" div id="content1" div id="showCategory" div id="content2"選擇一個值在我最初的選擇標簽中。

我該如何進行?

您可以使用新數據創建一個jQuery對象,以便可以過濾div ,然后附加它們。

<script>
  $('#choice').change(function() {
      var url = $(this).val();
      $.get(url , {} , function(showAvailableConfig) {
          var newContent = $(showAvailableConfig);
          $("#showOption").html( newContent.filter("#content1") );
          $("#showCategory").html( newContent.filter("#content2") ));
      })
  });
</script>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM