Консультация № 172854
03.10.2009, 12:14
0.00 руб.
0 6 1
Здравствуйте, уважаемые эксперты! В html-документе при помощи jQuery в один из блочных элементов (div#block1) методом jQuery(..).load подгружается страница page1.html. В свою очередь, на подгружаемой странице page1.html есть гиперссылка, при переходе по которой нужно загрузить в другой блок на родительской странице (div#block2) документ page2.html. Возможно ли это сделать тем же jQuery(..).load ? Если можно, то куда его прописывать - в код основной страницы или page1.html?

Обсуждение

Неизвестный
03.10.2009, 22:58
общий
это ответ
Здравствуйте, denmmx.
Очевидно, что это следует сделать в родительской странице. Особенно, если Вы вырежете из ответа сервера на первый load какой-либо блок для подстановки в div#block1. Просто вряд ли Вы станете подставлять в div#block1, div#block2 целые документы - правильнее вырезать из них только то, что нужно подставить. Надеюсь, что как вырезать - это Вы знаете, а если не знаете, то я Вам в мини-форуме подскажу. Скажу честно, я раньше про вырезатие сам не знал, а когда узнал, был приятно впечатлен :)

Так что пишите в родительском документе с использованием функции $('a').live('click', function () {}), а вообще, я бы рекомендовал Вам попробовать и тот, и другой вариант.

С уважением, Товарищ Бородин
5
Неизвестный
04.10.2009, 18:12
общий
Товарищ Бородин:
Можно поподробнее про это "вырезание"?
В общем, предполагается сделать такую вещь - небольшой фильтр товаров для интернет-магазина. На странице располагаются три SELECT'a - "серия", "номер", "[некоторый] параметр" товара. При выборе первым select'ом выполняется следующее:
- в первый блок на странице (#block1) подгружается изображение выбранной серии (вернее, небольшая html страничка с названием серии и изображением наиболее показательного товара из неё);
- во второй блок #block2 - соответственно схема товаров серии (также небольшая страница с изображением);
- в третий блок #block3 - страница с изображениями всех товаров из выбранной серии.

Остальные select'ы пока не трогаем.
Собственно, хотелось бы все это сделать на jQuery (возможно даже сделать какую-то базу из товаров в виде xml-файла (где будут перечислены серия, номер, параметр, пути до изображений и схем товаров), дабы можно было оперативно редактировать/брать всю нужную информацию из него - это было бы просто замечательно ). Но так как время поджимает, пришлось все делать используя iframe'ы, попутно создавая огромную кучу отдельных страниц для серий/схем/и т.д. и подгружая их вот этим скриптом во фреймы
Код:
<script type="text/javascript">
function iframeload(){
var ifr1=document.getElementById('serie');
var ifr2=document.getElementById('number');
var ifr3=document.getElementById('views');
var sel1=document.getElementById('series').value;
ifr1.src="shop\/series\/"+(sel1)+".html";
ifr2.src="shop\/schemes\/"+(sel1)+".html";
ifr3.src="shop\/views\/"+(sel1)+".html";
}
</script>

Понятно, что это не выход из положения и надеюсь, что это временно

Теперь собственно про это "вырезание". Допустим, есть у меня готовая html страница (где есть изображения всех товаров) - как подгрузить в 1-й блок (родительской) часть этой страницы с нужным изображением например? И уже из подгруженного блока"вызвать" загрузку 2-го или 3-го блока (из той же или другой страницы)? Можно небольшой пример? Был бы очень благодарен!
Неизвестный
04.10.2009, 19:23
общий
denmmx:
Предположим, в загружающей странице есть элемент DIV с id="block1". А теперь предположим, что в загружаемой странице имеется элемент DIV с id="block2". Допустим, мы хотим с помощью AJAX`а загрузить содержимое элемента block2 в элемент block1. Каким образом это можно сделать?

А делается это очень просто - я когда увидел, сам немного обалдел, и даже сначала не понял, как же это так...

$('#block1').load(url + ' #block2 *');

где url - адрес загружаемой страницы. Что я в данном случае сделал? Я добавил к url, вообще говоря, селектор. Селектор сей обозначает "все элементы внутри элемента с id=block2". Вот так. То есть, jQuery загрузит страницу, вырежет из нее все элементы, которые удовлетворяют такому селектору, и засунет эти элементы в элемент block1 загружающей страницы.
Очень простая конструкция, а сколько нервов экономит...
Неизвестный
04.10.2009, 23:23
общий
Товарищ Бородин:
Большое спасибо! Но всё-таки можно небольшой примерчик скрипта? Куда вставлять эту строчку
$('#block1').load(url + ' #block2 *');
Что-то не пойму никак...
Неизвестный
04.10.2009, 23:41
общий
Ну если Вы пытаетесь овладевать jQuery(т. е. Javascript), то Вы должны знать о такой штуке, как события. Так вот, клик по ссылке - это событие. И когда Вы кликаете по ссылке, Вы запускаете событие click.

$('a').click(function () {
// а сюда конструкцию подставлять, тогда при клике по ссылке она выполнится.
// Только в таком варианте она сработает при клике по любой ссылке!!! Надо подставить такой селектор,
// который будет соответствовать именно той ссылке, которая Вам нужна
});

Советую посмотреть мануал [url=docs.jquery.com]URL >>[/url], ищите раздел Ajax. Там объясняется все достаточно подробно, есть рабочие примеры практически для всего. И не надо лениться и жаловаться на нехватку времени! Я не уверен, что у Вас времени меньше, чем у меня(Вам ведь, наверно, не надо сдавать большой сайт во вторник, не правда ли?). Привыкайте работать самостоятельно! Во-первых, так интереснее, а во-вторых, знания, полученные самостоятельно, прочнее удерживаются центральным процессором(т. е. серыми микросхемами головного мозга)
Неизвестный
05.10.2009, 00:06
общий
Товарищ Бородин:
Спасибо, немного разобрался Буду изучать документацию.
Форма ответа