Ajax loading two exact id's on one page?

I am loading dynamic page loads with AJAX... Like this...

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

My Problem is that this only loads one navigation section (#id). I have two on the page (one at the top that is of a drop do开发者_开发问答wn variety and one to the left that gets loaded when you are on that specific page.

How do I manage to load two ID's, I'm baffled...

WDH

---

You are not allowed to have to IDs on the same page with the same value. You can switch to using a class name instead of an ID and let jQuery operate on both objects with that class name.

Instead of <div id="contentAll"></div>, you would have <div class="contentFinal"></div> and then you would use this jQuery:

$(document).ready(function(){

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

---

You don't. ID's should only exist once. If you have multiple items on a page you should change those IDs to classes.

Then just use the classes in jQuery instead.

$(document).ready(function(){

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

---

Use :

<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);
    }
  });
});