Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.12.2015, 12:08
Интересующийся
Отправить личное сообщение для alavrova_78 Посмотреть профиль Найти все сообщения от alavrova_78
 
Регистрация: 11.12.2015
Сообщений: 11

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 = "Ошибка при отправке формы";
                }
             });
        }

В ответе присутствуют скрипты, но не работают. Как заставить их выполняться?
Ответить с цитированием
  #2 (permalink)  
Старый 28.12.2015, 12:22
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Дело в том, что у вас при получении ответа в выбранный вами элемент HTML вписывается текст через свойство innerHTML. При этом вписанные элементы HTML работают, а вписанные скрипты - нет. Они при такой загрузке не обрабатываются, а грузятся, как простой текст, и могут еще и вызывать ошибки.
Для нормальной активизации динамически подгружаемого скрипта нужно создавать объект document.createElement ('script'); и задавать все прочие его свойства.
Ответить с цитированием
  #3 (permalink)  
Старый 28.12.2015, 14:04
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

response = response.replace(/<script(?:.*?)>([\s\S]*?)<\/script>/gi, function(m, script) {
    eval(script);
    return '';
});
Ответить с цитированием
  #4 (permalink)  
Старый 28.12.2015, 16:51
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от Ruslan_xDD Посмотреть сообщение
response = response.replace(/<script(?:.*?)>([\s\S]*?)<\/script>/gi, function(m, script) {
    eval(script);
    return '';
});
Работоспособность такого варианта зависит от загружаемого скрипта.
Если там простая строчка/несколько строчек для исполнения сразу после загрузки - то все ОК, а если, например, определение функции - то функция останется неопределенной.
Жалко, что alavrova_78 молчит - ее вопрос слишком в общей форме...
Ответить с цитированием
  #5 (permalink)  
Старый 28.12.2015, 17:08
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

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 '';
});



Последний раз редактировалось ruslan_mart, 28.12.2015 в 17:35.
Ответить с цитированием
  #6 (permalink)  
Старый 28.12.2015, 17:34
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от Ruslan_xDD Посмотреть сообщение
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);
});


Количество вариантов растет... а топикстартер молчит...
Ответить с цитированием
  #7 (permalink)  
Старый 06.01.2016, 01:17
Интересующийся
Отправить личное сообщение для CHER84 Посмотреть профиль Найти все сообщения от CHER84
 
Регистрация: 06.01.2016
Сообщений: 11

Сам сейчас столкнулся с данной проблемой, поэтому понимаю топикстартера, так как для сбора данных формы использую абсолютно такую же конструкцию как у топикстартера.
Если своими словами описывать проблему:
На сайте есть динамически подгруженное окно
$("#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, а вот теперь никуда не деться.
Ответить с цитированием
  #8 (permalink)  
Старый 06.01.2016, 01:47
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

В методе .load() можно задать не только адресата принимающего данные сервера, отправляемые данные, но и callback функцию, которая будет выполнена после запроса. Если требуется выполнение сценариев после запроса, то они в общем то могут уже быть заданы, а ответ сервера только определяет что из них запустить. Что-то не видно тут проблемы, или я не понимаю сути.
Ответить с цитированием
  #9 (permalink)  
Старый 06.01.2016, 01:54
Интересующийся
Отправить личное сообщение для CHER84 Посмотреть профиль Найти все сообщения от CHER84
 
Регистрация: 06.01.2016
Сообщений: 11

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?
Ответить с цитированием
  #10 (permalink)  
Старый 06.01.2016, 02:11
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от CHER84
о помимо простого html там еще куски JS кода...
Зачем? Определить необходимые сценарии и подключать их сразу можно или это по каким либо причинам не желательно?
Если клиент сам знает, что необходимо выполнить, то вообще просто, если же определяется условиями от сервера, то ведь и он может передавать то, что необходимо запустить. Но в данном случае лучше работать с 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>


Работает?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипты в java.js перестают работать. oneplus Элементы интерфейса 34 28.05.2015 19:22
Не работают скрипты после обновления данных Dealaxer Общие вопросы Javascript 4 18.03.2015 17:12
innerHTML....? Hapson Элементы интерфейса 4 24.07.2013 01:33
Не работают скрипты на jQuery в IE6/7 Александр345 jQuery 6 19.08.2011 13:27
ошибка с innerHTML Gekt0r Общие вопросы Javascript 15 21.08.2008 11:57