Блог

Главная - Вопросы по программированию - Ajax заменяет всю страницу, а не только div

Ajax заменяет всю страницу, а не только div

#javascript #jquery #ajax

#javascript #jquery #ajax

Вопрос:

У меня есть страница с вызовом Ajax, который должен заменить содержимое div. Однако при нажатии на ссылку вся страница заменяется содержимым div, а не просто заменой текста, который должен был быть. Есть мысли?

 $(document).ready(function () {
    $('#gnav a').click(function () {
        var page = this.hash.substr(1);
        $('#contents').html("");
        $('#content_wrapper').block();

        $.get(page  '.php', function(gotHtml){
            $('#contents').html(gotHtml);
            $('#content_wrapper').unblock();
        });
        return false;
    });
});

HTML

 <div id="contents" style="height:1200px; width: 620px">
    <!-- all html here that should be replaced-->
</div>

Комментарии:

1. Можете ли вы сократить код до части Ajax, которая не работает?

2. Я не совсем уверен, что вы имеете в виду. Я думаю, что Ajax сам по себе в порядке, но я не так уверен насчет селекторов…

3. Чего вы пытаетесь достичь с помощью методов block() и unblock()? Даже в этом случае эти селекторы, вероятно, должны быть $ (‘#contents_wrapper’), чтобы соответствовать идентификатору в разметке.

4. BlockUI — это плагин, который выделяет страницу серым цветом во время загрузки ajax и выдает вам приятное маленькое сообщение «пожалуйста, подождите», пока загрузится div.

5. Хм. Я предполагаю, что в скрипте src для плагина BlockUI URL-адрес должен быть github.com/malsup/blockui/raw/master/jquery.blockUI.js для ссылки на фактический javascript вместо дерева Github. Я бы немного сосредоточился на очистке кода целиком, и вы можете столкнуться с ошибкой AJAX во время этого процесса.

Ответ №1:

Почему бы вам просто не использовать $.load()?

 $(function () {
    $('#gnav a').click(function (e) {
        e.preventDefault();
        $('#contents').load(this.hash.substr(1)  '.php')
    });
});