innerHTML и скрипты
Всем привет!
Есть код: function AjaxFormRequest(result_id,form_id,url) {
jQuery.ajax({
url: url,
type: "POST",
dataType: "html",
data: jQuery("#"+form_id).serialize(),
success: function(response) {
document.getElementById(result_id).innerHTML = response;
},
error: function(response) {
document.getElementById(result_id).innerHTML = "Ошибка при отправке формы";
}
});
}
В ответе присутствуют скрипты, но не работают. Как заставить их выполняться? |
Дело в том, что у вас при получении ответа в выбранный вами элемент HTML вписывается текст через свойство innerHTML. При этом вписанные элементы HTML работают, а вписанные скрипты - нет. Они при такой загрузке не обрабатываются, а грузятся, как простой текст, и могут еще и вызывать ошибки.
Для нормальной активизации динамически подгружаемого скрипта нужно создавать объект document.createElement ('script'); и задавать все прочие его свойства. |
response = response.replace(/<script(?:.*?)>([\s\S]*?)<\/script>/gi, function(m, script) {
eval(script);
return '';
});
|
Цитата:
Если там простая строчка/несколько строчек для исполнения сразу после загрузки - то все ОК, а если, например, определение функции - то функция останется неопределенной. Жалко, что alavrova_78 молчит - ее вопрос слишком в общей форме... |
response = response.replace(/<script(?:.*?)>([\s\S]*?)<\/script>/gi, function(m, code) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.appendChild(document.createTextNode(code));
document.head.appendChild(script);
return '';
});
:) |
Цитата:
|
Сам сейчас столкнулся с данной проблемой, поэтому понимаю топикстартера, так как для сбора данных формы использую абсолютно такую же конструкцию как у топикстартера.
Если своими словами описывать проблему: На сайте есть динамически подгруженное окно $("#modal_form").load("/ajax/registration.php");
в файле регистрации куча различных полей для ввода информации, включая ползунок слайдер, для работоспособности которого подтянута библиотека UI. Плюс в зависимости от выбранного select (тип пользователя) всё окошко обновляется и для каждого типа пользователя отдается свой набор полей формы. Происходит это тоже посредством load /* перезагрузка при выборе определенного select */
$('#sel_who').change( function(){
var myOption = $("#sel_who").val();
$("#modal_form").load(
"/ajax/registration.php",
{
whoareyou: myOption // передаем переменную, заданную в option
});
});
Эта перезагрузка идет уже из самого динамически подгруженного файла, то есть на данном этапе JS воспринимается как код. Далее после заполнения формы пользователь жмет на кнопку отправки формы и должен перейти ко второму шагу (загрузка изображений, которые привяжутся к вновь созданному пользователю), но прежде нужно проверить корректность отправленных данных. Их я проверяю средствами php в том же registration.php и при возникновении ошибки пытаюсь той же конструкцией load отправить пользователя на страницу формы и расставить все правильные переменные по своим полям, чтобы пользователю не пришлось все заново набирать $("#modal_form").load(
"/ajax/registration.php",
{
whoareyou: '.$whoareyou.',
step: 0,
name1: '.$name1.',
name2: '.$name2.',
name3: '.$name3.',
year: '.$year.',
month: '.$month.',
day: '.$day.',
country: '.$country.',
city: '.$city.',
art_direction: '.$art_direction.',
age_restrictions: '.$age_restrictions.',
mincost: '.$mincost.',
maxcost: '.$maxcost.',
education: '.$education.',
events: '.$events.',
public: '.$public.',
email: '.$email.',
pass_err_code: '.$pass_err_code.',
comeback: 1
});
как раз отрабатывает конструкция, указанная у топикстартера и из-за innerHTML весь JS код превращается в простой текст из-за того, что этот кусочек кода динамически собирается в .php я не могу вынести его в отдельный файл, для отдельного файла, как я понял, существует getscript. для полноты картины ниже приведу код подключаемых библиотек и скриптов, в динамически подгруженном файле <!-- Скрипты добавляем, чтобы работал ползунок -->
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.ui-slider.js"></script>
<script type="text/javascript" src="/js/jquery.main.js"></script>
<!-- КОНЕЦ Скрипты добавляем, чтобы работал ползунок -->
<script>
$(document).ready(function() { // вся мaгия пoсле зaгрузки стрaницы
$("#modal_form").load(
"/ajax/registration.php",
{
whoareyou: '.$whoareyou.',
step: 0,
name1: '.$name1.',
name2: '.$name2.',
name3: '.$name3.',
year: '.$year.',
month: '.$month.',
day: '.$day.',
country: '.$country.',
city: '.$city.',
art_direction: '.$art_direction.',
age_restrictions: '.$age_restrictions.',
mincost: '.$mincost.',
maxcost: '.$maxcost.',
education: '.$education.',
events: '.$events.',
public: '.$public.',
email: '.$email.',
pass_err_code: '.$pass_err_code.',
comeback: 1
});
/* перезагрузка при выборе определенного select */
$('#sel_who').change( function(){ // лoвим клик пo крестику или пoдлoжке
var myOption = $("#sel_who").val();
$("#modal_form").load(
"/ajax/registration.php",
{
whoareyou: myOption // передаем переменную, заданную в option
});
});
/* Зaкрытие мoдaльнoгo oкнa */
$('#modal_close, #overlay').click( function(){ // лoвим клик пo крестику или пoдлoжке
$('#modal_form')
.animate({opacity: 0, top: '45%'}, 200, // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх
function(){ // пoсле aнимaции
$(this).css('display', 'none'); // делaем ему display: none;
$('#overlay').fadeOut(400); // скрывaем пoдлoжку
}
);
});
});
</script>
Извините, если сумбурно описал проблему, первый раз на форуме вопрос задаю. Хочется уже для себя определиться, как сделать текст кодом, потому что проблема вылезает уже не в первый раз, раньше обходил ее так, чтобы после отправки формы уже не требовались скрипты JS, а вот теперь никуда не деться. |
В методе .load() можно задать не только адресата принимающего данные сервера, отправляемые данные, но и callback функцию, которая будет выполнена после запроса. Если требуется выполнение сценариев после запроса, то они в общем то могут уже быть заданы, а ответ сервера только определяет что из них запустить. Что-то не видно тут проблемы, или я не понимаю сути.
|
function AjaxFormRequest(result_id,form_id,url) {
jQuery.ajax({
url: url, //Адрес подгружаемой страницы
type: "POST", //Тип запроса
dataType: "html", //Тип данных
data: jQuery("#"+form_id).serialize(),
success: function(response) { //Если все нормально
alert(response);
document.getElementById(result_id).innerHTML = response;
/*$("#modal_form").load("/ajax/registration.php");*/
},
error: function(response) { //Если ошибка
document.getElementById(result_id).innerHTML = "Ошибка при отправке формы";
}
});
};
Вот с помощью этой конструкции я отправляю данный формы на обработку в файл registration.php document.getElementById(result_id).innerHTML = response; Вот эта строка показывает результат отработавшего registration.php, но помимо простого html там еще куски JS кода, но они не выполняются, поскольку из-за innerHTML воспринимаются как текст. В документации на этот случай предлагают использовать eval или globalEval(code) document.getElementById(result_id).innerHTML = eval(response); такая конструкция не возвращает мне ничего, хотя алертом, который на строчку выше, я получаю вменяемый код ожидаемой страницы. Возможно я неправильно использую eval? |
Цитата:
Если клиент сам знает, что необходимо выполнить, то вообще просто, если же определяется условиями от сервера, то ведь и он может передавать то, что необходимо запустить. Но в данном случае лучше работать с json-форматом, в котором каждый ключ определяет действия: данные, сообщения, запуск сценария и т.п.. Ну если надо подключение скриптов присланных сервером, то в среде JQ с этим проблем нет, выполните пример: <?php
if($_POST) exit('<span>Text</span><script>$(function(){alert(1)});</script>');
?>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
$('button').click(function() {
$.post(location, {a:1}, function(d) {
$('#as').html(d)
})
})
});
</script>
</head>
<body>
<div id="as"></div>
<button>GO</button>
</body>
<html>
Работает? |
| Часовой пояс GMT +3, время: 15:26. |