Функция jquery, которая загружает HTML-код в Div, а затем загружает другой контент в Div внутри загруженного HTML - PullRequest
Новая
       59

Функция jquery, которая загружает HTML-код в Div, а затем загружает другой контент в Div внутри загруженного HTML

4 голосов
/ 22 февраля 2012

Я хотел бы знать, как загрузить html-страницу (page1.html) в div в активной веб-странице (index.html), а затем загрузить другую html-страницу (page2.html) в div, который будет внутри загруженной страницы (page1.html). Я имею в виду.

index.html 

<div id="content"></div>
<a class="link" href="#">load</a>

Сценарий 

$(document).ready(function() {
    $('a.link').live('click', function() {
        $('#content').load('page1.html', function(){
            $('#content2').load('page2.html');
        });
    });
});

page1.html 

<div id="content2"></div>

Работает нормально всего за 1 клик, при втором клике загружает page2.html на 0,5 секунды, а затем загружает page1.html.

В чем проблема ???

Спасибо

Ответы [ 11 ]

1 голос
/ 02 марта 2012

Если я не ошибаюсь, вы пытаетесь загрузить второй помощник после загрузки первого контейнера

Добавить простой класс в вашу разметку 

<div id="content" class="toload"></div>

& 

<div id="content2" class="toload"></div>

Теперь вот магический jQuery, который вам нужен 

$(document).ready(function() {
    $('a.link').live('click', function() {
        $('.toload').load('page1.html', function(){
            $(this).removeClass('toload');  //Remove the class so that next time it does not get affected
        });
    });
});
1 голос
/ 03 марта 2012

ваш ответ работает на моем Chrome, но попробуйте empty содержание, чтобы убедиться, что у вас нет двойных #content элементов 

$(document).ready(function() {
    $('a.link').live('click', function() {
        $('#content:first').empty().load('page1.html', function(){
            $('#content2').load('page2.html');
        });
    });
});
1 голос
/ 02 марта 2012

ваша главная страница html 

<body>
<a href="#" class="link">i load your page</a>
<div id="container-page1">
</div>
</body>

твоя страница1 html 

<div>
   <p>i'm important text</p>
   <div id="container-page2"></div>
</div>

jquery> версия 1.7

Я использовал запуск события, потому что он поддерживает ваш javascript. В противном случае вы можете получить глубоко вложенный код, если позже вам понадобится сделать 3 или 4 вызова ajax глубже!

если ваш jQuery <1.7, то дайте мне знать, и я смогу собрать вместе .delegate / .live эквиваленты. </p> 

$(document).ready(function() {
    $('body').on({'click': function(evt) {
        $(evt.data.containerSelector).load(evt.data.page1Url, function(data, status, jqxhr){
            $(this).trigger(evt.data.loadPage2Event);
        });
    },'a.link',{page1Url:'page1.html',
 loadPage2Event:'loadPage2',
 containerSelector:'#container-page1'});

    $("#container-page1",'body').on({'loadPage2':function(evt){
       $(this).load(evt.data.page2Url);
  }},'#container-page2',{page2Url:'page2.html'});
});
1 голос
/ 02 марта 2012

С последней версией JQuery, работающей в Chrome, Firefox и IE 9, прекрасно работает следующее:

index.html 

<html>
<head>
    <title>Index</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('a.link').live('click', function() {
                $('#content').load('link1.html', function(){
                     $('#content2').load('link2.html');
                });
            });
        });
    </script>
</head>
<body>
    <div id="content"></div>
    <a class="link" href="#">load</a>
</body>
</html>

link1.html 

<html>
<head>
    <title>Page 1</title>
</head>
<body>
    <p>This is page 1</p>
    <div id="content2"></div>
</body>
</html>

link2.html 

<html>
<head>
    <title>Page 2</title>
</head>
<body>
    <p>This is page 2</p>
</body>
</html>

Так что я бы сказал, что если у вас нет последней версии jQuery, или проблема в чем-то другом внутри page1 или page2.html

1 голос
/ 02 марта 2012

Используя ваши примеры кода, я не могу воспроизвести ошибку - или я должен назвать ее «ошибкой» - используя jQuery 1.6.4 на Chrome, Firefox и даже IE8.

Я заметил неожиданное поведение с включенным кешем браузера. Изменения в исходном коде, сделанные на Page1.html, где они не были получены с сервера после самого первого нажатия на ссылку. Я бы порекомендовал вам отключить кеш браузера с помощью Firebug или Chrome Developer Tools и повторить тестирование.

Также, пожалуйста, попробуйте с обновленной версией jQuery или хотя бы той же версией, которую я использую с http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js.

Если что-либо из вышеперечисленного не работает, попробуйте установить задержку для получения page2.html. 

$(document).ready(function() {
    $('a.link').live('click', function() {
        $('#content').load('page1.html', function(){
            setTimeout("$('#content2').load('page2.html')", 250); // try diff. values
        });
    });
});

Если это не решит проблему, это поможет увидеть полный источник page1.html и page2.html.

1 голос
/ 02 марта 2012

Попробуй это. 

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#link').live('click', function() {
        $.ajax({
            url : 'ajax_info.txt', 
            dataType : 'text', 
            success: function(data){
                var $response1 = $('<div />').html(data);
                $.ajax({
                   url : 'ajax_info.txt', 
                   dataType : 'text', 
                   success: function(data){
                      responseCombined = $response1.find('p:last').html(data).end().html();
                      $('#content').html(responseCombined);
                   }
                });
            }
        });
    });
});
</script>
</head>
<body>
<div id="content"></div>
<div id='link'>load</div>
</body>
</html>

При успешном обратном вызове первого запроса я пытался загрузить responseHTML во временную переменную <div>, а при обратном вызове второго запроса я искал элемент p:last (в вашем случае это будет # content2 ) и поместите в него ответ на второй запрос ajax. Наконец, объедините данные в #content.

Для демонстрации перейдите на http://w3schools.com/ajax/tryit.asp?filename=tryajax_first и запустите указанный выше код.

1 голос
/ 27 февраля 2012

Подход, который вы выбрали, кажется неправильным. Если у вас нет другого выбора, кроме как заполнить страницу, используя подход с несколькими запросами ajax, попробуйте явно заполнить div содержимого данными со страницы 1, прежде чем переходить к заполнению content2. Это будет означать, что вы не можете использовать селектор .load, и вам нужно будет выполнять обычный ajax-запрос, например: 

$(document).ready(function() {
    $('a.link').live('click', function() {

        $.ajax({
                url : 'page1.html',
                success: function(data){
                    $('#content').html(data);
                    $('#content2').load('page2.html');
                    }
                });
    });
});
0 голосов
/ 29 февраля 2012

Так вот, как бы я решил эту проблему ... 

    $(document).ready(function() {
        $("a.link").click(function() {
            $.ajax({
               url:'page1.html',
               success:function(data) {
                   $("#page1").html(data);
               },
               complete:function() {
                   $.ajax({
                      url:'page2.html',
                      success:function(data) {
                         $("#page2").html(data);
                      }
                    });
                }
          });
        });
     });

Чуть больше кода, но использование функций success и complete callback должно дать немного больше контроля над заполнением этих div. В моем примере index.html имеет и page1.html имеет тег - кажется, работает нормально, без излишеств для меня ...

0 голосов
/ 25 февраля 2012

Вы должны убедиться, что в вашем page1.html есть элемент DOM, который можно указывать в качестве селектора в вашем index.html jQuery. Итак, вот макет, который вы можете использовать для page1.html: 

<div id="content2">//id name changed
   Content
</div>

В вашем index.html используйте этот jQuery: 

$(function(){
    $('a.link').live('click',function(){
        $('#content').load('1.html', function(){
            $('#content2').load('2.html');
        });
    });
});

Если он по-прежнему мигает и удаляет 2.html внутри # content2, проверьте, нажимаете ли вы ссылку более одного раза. Кроме того, используйте FireBug или инструмент Chrome Inspect Element для проверки всех сетевых передач, чтобы увидеть, что загружается, а что нет.

0 голосов
/ 25 февраля 2012

Попробуйте это: 

$('a.link').live('click', function(e) {
   e.preventDefault();
   $('#content').load('page1.html', function(){
       $('#content2').load('page2.html');
   });
});
Страница:
...