Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   $(document).append(data) где найти data ? (https://javascript.ru/forum/events/27419-%24-document-append-data-gde-najjti-data.html)

razerxxx 12.04.2012 14:25

$(document).append(data) где найти data ?
 
$('body').html($(html_from_ajax).html())

При таком подходе, если контент получен через ajax вызов, не выполняется javascript в нем находящийся.
После гугления нашел способ:
$(document).append($(html_from_ajax).find("#scripts_container"));
$('body').html($(html_from_ajax).html())

Поскольку этот контент может вызываться периодически - будет все время выполняться
$(document).append($(html_from_ajax).find("#scripts_container"))
,
что вобщемто мне и нужно (скрипт каждый раз заново инициализируется). Но куда записывается этот контент. Где его найти, затирается ли старое значение?
Или быть может, кто подскажет более изящное решение данного вопроса - При очередной загрузке страницы - выполнение javascript в ней находящегося?

p.s мои утверждения в данном посте - не совсем верны. Ошибка немного в другом месте. Смотри далее...

Le-mark43 16.04.2012 11:49

еле догнал в чем вопрос, наверное в силу своей малоопытности...
и у меня возникло больше вопросов чем ответов.
1. ты вообще уверен, что код, который ты вставляешь, вообще вставляется?
зная контент, можно это проверить (firebugом например), воспользовавшись поиском.
2. append($(html_from_ajax).find("#scripts_container" )) от такого я маненько в шоке, мне всегда казалось, что DOM сначала сформироваться должен, только потом на него подобные методы можно навесить, ну чтож... запомним такой подход.
3. $(html_from_ajax) что это такое?
если ссылка на функцию, которая выполняет Ajax запрос, то что в ней .find("#scripts_container") cможет найти? ведь функция как минимум не объект DOM.

может есть смысл разбить на составляющие:
1.сначала выполнить функцию ajax запроса и по Callback вставить контент куда надо. пусть будет <div id='html_from_ajax'>
2. собссно применить .find:
$('#html_from_ajax').find("#scripts_container")

razerxxx 16.04.2012 13:28

1. Код вставляется - так как выполняется яваскрипт.
3. html_from_ajax - строка содержащая html код, которая получена от сервера через ajax запрос. Например:
$.get('server_url', {key1: data1}, function(html_from_ajax) { 
    console.log(html_from_ajax)
})


2. Поэтому можно писать так:
append($(html_from_ajax).find("#scripts_container" ))

По другому можно было бы написать так:
var append_data = $(html_from_ajax).find("#scripts_container");
$(document).append(append_data);

Вобщем я так пишу для краткости кода, если это не сильно влияет на читаемость. Думаю у неновичков такая форма записи не вызовет вопросов. Начинающим пожалуй так писать не стоит, и лучше разбивать все действия на части.

razerxxx 16.04.2012 13:31

Цитата:

Сообщение от Le-mark43 (Сообщение 169324)
может есть смысл разбить на составляющие:
1.сначала выполнить функцию ajax запроса и по Callback вставить контент куда надо. пусть будет <div id='html_from_ajax'>
2. собссно применить .find:
$('#html_from_ajax').find("#scripts_container")

Вобщем я думаю что нашел оптимальное решение. Как доберусь до скрипта, отпишу здесь ответ.

Le-mark43 16.04.2012 14:15

Цитата:

Сообщение от razerxxx (Сообщение 168556)
По другому можно было бы написать так:
var append_data = $(html_from_ajax).find("#scripts_container");
$(document).append(append_data);

тогда уж:
var append_data = $(html_from_ajax).find("#scripts_container").html();


Но всеравно сомнения у меня, вроде для find нужен конкретный родитель, типа $("#div_main").find('#div').
надо проверить... с кодом в селекторе-родителе.
Цитата:

Сообщение от razerxxx (Сообщение 168556)
Думаю у неновичков такая форма записи не вызовет вопросов. Начинающим пожалуй так писать не стоит, и лучше разбивать все действия на части.

полностью согласен, ведь я новичок :)

razerxxx 16.04.2012 20:31

Цитата:

Сообщение от Le-mark43 (Сообщение 169341)
тогда уж:
var append_data = $(html_from_ajax).find("#scripts_container").html();


Но всеравно сомнения у меня, вроде для find нужен конкретный родитель, типа $("#div_main").find('#div').
надо проверить... с кодом в селекторе-родителе.

вот при такой записи в данном случае теги script будут вырезаны jquery.
Насчет $("#div_main").find('#div').
попробуй так:
var test_div = $("<div><div class="wrapper"><div id='find_me'>i am here</div></div></div>")
console.log(test_div.find("#find_me").text()); // должно вывести i am here

razerxxx 16.04.2012 20:41

собственно ответ на свой же вопрос:
Например в загруженной страничке есть тег script, - если сделать так: console.log($('body').html()); - то мы получим html докумена в котором будут и теги sript.
Если же мы сделаем так:
var new_html = $("<div><script>alert('it script')</script></div>");
console.log(new_html.html());

то не увидим в выводе тегов script. Вобщем во втором случае jquery выразает тэги script. То же самое произойдет если мы получили какой-либо html средствами ajax.
Моей задачей было получить новую страницу с помощью аякс загрузить ее в текущую страницу и выполнить все скрипты которые находятся на загруженной странице.
$.get('some_url.html', {key: value}, function(new_html) {

    var wrapper = document.createElement('div');
    wrapper.innerHTML = new_html;
    new_html = wrapper;
    $('body').html($(new_html).html());

})

Вот такой хак позволяет сделать так чтобы jquery не вырезал теги script.

P.S. Решение моей задачи верное, но предполагаемая причина оказалась ошибочной, см. далее

Le-mark43 16.04.2012 22:56

Цитата:

Сообщение от razerxxx (Сообщение 169434)
То же самое произойдет если мы получили какой-либо html средствами ajax.

Нееееее, ну неееееее.....
насчет concole.log не в курсе, но если ты вставляешь в див методом html(ajax_строка),
к твоему примеру:
$.get('some_url.html', {key: value}, function(new_html) {

    var wrapper = document.createElement('div');
    wrapper.innerHTML = new_html;
    document.body.appendChild(wrapper);
}, html);

все там обрабатывается, все скрипты, которые в теле, ничего jquery не вырезает. Специально проверял, у меня Аjax запрос грузит PHP скрипт у которого в теле еще 4 Аjax запроса на другие php, работает через $('#some_div').html(response);
специально менял на чистый Javascript для innerHTML, все работает, никаких изменений! даже создает и грузит все это дело в созданный див.
может ты спутал с функцией Load(), или text() вот они да, никаких скриптов.

Le-mark43 17.04.2012 00:19

еще как вариант, ну уж если ни в какую скрипты в теле не отрабатывают, хотя сами правильны, и в других местах работают, -> попробуй действовать скриптом в теле главного документа.
через livequery или delegate.
допустим:
ajax_строка:
<div><div class="wrapper"><div id='find_me'>i am here</div></div></div>

в теле главного документа:
<script>$(".wrapper").livequery(function(){
a=$(".wrapper").find('#find_me').text();
alert(a); //i am here
});</script>


но это конечно применимо токмо в том случае, если у тебя скрипты в теле ajax_строки примерно одинаковые, то бишь какие нить однородные функции.
суть: вешаешь эти функции через livequery, они срабатывают сразу при обнаружении Wrapper. естессно, livequery надо скачивать.
удобно тем, что для неё не надо указывать обработчик, как в случае с delegate. важна только пара объект.метод, потому при описанной декларации, функция срабатывает СРАЗУ, при появлении объекта в DOM

razerxxx 17.04.2012 02:47

какая у тебя версий jquery? насколько я помню раньше - у меня тоже все отрабатывало, а теперь перестало. Сейчас у меня jquery 1.7.1

Le-mark43 17.04.2012 08:54

у меня 1.7.2, это не суть важно, важно другое.
некоторые библиотеки перекрывают друг друга.
например, мне для для эффекта вкладок нужен Jquery tools, по очередности, он стоит вторым, из за этого не работают многие стандартные методы jquery 1.7.2, например delegate. если я поменяю их местами, delegate включится, но не смогут работать вкладки.
Livequery - маленькая библиотека, она ничего не меняет, только дополняет, и вроде как работает не через live, так что можно использовать в совсем ранних версиях jquery.
глянь, какие библиотеки у тебя подгружаются после 1.7.1, может, что-то ломает метод html, хотя я сомневаюсь. метод - первичный.

razerxxx 17.04.2012 14:35

Le-mark43 - спасибо тебе что наставил на пусть истинный. Я так хорошо прогнал оказывается. Действительно если данные полученны через ajax - то ничего jquery не вырезает. У меня же вырезало потому что в коде была записть такого вида:
var ajax_data = '<div>' + ajax_data + '</div>';
- поэтому собственно jquery и вырезал все теги script.
Второй же вариант с wrapper-ом - позволяет этого избежать. Просто в первом варианте видимо полученные данные преобразовывались в строку.
Вобщем задачу для себя я решил верно, а вот причину искал не там...

IgorN 16.05.2012 17:47

Что то метод с враппером у меня не пашет ((

jQuery.ajax({
            url: ...
            success: function(html) {
// тут в html js код есть
//Делаю
var wrapper = document.createElement('div');
wrapper.innerHTML = html;
html = wrapper;

field_dialog_{{ id }}.html($(html).html());
// если вывести  field_dialog_{{ id }}.html() то тут js уже обрезан
field_dialog отображает попап.

Пробовал с live играться и эффекта когда используется popup нет.

IgorN 16.05.2012 19:24

Задачу, решил.


Часовой пояс GMT +3, время: 06:17.