[AJAX] innerHTML, setInnerHTML
Bonjour à tous!
Après 3 jours de débâcle, je m'en remets à vous.
Comme signifié dans le titre, mon problème concerne le rechargement d'une portion de page contenant du Javascript, grâce à AJAX.
Je m'explique :
J'ai un formulaire d'ajout de chansons (toujours les même projets !!). Lors de la validation de celui-ci, j'utilise XMLHttpRequest qui est censé faire l'insertion en BD et recharger le contenu d'un DIV. Ce DIV contient à l'origine une table, qui comme vous l'aurez compris contient la liste des chansons.
Donc, lorsque je valide le formulaire, je fais appel à une fonction javascript qui s'occupe d'insérer en BD la nouvelle chanson saisie dans le formulaire et de recharger ma table avec les nouvelles valeurs (par un nouveau 'select' en BD).
Fonction JS exécutée lors de la validation :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
if (window.XMLHttpRequest) { // Mozilla, Safari,...
httpRequest = new XMLHttpRequest();
if (httpRequest.overrideMimeType) {
httpRequest.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE
try { httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) {
try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e) {}
}
}
if (!httpRequest) {
alert("Abandon : blablabla...");
return false;
}
httpRequest.open('POST', 'insert.php', false);
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
setInnerHTML(document.getElementById('reload_div'), httpRequest.responseText);
} else { alert('Un problème est ...'); }
} |
Contenu du fichier 'insert.php' :
Code:
1
2
3
4
5
6
7
8
9
10
11
|
<?php header('Content-type: text/html; charset=iso-8859-1');
mysql_connect($host,$user,$password) or die ("Erreur de conn..");
mysql_select_db ($database) or die ("Erreur de co");
$req = "insert into ...";
if ( !mysql_query ($req)) {
echo "Erreur lors de l'insertion de ...;
} else {
require_once "affich_table.php"; }
?> |
Le fichier 'affich_table.php' établit la structure d'un tableau avec les données récupérés en BD.
Le souci, c'est que j'ai deux fonctions JS (dans 'affich_table.php') qui permettent le tri en temps réel de la table et l'affichage d'infobulles. Ces deux fonctions utilisent jQuery.
Quant j'arrive sur la page initialement, le tri et les infobulles marchent correctement. Lorsque je réalise une première insertion et que ma table est rechargée, ces deux fonctions ne fonctionnent plus.
Mon problème revient donc à l'exécution de code JS au travers de la fonction
Code:
httpRequest.responseText
J'ai lu énormément de discussion qui traitent de ce sujet. Malheureusement, j'ai n'ai toujours pas de solutions et je suis à présent complètement perdus.
setInnerHTML devait être la fonction miracle, qui permettait de 'mettre à jour' un div en prenant en compte le code javascript. Mais cela ne fonctionne pas.
J'ai essayé également de recharger uniquement le contenu de la table, placer dans les DIV grâce à 'innerHTML' et ensuite de rapellé directement mes fonctions JS. sans succès...
Quelqu'un peut m'expliquer la fonction append() propre à jQuery, qui semblerait être une solution ?
J'ai besoin d'aide là ...
Help Me Please...
