Выполнение JS в страницах подгруженных через ajax
Подскажите как можно сделать. Есть такой скрипт
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
var link = $(this).attr('href');
$.ajax({
type:'post',
url: link,
success: function(mes){
$('#content').html(mes);
}
})
})
})
Который находится на странице и подгружает в определенный блок различные html страницы. Как можно сделать чтобы этот скрипт работал также и в подгружаемом блоке?:help: |
Добавить данный скрипт в подгружаемые страницы. Иначе исходный скрипт не увидит искомые объекты в подгруженной странице.
|
А вообще интересная задача. Получается, нужно, чтобы в блоке #content ссылки также открывали страницы в этом же блоке #content. Похоже на обычный iframe.
|
Цитата:
|
Mikhail1989,
ставить клик на документ а не на ссылку
$(document).on('click', 'a' , function(e){})
|
Цитата:
Извините, а не можете ли Вы подсказать как в ajax подгружать выполнение скриптов. Есть подгружаемый контент в котором элементы должны обрабатываться скриптами, но этого не происходит, так как скрипты загруженные при начальной загрузке сайта, не распространяются на контент подгруженный через ajax. |
Цитата:
|
Цитата:
<?
if($_POST['a']) exit(
'<div id=as></div>
<script>
$(function() {
$("#as").text("Опаньки!").css({color:"#f00"})
});
</script>'
)
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
$.post(location, {a:1}, function(d) {
$('body').append(d)
}, 'html')
});
</script>
</head>
<body>
</body>
</html>
|
Цитата:
|
Mikhail1989,
а как до того , что и чем инициализировали ? у хороших плагинов есть refresh |
рони,
плагин jScrollPane (http://jscrollpane.kelvinluck.com/) пытаюсь инициализировать его так
$('.scroll-pane').jScrollPane();
но срабатывает он почему то частично, т.е. полоса прокрутки изменяется, но до конца не прокручивается контент. |
Цитата:
$(function()
{
$('.scroll-pane').jScrollPane();
});
или лучше так
$(window).load(function()
{
$('.scroll-pane').jScrollPane();
});
|
Mikhail1989,
если изменилось содержание одного $('.scroll-pane') ; после того как загрузили новое содержимое сделать так var api = $('.scroll-pane').data('jsp'); api.reinitialise(); если елементов много обойти циклом все пример http://jscrollpane.kelvinluck.com/dynamic_height.html |
Цитата:
ps. и вот что интересно если нажать на ссылку повторно, то срабатывает как надо, при
$('.scroll-pane').jScrollPane();
|
Mikhail1989,
это api.reinitialise(); или это $('.scroll-pane').jScrollPane(); надо ставить в то что у вас подгружает контент |
рони,
если так
$(document).on('click', 'a', function(e){
e.preventDefault();
var link = $(this).attr('href');
var api = $('.scroll-pane').data('jsp');
$.ajax({
type:'post',
url: link,
success: function(mes){
$('#content').prev('.slider').hide();
$('#content').html(mes);
api.reinitialise();
}
})
})
то в консоли TypeError: api is null api.reinitialise(); если так
$(document).on('click', 'a', function(e){
e.preventDefault();
var link = $(this).attr('href');
$.ajax({
type:'post',
url: link,
success: function(mes){
$('#content').prev('.slider').hide();
$('#content').html(mes);
$('.scroll-pane').jScrollPane();
}
})
})
то срабатывает, но прокрутка не действует до конца, а если нажать на ссылку повторно, то уже все работает как надо |
Mikhail1989,
$(window).on('resize', function() {
$('.scroll-pane').each( function() {
var api = $(this).data('jsp');
if(api) {api.reinitialise()}
else {
$(this).jScrollPane();
}
} )
})
$(document).on('click', 'a', function(e){
e.preventDefault();
var link = $(this).attr('href');
$.ajax({
type:'post',
url: link,
success: function(mes){
$('#content').prev('.slider').hide();
$('#content').html(mes);
$(window).resize()
}
})
})
|
рони,
спасибо, но все никак не работает. постоянно срабатывает это условие
else {
$(this).jScrollPane();
}
и как результат не полная прокрутка подгруженного материала |
Цитата:
хотя, нормально вроде, спасибо |
рони,
подсобите еще пожалуйста, опять проблема по этому скрипту, на одной из подгружаемых страниц есть свои обработчики для ссылок, но этот обработчик же действует, и на них тоже. Как его можно отключить перед выполнением нужных мне обработчиков. Пробовал .ubind() .off() не получилось, наверно, не туда их добавляю. |
Mikhail1989,
установите разные классы и назначьте через класс клики |
Цитата:
|
рони,
снова обращаюсь к вам за помощью, никак не могу реинициализировать еще один плагин - PrettyPhoto. Пробую после загрузки контента вставить вот это
$("a[rel^='prettyPhoto']").prettyPhoto();
но результата никакого |
Цитата:
|
Цитата:
подгружаю через все тот же скрипт добавив в success, вот это
$("a[rel^='prettyPhoto']").prettyPhoto();
для реанициализации
$(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);
$("a[rel^='prettyPhoto']").prettyPhoto();
$(window).scroll()
}
})}
})
и гружу файл с галлереей <div class="gal1"> <div class="photo1"><a href="large1.jpg" rel="prettyPhoto[pp_gal1]" title="Фото1"><img src="foto/small1.jpg"><span></span></a></div> </div> <div class="gal1"> <div class="photo1"><a href="large2.jpg" rel="prettyPhoto[pp_gal1]" title="Фото2"><img src="foto/small2.jpg"><span></span></a></div> </div> <div class="gal1"> <div class="photo1"><a href="large3.jpg" rel="prettyPhoto[pp_gal1]" title="Фото3"><img src="foto/small3.jpg"><span></span></a></div> </div> но результата нет, т.е. файл подгружается а изображений нет |
Цитата:
|
Цитата:
:help: |
Цитата:
|
рони,
а можно как-то прокачать этот скрипт
$(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);
$("a[rel^='prettyPhoto']").prettyPhoto();
$(window).scroll()
}
})}
})
чтобы не только можно было бы подгружать файл целиком, но и отдельные контейнеры, видел что как-то через rel делают, но так и не смог прикрутить. Нет ли у вас каких-нибудь идей по этому поводу? |
Цитата:
а $.load --где можно указать куда грузить а после загрузки какую часть загруженнного добавлять. http://api.jquery.com/load/ |
Цитата:
|
Цитата:
|
Mikhail1989,
вам нужен либо телепат, либо специалист ... увы ничем более помочь не могу |
Цитата:
$('#content').load('full_news.html #link2');
и в ней грузится информация только из #link2, а надо чтобы как-то так было:
var a = '#'+$(this).attr('rel');
$('#content').load('full_news.html a');
но это соответственно не работает, может есть какой-нибудь вариант решения? |
Цитата:
$('#content').load('full_news.html ' + a);
|
Цитата:
|
| Часовой пояс GMT +3, время: 13:02. |