динамические загрузки страницы стирают мою следующую страницу

Question

У меня есть эта проблема ... У меня есть пять отдельных страниц, которые я хотел бы загрузить, на каждой странице у меня есть две динамические загрузки для выгрузки содержимого некоторых элементов div. Динамическая загрузка содержимого работает нормально, пока я не попытаюсь представить загрузку html-страницы, которая будет включена.

код:

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

.resFix - это созданный мной div, который окружает весь документ под слоем тега body. #contentAll - основная загрузка контента, а #textWelcome - правильные навигационные ссылки.

После попытки $('.resFix').load('nonSurgicalProcedures.html'); весь документ стирается при нажатии.

вот макет:

Позвольте мне добавить, что у меня есть отдельная целевая страница в виде index.html (вид фоновой рекламы с прокруткой), я знаю, что просто:

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

для отображаемой страницы работает, она пытается нажать на другую страницу, которая создает проблему!

Спасибо за любую помощь.

Answer 1

хей webDevHed

так сначала

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

эти два обратных вызова делают то же самое, что вам не нужно оба

так что у меня нет доступа к наценке, поэтому я не могу понять, что здесь не так, но .load является асинхронным, поэтому, если для второго вызова требуется вставить первую разметку, произойдет сбой, если она вернется раньше первой. (это условие гонки, поэтому вы получите непоследовательные результаты)

если они зависят друг от друга, вы можете написать это так:

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

надеюсь, это поможет

Answer 2

Я не знаю, является ли это именно тем, для чего вы блокируете, но я постараюсь попробовать (обратите внимание, это ответ на следующий вопрос в комментариях)

, так что это намного больше кодараньше.

// 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');

  });
 });
});

я надеюсь, что это работает для вас webDevHead

Answer 3

Функция загрузки заменяет все содержимое элемента загруженным содержимым.В вашем случае, поскольку .resFix содержит все данные, как только вы вызовете нагрузку на них, существующее содержимое внутри него будет заменено содержимым, которое загружается из nonSurgicalProcedures.html

Также, есливы хотите вызывать события для динамически загружаемых элементов DOM, тогда вам нужно будет использовать функцию live ():

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

В противном случае события загрузки не будут срабатывать, если вы нацеливаетесьэлемент DOM, который был удален.(Через вашу перезагрузку контента)