title: Multiple content div loading with ajax/json
body: <p>I have implemented external content loading using Ajax. And now I would like to add multiple container loading functionality using a Json object code I have.</p>
  
  <p>Could you please help me incorporate the json object code into the Ajax code. My knowledge in coding is very limited :) </p>
  
  <p>Here is the detailed info:</p>
  
  <p>Here is the json object:</p>
  
  <pre><code>var json = [{
    'id': 'content',
    'wrapper': '__content-wrapper'
  }, {
    'id': 'content',
    'wrapper': '__content-wrapper'
  }]
  
  $.each(json, function(i, itm) {
    $('#' + itm.id).wrap('&lt;div id="' + itm.wrapper + '"&gt;&lt;/div&gt;');
    pageload(itm.id, itm.wrapper);
  }
  
  function pageload(id, wrapper) {
  
  }
  </code></pre>
  
  <p>Here is the Ajax code:</p>
  
  <pre><code>$(document).ready(function() {
    var contentWrapID = '___content-wrapper';
  
    $('#content').wrap('&lt;div id="' + contentWrapID + '"&gt;&lt;/div&gt;');
  
    function showNewContent() {
      $("#" + contentWrapID).slideDown();
      $('#load').fadeOut();
    }
  
    function pageload(hash) {
      if (hash) {
        $("#" + contentWrapID).load(hash + " #content", '', function() {
          if ($('img:last', this).get(0)) {
            $('img:last', this).load(function() {
              showNewContent();
            });
          } else {
            showNewContent();
          }
        });
      } else {
        $("#" + contentWrapID).load("index.html #content");
      }
    }
    $.historyInit(pageload);
  
    $('#topnav li a').click(function() {
  
      var hash = $(this).attr('href');
      hash = hash.replace(/^.*#/, '');
      $("#" + contentWrapID).slideUp(300, function() {
        $.historyLoad(hash);
      });
      if (!$('#load').get(0)) {
        $('#container').append('&lt;span id="load"&gt;LOADING...&lt;/span&gt;');
      }
      $('#load').fadeIn('normal');
      $('#topnav li a').removeClass('current');
      $(this).addClass('current');
      return false;
    });
  });
  </code></pre>
  
  <p>........................</p>
  
  <p>As far as I understand I have  to replace this line:</p>
  
  <p><code>var contentWrapID = '___content-wrapper';</code></p>
  
  <p>with the json object:</p>
  
  <p><code>var json = [{'id': 'content', 'wrapper': '__content-wrapper'},{'id': 'content2', 'wrapper': '__content-wrapper2'}];</code></p>
  
  <p>But I also have to change the pageload function so that it works with the new variables that are passed:</p>
  
  <pre><code>function pageload (id, wrapper) {
  
  }
  </code></pre>
  
  <p>I'd also like to add that this is what I'm trying to accomplish in particular:</p>
  
  <ol>
  <li>To be able to load content into, (lets call it #div 1) extracted from a corresponding #div in a html page, (lets call it featured.html) with a click on any of the tabs in the 1st navigation menu, (lets call it #topnav).</li>
  <li>To be able to load content into, (lets call it #div 2) extracted from a corresponding #div in another html page, (lets call it news.html) with a click on any of the tabs in the second navigation menu, (lets call it #vertnav-bar). </li>
  </ol>
  
  <p>P.S Only one div gets loaded for every click. (From what you explained I think this particular detail is important that i mention with regards to the pageload calling function. In other words at no one given point in time will a click be loading data to more than one #div </p>
  
  <p>I'd be very grateful for any help</p>
  
  <p>Best regards
  Paul </p>