javascript XMLHttpRequest открыть файл php и выполнить больше javascript

У меня есть главная страница, назовите ее Main.php. На этой странице есть кнопка, которая при нажатии на нее устанавливает внутренний HTTML div (уже на Main.php, называемый divResults) с результатами Results.php.

Когда вызывается метод «Results.php», возвращаемый HTML «Эти результаты» правильно принимается и устанавливается как содержимое для divResults на Main.php. Однако любой javascript из Results.php не выполняется. Например, я пытаюсь сделать простой window.alert. Вот пример кода:

Кнопка Main.php link, чтобы начать действие:

<img src="$MyImageSource" onclick=\"ExpandDropdownDiv()\" /> 

Main.php javascript function ExpandDropdownDiv ():

 function ExpandDropdownDiv(){ if (window.XMLHttpRequest)/* code for IE7+, Firefox, Chrome, Opera, Safari */ { xmlhttp=new XMLHttpRequest(); } else {/* code for IE6, IE5 */ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */ { document.getElementById("divResults").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","Results.php",true); xmlhttp.send(); } 

Пример кода Results.php:

 <script type="text/javascript"> alert("Success"); </script> These Are The Results 

—————— Редактировать – Обновить ——————

Простое предупреждение, из Results.php – всего лишь пример. Если бы мне удалось заставить это работать, я считаю, что смогу решить остальную часть своей проблемы самостоятельно. Тем не менее, я заметил несколько комментариев, предлагающих просто разместить предупреждение в javascript Main.php после того, как я установил innerHTML div. Итак, позвольте мне объяснить, что я действительно хочу сделать с javascript после установки div.

На рисунке 1 показаны некоторые нормальные элементы «Выбрать» html, которые были преобразованы с помощью jquery и расширения выпадающего списка (.js). Когда пользователь нажимает красочную стрелку вниз внизу, div расширяется, (изображение 2) и еще два элемента «Выбрать» генерируются внутри этого другого .php-файла … html возвращается и помещается в div. Таким образом, мне не нужно перезагружать всю страницу, и вы можете разместить новые выпадающие меню только под существующими.

Проблема состоит в том, что для «преобразования» этих нормальных элементов выбора существует некоторый javascript, который необходимо выполнить против этого HTML:

 $(document).ready(function() { $(".MultiSelect").dropdownchecklist( {firstItemChecksAll: true, maxDropHeight: 300 , searchTextbox: true, width: 100, textFormatFunction: function(options) { var selectedOptions = options.filter(":selected"); var countOfSelected = selectedOptions.size(); var size = options.size(); switch(countOfSelected) { case 0: return "All"; case 1: return selectedOptions.text(); /* case size: return "All"; */ default: return countOfSelected + " selected"; } } } ); } 

Итак, каким-то образом мне нужно иметь возможность запускать javascript против HTML, который создается из этого другого .php-файла. И просто вызывая вышеуказанный код, после того, как мои divs innerHTML заполнены, только повторно генерирует уже существующие выпадающие списки, а не два новых.

Примеры изображений

введите описание изображения здесь

введите описание изображения здесь

Вот хороший обзор о том, что вы делаете: Eval embed JavaScript Ajax: стиль YUI

Создание кода работает с помощью eval (); но его не рекомендуется по различным причинам:

Возьмем ваш php и изменим его следующим образом:

 <script type="text/javascript"> function result() { alert("Success"); } </script> These Are The Results 

и это функция обратного вызова от AJAX. результат (а); не выполняется, потому что он не получает оценку и, следовательно, не существует. которое в вашем случае

 if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */ { document.getElementById("divResults").innerHTML=xmlhttp.responseText; result(); // this function is embedded in the responseText // and doesn't get evaluated. Ie it doesn't exist } а if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */ { document.getElementById("divResults").innerHTML=xmlhttp.responseText; result(); // this function is embedded in the responseText // and doesn't get evaluated. Ie it doesn't exist } 

для того, чтобы браузер распознал result(); вы должны сделать eval(); на всех операторах JavaScript с тегами сценария, которые вы ввели в div с id divResults :

 if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */ { document.getElementById("divResults").innerHTML=xmlhttp.responseText; var myDiv = document.getElementById("divResults"); var myscripz = myDiv.getElementsByTagName('script'); for(var i=myscripz.length; i--;){ eval(myscripz[i].innerHTML); } result(); //alerts success } а if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */ { document.getElementById("divResults").innerHTML=xmlhttp.responseText; var myDiv = document.getElementById("divResults"); var myscripz = myDiv.getElementsByTagName('script'); for(var i=myscripz.length; i--;){ eval(myscripz[i].innerHTML); } result(); //alerts success } 

Простой способ:

Самый простой способ сделать это – это в основном удалить JavaScript из php и отобразить содержимое, а после обратного вызова просто выполнить остальную часть JavaScript в функции обратного вызова php:

  echo 'These Are The Results'; 

JavaScript:

 xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */ { document.getElementById("divResults").innerHTML=xmlhttp.responseText; alert('success'); // or whatever else JavaScript you need to do } } 

попробуйте обернуть javascript-код из Result.php в функцию и вызвать его после его вставки так:

 <script type="text/javascript"> function result() { alert("Success"); } </script> These Are The Results 

а также

  if (xmlhttp.readyState==4)/* && xmlhttp.status==200) */ { document.getElementById("divResults").innerHTML=xmlhttp.responseText; if(result) result(); } 

Ваш результат.php должен быть чем-то вроде …

 echo 'eval("function results() { alert(\'success\'); }");'; 

А затем вызовите функцию результатов.