dynamic page loads are wiping out my ensuing page

I have this issue... I have five separate pages that I would like to load, on each page I have two dynamic loads to swap out the content of som开发者_如何学编程e divs. The dynamic loading of the content works fine until I try and introduce the loading of the html page that is will be on.

code:

$(document).ready(function(){
    $(function ()
    {
        $('.swapConsultationsLink').click(function()
        {
            $('.resFix').load('nonSurgicalProcedures.html');
            $('#contentAll').load('dynamicPages/ns_consultations.html');
            $('#textWelcome').load('dynamicPages/ns_links.html');
        })
    });
});

The .resFix is a div that I made that surrounds the whole document under the body tag layer. #contentAll is the main content load and #textWelcome is the right navigation links.

Upon attempting the $('.resFix').load('nonSurgicalProcedures.html'); the whole document gets wiped out when clicked.

here is the layout:

Let me add that I have a separate landing page as the index.html (kind of a background scrolling advert), I know that using just:

$(document).ready(function(){
    $(function ()
    {
        $('.swapConsultationsLink').click(function()
        {
            $('#contentAll').load('dynamicPages/ns_consultations.html');
            $('#textWelcome').load('dynamicPages/ns_links.html');
        })
    });
});

for the page displayed works, it's trying to click off the other page that creates the issue!

Thanks for any help.

hej webDevHed

so first

$(document).ready(function(){
 $(function ()
  {

these two callbacks do the same thing you dont need both

so i dont have access to the marcup so i cant se whats wrong here but .load is async so if the second call there requiers the first markupp to have been inserted it will fail if that returns before the first one. (this is a race condition tho so you will get unconsistent results)

if they do depend on each other you can write it like this

$(function () {
  $('.swapConsultationsLink').click(function() {
   $('.resFix').load('nonSurgicalProcedures.html', function() {
    $('#contentAll').load('dynamicPages/ns_consultations.html', function() {
     $('#textWelcome').load('dynamicPages/ns_links.html');
    });
   });
  });
});

hope this helps

The load function replaces whatever is within the element with the loaded content. In your case, since .resFix contains all the data, as soon as you call the load on it, the existing content within it will be replaced with the content which is being loaded from nonSurgicalProcedures.html

Also, if you want to call events on dynamically loaded DOM elements then you will need to use the live() function:

http://api.jquery.com/live/

Otherwise, your load events will not fire if you're targeting the DOM element that has been removed. (Through your reloading of the content)

i dont know if this is exactly what you are locking for but ill give it a try (note this is a anser to a follow up question in the comments)

so this is a lott more code then before.

// so you can write this without this function but
// its a nice abstraction it fetches all your pages and
// notifies you when its done
 var getManny = function(urls, cb) {
  var res = {},
        fetched = 0;
  $(urls).each(function(i, url) {
    $.get(url, {}, function(page) {
      res[url] = page;
      fetched++;
      if(fetched === urls.length) {
       cb(res);
      }      
    });
  });
};

$(function() {

 // your urls i give them a var here sins i am going to reference them    
 // mutliple times
 var nonSurgicalProcedures  = 'nonSurgicalProcedures.html',
     ns_consultations       = 'dynamicPages/ns_consultations.html',
     ns_links               = 'dynamicPages/ns_links.html';

 // binding the click event
 $('.swapConsultationsLink').click(function() {
  // fetching all the pages
  getManny([nonSurgicalProcedures, ns_consultations, ns_links], function(pages) {

   // removes the content in the .resFix ...... needed?
   $(".resFix").html("");

   // here i put the "nonSurgicalProcedures" in an empty div
   // so i can manupulate it in memory
   $("<div />").html(pages[nonSurgicalProcedures])
     // here i find the #conentAll and insert the "ns_consultations" page
     .find('#contentAll').html(pages[ns_consultations]).end()
     // here i find the #textWelcome and insert the "ns_links" page
     .find('#textWelcome').html(pages[ns_links]).end()
     // here i insert every thing thats in the div to .resFix
     .children().appendTo('.resFix');

  });
 });
});

i hope this works for you webDevHead