функция Run Javascript после innerHTML из PHP

Im использование xmlhttp.send() для получения результата запроса, напечатать HTML hierarquical списка (Li анс л тегов) в PHP (jstree_view.php).функция Run Javascript после innerHTML из PHP

После этого я использую document.getElementById("treeviewer").innerHTML = this.responseText;, чтобы ввести результат, полученный от PHP, чтобы показать информацию пользователю.

Я заметил, что Java-функция не работает, чтобы показать jstree после того, как код введен, кроме того, функция jstree запускается до выполнения innerHTML

Вопрос заключается в том, как можно решить эту проблему? Может быть, я неправильно звоню в javascript, каков правильный способ вызова функции? Я протестировал создание элемента сценария с функцией javascript (функция предупреждения работает отлично), также я использовал eval(), как некоторые ответы, предлагаемые с хорошими результатами.

jstree_charge.js

function jstree_charge(tech) { 
var index_project_database= document.getElementById("project_select").selectedIndex; 
var project_database= document.getElementById("project_select").options[index_project_database].value; 

if (tech == "") { 
    document.getElementById("treeviewer").innerHTML = ""; 
    return; 
} else { 
    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 (this.readyState == 4 && this.status == 200) { 
      document.getElementById("treeviewer").innerHTML = this.responseText; 
      } 
    }; 

    xmlhttp.open("GET","../php/jstree_charge.php?tech=" + tech + "&project=" + project_database, true); 
    xmlhttp.send();  
} }

результат jstree_charge.php Это результат, который впрыскивается в innnerHTML jstree_charge.js

<div name="treeviewer" id="treeviewer"> 
    <ul> 
     <li>RNC5 
      <ul> 
       <li>00AB2_U 
        <ul> 
         <li>P00AB2A</li> 
         <li>P00AB2B</li> 
         <li>P00AB2C</li> 
         <li>P00AB2D</li> 
         <li>P00AB2E</li> 
        </ul> 
       </li> 
       <li>00ABC 
        <ul> 
         <li>U00ABCA</li> 
         <li>U00ABCB</li> 
         <li>U00ABCC</li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div>

jstree_charge.js

$(document).ready(function(){ 
    $("#treeviewer").jstree({ 

     "checkbox" : { 
     "keep_selected_style" : false 
     }, 
     "plugins" : [ "checkbox" ] 
    }); 
});

Спасибо!

источник

2017-02-15 Beaver

две очевидные проблемы: 1) вы вставляете второй элемент с идентификатором «treeviewer» внутри существующего элемента с идентификатором «treeviewer». Идентификаторы должны быть уникальными. 2) Предполагая, что функция js, на которую вы ссылаетесь, является той, что находится в jstree_charge.js, эта функция запускается только один раз, когда страница загружается (это то, что делает обертка document.ready() вокруг нее). Вам нужно будет запустить функцию jstree снова после того, как вы загрузите новый контент, иначе он не знает о новом контенте. – ADyson

Вы правы! 1.-line: document.getElementById ("treeviewer"). InnerHTML = this.responseText; определить место, где оно будет введено, поэтому Im ссылается на тег id. поэтому код вводится правильно в указанном теге. 2.- Сценарий запускается после загрузки страницы, и именно поэтому он не заряжает файл js. Как я запускаю функцию jstree после загрузки содержимого? – Beaver

Вы должны сделать две вещи:

1) Ваша функция jsTree нужно снова запустить после того, как ваши данные загружаются AJAX:

xmlhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     document.getElementById("treeviewer").innerHTML = this.responseText; 
     $("#treeviewer").jstree({ 
      "checkbox" : { 
       "keep_selected_style" : false 
      }, 
      "plugins" : [ "checkbox" ] 
     }); 
    } 
};

2) Вам нужно немного изменить свой ответ. Вы сказали, что ответ включает в себя:

<div name="treeviewer" id="treeviewer">...</div>

Однако, у вас уже есть этот элемент в вашей странице - это где вы инъекционные новый текст ответа. Функция «innerHTML» заменяет содержимое внутри целевого элемента, а не самого элемента. Таким образом, вы будете в конечном итоге с компоновкой, как это:

<div name="treeviewer" id="treeviewer"> 
    <div name="treeviewer" id="treeviewer"> 
    <ul>...etc</ul> 
    </div> 
</div>

Это недопустимый HTML - вы не можете иметь несколько элементов с одинаковыми ID. Это может привести к тому, что функция jsTree не будет работать должным образом.

Поэтому вам нужно удалить div treeviewer из ответа, генерируемого jstree_charge.php.

источник

2017-02-16 09:48:22 ADyson

спасибо! оно работает! Проблема решена! – Beaver

Короткий ответ: переместить функцию jsTree для запуска после установки innerHTML так responseText готов:

xmlhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      document.getElementById("treeviewer").innerHTML = this.responseText; 
      $("#treeviewer").jstree({ 
       "checkbox" : { 
        "keep_selected_style" : false 
       }, 
       "plugins" : [ "checkbox" ] 
      }); 
     } 
};

И длинный ответ здесь: How do I return the response from an asynchronous call?

источник

2017-02-15 20:25:35 dNitro

ответ

Смежные вопросы