Run Javascript-Funktion nach innerHTML- von PHP

Question

Im ein xmlhttp.send() mit einem Abfrageergebnis zu erhalten, die eine HTML hierarquical Liste (li am lu-Tags) in PHP (jstree_view.php) drucken.

Danach verwende ich document.getElementById("treeviewer").innerHTML = this.responseText;, um das erhaltene Ergebnis von PHP zu injizieren, um dem Benutzer die Informationen anzuzeigen.

Ich bemerkte, dass eine JavaScript-Funktion nicht jstree zeigen funktioniert, nachdem der Code injiziert wird, außerdem die jstree Funktion vor innerHTML-

Die Frage ist, läuft ausführen, wie man das Problem lösen kann? Vielleicht rufe ich das Javascript nicht richtig auf, was ist der richtige Weg, die Funktion aufzurufen? Ich habe getestet, ein Skript-Element mit der Javascript-Funktion (Warnfunktion funktioniert gut), auch ich eval() als einige Antworten mit guten Ergebnissen empfohlen.

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

Ergebnis jstree_charge.php Dies ist das Ergebnis, das durch innnerHTML in 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

injiziert wird,

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

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

Danke!

Answer 1

Sie müssen zwei Dinge tun:

1) Ihre jsTree Funktion muss erneut ausgeführt werden, nachdem die Daten von ajax geladen wird:

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) Sie müssen Ihre Antwort etwas ändern. Sie haben gesagt, die Antwort enthält:

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

jedoch bereits dieses Element auf Ihrer Seite haben - es ist, wo Sie die neue Antworttext injizieren. Die Funktion "innerHTML" ersetzt den Inhalt des Zielelements, nicht das Element selbst. Deshalb werden Sie mit einem Layout am Ende wie folgt:

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

Dies ist ungültig HTML - Sie können nicht mehrere Elemente mit der gleichen ID haben. Dies könnte dazu führen, dass die jsTree-Funktion nicht wie erwartet funktioniert.

Sie müssen also das "treeviewer" div aus der Antwort entfernen, die von jstree_charge.php generiert wurde.

Answer 2

Die kurze Antwort ist: Ihre jsTree Funktion bewegen, nachdem laufen innerHTML Einstellung so die responseText ist fertig:

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" ] 
      }); 
     } 
}; 

Und die lange Antwort ist hier: How do I return the response from an asynchronous call?