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

Question

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

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

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

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

Функция JavaScript Main.php 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 после того, как я установил div divHTML. Итак, позвольте мне объяснить, что я действительно хочу делать с javascript, после того, как div установлен.

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

Проблема в том, что для «преобразования» этих обычных элементов select существует некоторый 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 заполнен, только заново генерирует уже существующие выпадающие списки, а не два новых.

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

Answer 1

Вот хорошее прочтение о понимании того, что вы делаете: 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. I.e. 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
}

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

Самый простой способ сделать это - удалить 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
    }
}

Answer 2

Ваш файл results.php должен выглядеть примерно так ...

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

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

Answer 3

попробуйте обернуть код 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();
    }