Форум PHP программистов > динамический контент и методы jquery (не работают)

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: динамический контент и методы jquery (не работают)

sharki

16.08.2011 - 13:13

Всем привет, вопрос таков, все знают что для динамического контента на события вешается некий метод LIVE, который работает с динамическим контентом, например $("#bla").live('click',function(){... Здесь всё ок, а вот как быть с простыми методами, типа $("button").button();, ведь он не ловит тот DOM, который был добавлен AJAX'ом например...

Есть ли 'LIVE' для простых методов JQ? Заново запускать их после AJAX как то не резонно...

Спасибо

Спустя 31 минута, 12 секунд (16.08.2011 - 12:44) Michael написал(а):

или заново навешивай или используй слушателя на родителе(live)

Спустя 3 минуты, 56 секунд (16.08.2011 - 12:48) sharki написал(а):

Michael
Я бы с удовольствием повесил LIVE на все методы..но это не пройдет.

Т.е ты предлогаешь поперезапускать все методы которые были до этого? и при каждой подгрузке контента заново перезапускать?

Michael не знаешь, какие методы или св-ва отвечают за доступ к новым эл-м DOM на чистом JS?

Спустя 5 минут, 54 секунды (16.08.2011 - 12:54) alex12060 написал(а):

sharki

тебе надо повесить live на динамический контент? Так?

Спустя 5 минут, 9 секунд (16.08.2011 - 12:59) Michael написал(а):

Цитата

Michael не знаешь, какие методы или св-ва отвечают за доступ к новым эл-м DOM на чистом JS?

Обычно если так в куче навешивать, то в теле обработчика надо устанавливать элементу класс и проверять на его наличие. Т.е. новая навеска произойдет на те элементы дом у которых не стоит некий класс.

Спустя 2 минуты, 43 секунды (16.08.2011 - 13:02) sharki написал(а):

alex12060
Типо того. Вот смотри краткий обзор приложения

Есть страница

<html.....
$(document).ready(function() { 

// методы JQ ну там всякие фитчи, те же табы и т.п...
$("button").button();

// всякие функции, который работают только здесь (некие ограничения с библой SWFupload) не суть...

function uploadStart(file) {
        $('.namefile').html('Начата загрузка файла ' + file.name + '.');
        return true;
    }
    
    function uploadProgress(file, bytesLoaded, bytesTotal) {
        $('.status').html(Math.round(bytesLoaded/bytesTotal*100) + '% - ');
       // $("#template_tabs_parent").html(SWFUpload.speed.formatBPS(file.currentSpeed));
    }

    function fileDialogComplete(numFilesSelected, numFilesQueued) {
        $('.selectedFile').html('Выбрано ' + numFilesSelected + ' файлa(ов), начинаю загрузку...');
        this.startUpload(); 
    }
....


 });

// ЧУТЬ НИЖЕ функция для загрзки аяксом 

function load(n){
   $.ajax({
       type: "POST",
       url: "/connectors/ajax.php",
       data: {op: 'get_template', act : "loadPage", n: n},
       success: function(msg){
..............

Допустим мы вызвали функцию загрузки нового контента, в новом контенте есть всякие табы и кнопки, на которые должны срабатывать соответствующие функции, типа $("button").button(); $("#list").tabs(); и т.д

НО ЗАГВОЗДКА В ТОМ, ЧТО ОНИ НЕ СРАБАТЫБАТЫВАЮТ, т.к методы видят первоначальный DOM...

Можно конечно повызывать все эти методы в теле подгружаемого документа, но это плохо...

Спустя 10 минут, 29 секунд (16.08.2011 - 13:12) alex12060 написал(а):

Насколько я помню, ЖК умеет работать с динамикой, но не знаю что у тебя. Я тебе советую 2 вещи:

Все свои фишки вынести в футер, или после аякса, тогда будет видимость
А если 1 не сработает, то попробуй работать с уникальными ID и CLASS
А если 1 и 2 не арбайтен, то пихать все в аяксовое подгружение.

Спустя 7 минут, 40 секунд (16.08.2011 - 13:20) sharki написал(а):

alex12060
Все ID уникальны, в итоге придется вызывать все функции после загрузки нового контента в success

Спустя 1 час, 15 минут, 15 секунд (16.08.2011 - 14:35) alex12060 написал(а):

Я не это имел ввиду, вот допустим, у тебя:


<html>
....
<script type="text/javascript">
function load(n){
   $.ajax({
       type: "POST",
       url: "/connectors/ajax.php",
       data: {op: 'get_template', act : "loadPage", n: n},
       success: function(msg){
        //
       }
   });

   // Сюда плюхи

   $("button").button(); $("#list").tabs();
</script>

Или так:


<html>
....
<script type="text/javascript">
function load(n){
   $.ajax({
       type: "POST",
       url: "/connectors/ajax.php",
       data: {op: 'get_template', act : "loadPage", n: n},
       success: function(msg){
        //
       }
   });

</script>
<body>
<!-- -->

<script>
   // Сюда плюхи

   $("button").button(); $("#list").tabs();
</script>
</body>
</html>

Хотя и так можно сделать, как ты придумал :)

Спустя 9 минут, 53 секунды (16.08.2011 - 14:45) sharki написал(а):

alex12060
Щас гляну, но мне кажется, что здесь не имеет значение где располагаются вызовы методов, т.к они сразу выполняться (занесутся в память, и будут ждать свои блоки с ID и т.п). В памяти находится объект из нынешнего DOM, а потом я загружаю новый, а новый он не видит, следовательно надо еще раз его дернуть, чтобы он опять нашел в новом доме свои ID и т.п...

Спустя 7 месяцев, 7 дней, 4 часа, 38 минут, 1 секунда (23.03.2012 - 19:23) Павел Третьяков написал(а):

Попробуй поработать с объектами. Создай новый объект, по отдельности каждому свойству объекта присвой функции для каждой твоей вентиплюхи. А самому последнему свойству задай функцию, которая вызывает все остальные свойства этого объекта.

Затем вне объекта вызови это свойство этого объекта, получается начальным DOM обеспечиться всеми плюшками JQuery, затем в объекте $.Ajax в свойстве success в конце итоговой функции просто вызови это последнее свойство созданного тобой объекта.

Получается тебе останется в будущем добавлять новые свойства для твоего объекта, кончено это тоже самое что каждый раз объявлять все вентиплюхи JQuery.

Но я так подумал, что либо так, либо через timeOut()обновлять DOM документа. Но ведь это будет странно выглядеть если вначале подгруженный документ выглядит как сумасшедший дом, и потом через пару секунд преображается.

Расписал бы все подробнее, да вот в универ опаздываю :) удачи с проектом. Если возникнут вопросы или просто возникнет пообщаться и обменяться опытом, то пиши - (http://vk.com/id22346090)
Павел Третьяков.

Так я вернулся, вот редактирую ответ с примером:


// Вот твой объект
var system = {
// Создаем для каждой фишки свое свойство в объекте
tabs = function(){
  $(".tabs").tabs();
} ,
accordion = function(){
 $(".accordion").accirdion();
} ,

// ... ну и так далее, я думаю ты понял
// затем создаем итоговое свойство, которое применяет все свойства объекта...
finalMakeAll = function(){
 this.tabs();
 this.accordion();
 // ...ну и все перечислить
}
}

// Сразу вызываем свойство finalMakeAll чтобы начальный контент сразу
// получил свою дозу JQuery
system.finalMakeAll();

// Затем естественно какой-то твой код и.п. и идет твоя Ajax фунция
// впихнул свой запрос долго печатать :)

$.ajax({
	url 	: action ,
	type	: "POST" ,
	data	: "jsonData=" + $.toJSON(formData) ,
	success	: function (result){
		divMessage.html(result);
		divMessage.hide(500);
		divMessage.show(500);
		// И в конце функции говорим применить фишки к новому DOM 
		system.finalMakeAll();
	}
});

Конечно здесь есть минусы. Главный минус в том что, некоторые плагины к JQuerу, вторично вызванные, могут сотворить какие-нибудь вещи странные, но ведь мы программисты :) и надеюсь сможем обойти этот косяк, например сняв плагин с дерева документа и тут же снова выставив. Но это пример :) программированию нет предела ) так что надеюсь мой совет тебе поможет :)

Быстрый ответ:

Здесь расположена полная версия этой страницы.