[AJAX] innerHTML, setInnerHTML, ... problème! Fermé

Question

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).

[b]Fonction JS exécutée lors de la validation :[/b]
[code] 
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 ...'); }
          }
[/code]

[b]Contenu du fichier 'insert.php' : [/b]
[code]
<?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"; }
?>
[/code]
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[/code]
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...

burnedsyn · Answer

Bonjour,

Je peux t'aider mais en changeant un peu le mode sur lequel tu es parti,

En fait, bien que je comprenne ce que tu veux faire, je pense que tu manque un peu ta cible dans le sens ou tu veux utiliser ajax pour transferer le moins possible de données, hors a chaque appel tu renvois le tableau complet...
il serait plus judicieux de ne renvoyer que la ligne que tu as effectivement ajoutée a la bd.

Donc en exemple la table suivante :

$caddie="<span class='shop_header'>$shop_cad $cid</span>";
$caddie.="<form id='cad_form' >";
$caddie.="<table class='shop_tbl' id='cadtbl' border='2'><tbody id='bodytiti'>";
$caddie.="<tr><th>name</th><th>quant</th><th>pu</th><th>pt</th><th>del</th></tr>";
$caddie.="</tbody></table></form>";

Ceci est une table représentant un caddi
remarque que la table a un element TBODY et que celui ci a une id => bodytiti (important sinon ca va pas).

ceci serait le code hypotéthique qui ajoute une ligne au caddi et renvois l'item selectionné :

$query="select * from shop_product where id=$itemid";
$res=mysql_query($query);
$t=mysql_fetch_object($res);
/*ici en dessous on encode les données de l'item en json...afin de l'envoyer au script ajax.*/
echo json_encode($t)

Voici le js qui appelle la page php au traver d'ajax :

function addtocart(obj)
{

Quant=document.getElementById(obj);

var xhr1=getXhr();

xhr1.onreadystatechange = function()
{
if(xhr1.readyState == 4 && xhr1.status == 200)
{
//on récupère la reponse json et on l'interprète

var json = xhr1.responseText.evalJSON(true);

//ici on recupère l'element table.

test=document.getElementById('cadtbl');
//on insere une nouvelle ligne dans la table

var newRow = test.insertRow(-1);
newRow.id='cadtblrowdel_'+json.id;
//on attribue une id a cette ligne ^^

//a partir d'ici on ajoute manuellement les cellules a la ligne remarque que certaine ont une id
var newCell = newRow.insertCell(0);
newCell.innerHTML = json.item_name;
var newCell = newRow.insertCell(1);
newCell.innerHTML = Quant.value;
newCell.id='itemquant'+json.id;

var newCell = newRow.insertCell(2);
newCell.innerHTML = json.item_price+'€';
var newCell = newRow.insertCell(3);
newCell.innerHTML = json.item_price*Quant.value+'€';
newCell.id='totprice'+json.id;
var newCell = newRow.insertCell(4);
json.it='itemquant'+json.id;
json.toto='totprice'+json.id;
//ici en dessous on prépare une cellule spécial elle nous sers a supprimer une ligne du tableau et de notre caddi //evidement...
json.del='<a id="del_'+json.id+'" onclick="if (window.confirm(\'Vous etes sur de ne pas faire une betise ?\')){delcadrow(this);return false;} else {return false;}">';
newCell.innerHTML = json.del+'<img id="del_'+json.id+'" src="./img/del.jpg"></a>';

}
}//Onreadystatechange

xhr1.open("POST","addCartItem.php",true);

xhr1.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr1.send("id="+obj+"&quant="+Quant.value);
}

</code>

Voici la fonction pour enlever une ligne dynamiquement :


function delcadrow(obj)
{
//alert(obj.id);
 toclean='cadtblrow'+obj.id;
 //alert(toclean);
 test=document.getElementById(toclean);
 titi=test.childNodes;
 for(i=0;i<titi.length;i++)
 {

 test.removeChild(titi[i]);

 }
 t=test.parentNode;
 t.removeChild(test)

}

Voila j'espère que cela t'aidera :d
Tim

'; } }//Onreadystatechange xhr1.open("POST","addCartItem.php",true); xhr1.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr1.send("id="+obj+"&quant="+Quant.value); } Voici la fonction pour enlever une ligne dynamiquement : function delcadrow(obj) { //alert(obj.id); toclean='cadtblrow'+obj.id; //alert(toclean); test=document.getElementById(toclean); titi=test.childNodes; for(i=0;i

Christophe7502 · Answer

Moi aussi j'ai un problème équivalent.

Avec Firefox tout marche bien mais sous IE la fonction suivante ne marche qu'une fois.

function mafonctionl(){
	$.ajax({
        url: "cgi-bin/fichier.pl",
		success: function(data){
			modification de données
        }
    });
}

En fait a chaque fois que j'appel cette fonction la valeur de data est toujours la même, comme si il ne relancait pas la fonction et qu'il réulisait la data préalablement sauvegarder.
Merci à ceux qui pourront m'aider.

burnedsyn · Answer

que renvois ton script cgi-bin/fichier.pl",  car c'est au retour de son appel que tu utilise data (qui semble etre la reponse du script)

vois de ce coté la et dis moi quoi

burnedsyn · Answer

alors tu as un soucis au niveau du traitement des données recue dans le onsuccess
mais tu ne donne pas le code je ne sais donc pas t'aider plus 
tim met le code que tu fais lorsque tu recois la reponse 

merci

burnedsyn · Answer

voila pourquoi tu commence pas par dire ca 
tu as un probleme au niveau de la declaration de l'objet XhttpRequest sans doute peux tu me montrer ton code ou tu cree l'objet ajax ?

christophe7502 · Answer

Ca marche nikel, merci bien ;).

[AJAX] innerHTML, setInnerHTML, ... problème!

6 réponses

Discussions similaires