Question

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

Answer 1

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