Ajax загружает два точных идентификатора на одной странице?

Question

Я загружаю динамические загрузки страниц с помощью AJAX ... Вот так ...

$(document).ready(function(){
  $("#xxxxx").click(function(){    
      document.getElementById("contentAll").innerHTML = "";    
  $.ajax({
      url: "base_template.html",
      cache: false,
      success: function(html){
      $("#contentAll").append(html);
    }
  });
});

Моя проблема в том, что загружается только один раздел навигации (#id).У меня есть два на странице (один сверху, который имеет выпадающий список и один слева, который загружается, когда вы находитесь на этой конкретной странице.

Как мне удается загрузить два идентификатора, яЯ сбит с толку ...

WDH

Answer 1

Вам не разрешено иметь идентификаторы на одной странице с одинаковым значением.Вы можете переключиться на использование имени класса вместо идентификатора и позволить jQuery работать с обоими объектами с таким именем класса.

Вместо <div id="contentAll"></div> у вас будет <div class="contentFinal"></div>, а затем вы будете использовать этот jQuery:

$(document).ready(function(){

  $.ajax({
      url: "base_template.html",
      cache: false,
      success: function(html){
      $(".contentFinal").append(html);   // append to both places
    }
  });
});

Answer 2

Использование:

<div class="contentAll" id="top"></div>
<div class="contentAll" id="bottom"></div>

$(document).ready(function(){
  $.ajax({
      url: "base_template.html",
      cache: false,
      success: function(html){
      $(".contentAll").append(html);
    }
  });
});

Answer 3

Ты не.Идентификаторы должны существовать только один раз .Если у вас есть несколько элементов на странице, вы должны изменить эти идентификаторы на классы.

Затем просто используйте классы в jQuery.

$(document).ready(function(){

  $.ajax({
      url: "base_template.html",
      cache: false,
      success: function(html){
      $(".navigation").append(html);
    }
  });
});