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

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

Изображение 1 показывает некоторые обычные html-элементы "Выбрать", которые были преобразованы с помощью jquery и расширения раскрывающегося списка (.js). Когда пользователь щелкает цветную стрелку вниз внизу, элемент div расширяется, (изображение 2), и в этом другом файле .php генерируются еще два элемента "Select"... возвращается 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 повторно генерирует только уже существующие раскрывающиеся списки, а не два новых.

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

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

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


person Adam    schedule 11.02.2011    source источник
comment
почему бы просто не поставить предупреждение (успех'); внутри обратного вызова ajax?   -  person KJYe.Name 葉家仁    schedule 11.02.2011
comment
@ kjy112 - можешь привести пример, я попробую? я едва заставил этот код работать и даже не полностью его понимаю.   -  person Adam    schedule 11.02.2011
comment
Самый простой способ сделать это, Адам, — не встраивать javascript в ваш PHP, а вместо этого выполнять JavaScript после того, как вы введете результат php в функцию обратного вызова ajax.   -  person KJYe.Name 葉家仁    schedule 11.02.2011
comment
@ Адам, если ты просто хочешь запустить его, просто посмотри на Легкую часть под моим ответом.   -  person KJYe.Name 葉家仁    schedule 11.02.2011
comment
@kjy - ваш ответ был ОЧЕНЬ легко читать и понимать, за что большое вам спасибо! Я попробовал ваш пример, но все равно получил ошибку, что результат не определен... = [   -  person Adam    schedule 11.02.2011
comment
@ Адам, я думаю, я понимаю, чего ты пытаешься достичь. лично я бы использовал php для получения информации о поставщике и классе, а после обратного вызова ajax создал текстовое поле и элементы меток, ввел бы в них полученные данные для поставщика и класса и ввел бы их в DOM. все это будет сделано на стороне клиента после document.getElementById("divResults").innerHTML=xmlhttp.responseText;.   -  person KJYe.Name 葉家仁    schedule 11.02.2011
comment
пытаясь прочитать и понять, что такое манипуляция/инъекция DOM и как это делается. но, используя то, что вы сказали, я думаю, что смогу заставить это работать... я также думаю, что, возможно, я мог бы создать раскрывающиеся списки, но просто отображать div: none... как только я получу данные для раскрывающихся списков/выберите элементы, заполните их с возвращенными данными и сделать div видимым. Однако один вопрос: это innerHTML=xmlhttp.responseText, когда Ajax перезванивает? или это другая строка кода? Я ценю помощь kjy, большое спасибо!   -  person Adam    schedule 11.02.2011


Ответы (3)


Вот хорошее чтение для понимания того, что вы делаете: 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 в тегах script, которые вы внедрили в 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
    }
}
person KJYe.Name 葉家仁    schedule 11.02.2011
comment
Я понял!!! используя ваш код чуть выше Easy Way, я смог получить результат(); для отображения предупреждения!!!! Мне просто нужно было повторить javascript из php вместо того, чтобы отображать его как html. Спасибо!! я буду работать с этим (и другим комментарием к моему исходному сообщению сверху)!! - person Adam; 11.02.2011
comment
Grats @Adam счастливого JavaScript ;D - person KJYe.Name 葉家仁; 11.02.2011

попробуйте обернуть код 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();
    }
person yent    schedule 11.02.2011
comment
когда я это делаю, я получаю ошибку javascript: «результат» не определен - person Adam; 11.02.2011
comment
аналогично, это не сработает, потому что результат никогда не был eval(); в браузере - person KJYe.Name 葉家仁; 11.02.2011

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

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

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

person David Cooke    schedule 11.02.2011
comment
Я получаю сообщение об ошибке javascript: «результаты» не определены. - - - - - - - Results.php: echo '‹script type=text/javascript›eval(function results() { alert(\'success\'); });‹/script›'; - - - - - - - - - - - - Основной javasript: document.getElementById(divResults).innerHTML=xmlhttp.responseText; если(результаты)результаты(); - person Adam; 11.02.2011
comment
эхо-сообщение по-прежнему не оценивается браузером после обратного вызова ajax - person KJYe.Name 葉家仁; 11.02.2011
comment
Должна ли это быть функция, которая выводится. Можете ли вы просто повторить 'eval(alert(\'success\');)'; - person David Cooke; 11.02.2011
comment
браузер должен оценить JavaScript на стороне клиента. так что даже если вы эхо eval, это просто синтаксис, который браузер еще не оценил - person KJYe.Name 葉家仁; 11.02.2011
comment
Лол, ты прав; Я знал, что имел в виду :P echo 'alert()'; из php. И вызов ajax должен оценивать возвращаемые данные. - person David Cooke; 11.02.2011
comment
@ Дэвид Кук, да. взгляните на мой ответ и покажите мне немного любви, если вы думаете, что это сочтет - person KJYe.Name 葉家仁; 11.02.2011