Ajax загрузка контента (не вопрос)
Вдруг кому пригодится. Или кто предложит лучше...
Что предлагаю? Загрузку фрагмента страницы с помощью $.ajax - вместо load() Подробнее Кликом на ссылку подгрузить в заранее оговоренный div контент любого div'a с другой страницы того же сайта. Особенности CSS не предлагаю - на вкус и цвет. Ссылка, кликать на которую, должна быть в формате <a class="loot" href="page.php" rel="victim"></a>где page.php - адрес страницы-"донора" (откуда будем выдергивать div), а victim - ID нужного div'a (который конечно может быть любым - главное, чтобы вообще он был и чтобы он совпадал в атрибуте rel ссылки и в атрибуте id элемента-донора). В примере фрагмент подгружается в div id="thief". Кому нужен этот велосипед, вместо простого load()? Тем, кто столкнулся с проблемой конфликтов $.ajax и load - подробнее здесь Код скрипта:
$('.loot').live("click", function(){
var loaderImg = "<img src='loader.gif' alt='загрузка...' />"; // картинка до загрузки
var url = $(this).attr("href"); // получаем значение атрибута href ссылки
var rel = 'div#'+$(this).attr("rel"); // получаем значение атрибута rel ссылки
$("div#thief").html(loaderImg).html(function(){
var a=loaderImg;
$.ajax({ // запрашиваем данные со страницы-донора
url:url,
dataType:"html",
async:false,
success:function(b){a=$(b).find(rel)}, // извлекаем html из нужного элемента (в примере <div id="victim">)
error:function(){alert("Ajax!Ошибка.")}
});
return a
});
$("div#thief").fadeIn('fast'); // отображаем блок, если он был скрыт
return false;
});
Для желающих поворчать: не надо ворчать, лучше предлагайте лучше. Или оптимизируйте, - ибо я последнее время мало сплю (см.никнейм) Тем, кому нужен метод load - см. здесь (внизу первого поста). Спасибо за внимание. |
Если не ошибаюсь, то "return a" (14 строка) возвратит результат до завершения работы ajax запроса. Следовательно код не будет работать так как нужно.
|
тем не менее это работает.
странные комментарии... неужели здесь практикуется публиковать коды, не проверив их работоспособность? вы раните меня в самое сердце... зы: только вот похоже html(loaderImg) здесь пятая нога... ну и loaderImg в принципе. |
там всё нормально, запрос ведь синхронный (async:false )
можно сделать его асинхронным вот так :
var loaderImg = '<img src="loader.gif" alt="загрузка..." />';
$('.loot').live("click", function() {
var
$this = $(this);
$.ajax({
url: $this.attr("href"),
dataType: "html",
context: $("#thief").html(loaderImg),
success: function(b) {
b = $(b).find('#'+$this.attr('rel'));
this.html(b).fadeIn('fast')
}
});
return false;
});
|
melky,
Ой, точно. Не заметил "async:false". Тогда всё работает :) Я правда никогда не использовал "async:false" и не рекомендую использовать. ЗЫ Это лично моё мнение. |
atlantis,
melky (спасибо), не втему, но раз уж вы об этом заговорили - можно поделиться человеческим разъяснением преимущества синхронного запроса перед асинхронным или ссылки на такое человеческое разъяснение. До сих пор не врублюсь что такое хорошо, а что такое плохо, кроме того, что при синхронном обещают зависание браузера :) Чем плоха идея "занятся чем-то другим во время запроса"? Имеется в виду, что асинхронный может вести себя неадекватно при хреновом соединении? или что? |
Цитата:
асинхронный: отправили запрос -> делаем что хотим -> пришел ответ — обработали. |
Видимо превосходство синхронного запроса таится именно в
Цитата:
Цитата:
Я не хочу много зарабатывать, я хочу много получать! |
Цитата:
бывает, что на одной странице пять-шесть ajax подгрузок, и тогда синхронный запрос — вообще ни вариант :) а в целом, оба варианта не лучше и не хуже друг друга :) |
Цитата:
|
Цитата:
|
melky,
ваш скрипт у меня почему-то не заработал, но я, признаться попробовал из любопытства и впопыхах и мог чего-нить проглядеть... будет времечко свободно попробуйте сами компильнуть - для будущих поколений (а если работает - простите великодушно за занудство). Мне скорее всего действительно асинхронные пока что более близки, а вдруг кому синхронный понадобицца ;) |
Здравствуйте. Буду очень признателен если автор топика или кто-нибудь подскажет почему у меня в функции success:function(b) не получается получить высоту загружаемого блока :
adpo(тчк)demo(тчк)biz(тчк)ua <a class="loot" href="http://adpo.demo.biz.ua/testajax.html" rel="qwerty">testajax</a> Пытаюсь вывести содержимое div#qwerty в div#mbox : <div id="mask" class="window"><div id="mbox" class="window"></div></div> Вот здесь adpo(тчк)demo(тчк)biz(тчк)ua/templates/adpo/js/jcore-main.js :
var maskHeight = $j(document).height();
var maskWidth = $j(document).width();
$j('#mask').css({'width':maskWidth,'height':maskHeight});
$j('.loot').live("click", function(){
var loaderImg = "<div class=\"ajaxloader\"><img src='http://adpo.demo.biz.ua/templates/adpo/img/ajax_loader2.gif' alt='загрузка...' /><br> <span class=\"ajaxloadertxt\">Загрузка...</span></div>"; // картинка до загрузки
var url = $j(this).attr("href"); // получаем значение атрибута href ссылки
var rel = 'div#'+$j(this).attr("rel"); // получаем значение атрибута rel ссылки
$j("div#mbox").delay(3000).html(loaderImg).html(function(){
var a=loaderImg;
$j.ajax({ // запрашиваем данные со страницы-донора
url:url,
dataType:"html",
async:false,
success:function(b){a=$j(b).find(rel);
var swidth = screen.width;
var sheight = screen.height;
$j("#mbox").css({"display" : "block"});
$j("#qwerty").css({"display" : "block"});
var boxW = $j("#qwerty").width();
var boxH = $j("#qwerty").height();
var winW = swidth/2-boxW/2;
var winH = sheight/2-boxH/2;
$j("#mask").delay(100).fadeIn(100);
$j("#mbox").delay(100).fadeIn(500);
$j("#mbox").css({"top" : winH});
$j("#mbox").css({"left": winW});
$j("#console").html("winW - "+winW+", winH - "+winH+", boxW - "+boxW+", boxH - "+boxH+", swidth - "+swidth+", sheight - "+sheight+" ");
},
complete: function(msg) {
},
error:function(){alert("Ajax!Ошибка.")}
});
return a
});
return false;
});
|
Эмм... Я извиняюсь, но что это: $j.ajax ...
Символ "j" я что-то никогда не видел, чтобы так использовался. Оно вообще хоть работает? :) |
Цитата:
var $j = jQuery.noConflict();{
Все работает но эти переменные на выходе null :
var boxW = $j("#qwerty").width();
var boxH = $j("#qwerty").height();
|
Цитата:
|
скрипт запускается после загрузки страницы ?
|
Цитата:
|
Как я понял эти переменные
var boxW = $j("#qwerty").width();
var boxH = $j("#qwerty").height();
равны null потому что на странице, на которой выполняется скрипт нет <div id="qwerty"></div> Этот див берется из страницы источника из rel ссылки .loot. Если создать пустой <div id="qwerty"></div> на странице вызова скрипта то boxH = null а boxW равен ширине экрана. Неужеле нет возможности измерять ширину и высоту блока указанного в rel ссылки .loot как источник ? |
Спасибо за скрипт, все работает.
Только у меня вопрос. Каким образом можно добиться смены url в адресной строке браузера при переходе по ссылкам? |
Помогло даже в работе с модулем новостей Joomla!
Большое спасибо! Помогло даже в работе с модулем новостей Joomla!
|
не знаю.. у меня при клике по ссылке , происходит обычный переход на страницу page.php///
|
Может кто-нибудь помочь?
Есть такой скрипт:
$(document).on('click', '.link', function(e){
e.preventDefault();
var link = $(this).attr('href');
if (link == 'index.html') {$('#content').prev('.slider').show();}
else {
$.ajax({
type:'post',
url: link,
success: function(mes){
$('#content').prev('.slider').hide();
$('#content').html(mes);
}
})}
})
Он грузит в нужный блок, всю страницу. Как сделать чтобы он умел грузить не только всю страницу, но также и блоки. Т.е. когда нужно грузит блок, в другом случае страницу. Как не пытался объединить этот скрипт со скриптом ТС ничего не выходит. |
| Часовой пояс GMT +3, время: 04:15. |