Discussion :

[Invité]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

 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...

[Bovino]

Tout d'abord, une question qui n'a rien à voir, mais si tu utilises jQuery, pourquoi tu ne t'en sers pas pour faire une requête Ajax ???

Sinon, pour ton problème (et tu vas voir, c'est quand même lié), lorsque tu mets à jour ta page en insérant affich_table.php, les scripts ne sont pas exécutés (surtout en exploitant le responseText !) il me semble, donc plus de tri, plus d'infobulle...

Enfin, une requête Ajax avec jQuery évalue lui automatiquement les scripts par défaut...

[Bovino]

Pour info, ta fonction jQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$.post({
url: 'insert.php',
datatype: 'html',      même pas nécessaire, mais pour rassurer !
success: function(reponsehtml){
    $("#reload_div").html(reponsehtml);
  }
});

Et c'est tout...

[DoubleU]

Tu utilises la fonction setInnerHTML de Fremy?

Si oui, regarde ici

Est-ce que tu peux être sur que dans tout le framework jQuery, il n'y a pas une fonction écrite comme il ne faut pas? ^^

[Invité]

Bovino >> Tout d'abord, une question qui n'a rien à voir, mais si tu utilises jQuery, pourquoi tu ne t'en sers pas pour faire une requête Ajax ???

Si j'avais su .... !!! En effet, avec responseText, le contenu JS n'est pas pris en compte, donc pas d'infobulles ni de tri de table après le premier rechargement.
Je vais donc essayer avec JQuery pour faire de l'AJAX, quand tout fonctionnera j'essayerais de comprendre!

DoubleU >> Tu utilises la fonction setInnerHTML de Fremy?
En effet !! je pensais que c'était la solution miracle, mais ça ne marche pas (même après la pirouette de la définition des fonctions).


Merci à vous 2! Je teste...

[Invité]

Je suis désolé Bovino, mais la fonction Ajax ne fonctionne pas : ma table ne se met pas à jour..
J'ai essayé ton code et ça également :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
jQueryVarNoConflict.ajax({
     type: "POST",
     url: "insert.php",
     data: "lib_r=" + param1 + "&desc=" + type,
     success: function(reponsehtml){
        jQueryVarNoConflict("#reload_div").html(reponsehtml);
     }
});

Une idée ??

[Invité]

Bonjour tout le monde.

Finalement, j'ai réussi ce que je voulais faire (total temps passé : 43heures !!! , très fâché).. Je précise que je n'ai pas pu mettre en œuvre la solution recherchée en début de post.
J'explique ma "solution" : j'ai utilisé les diverses fonctions du plugin pour refaire tout le cheminement exécuté lors de l'initialisation de l'objet. Ce plugin est basé sur un cache (initialisé lors de la phase de construction de l'objet).

J'ai définis un évenement clic sur un bouton. Lors du clic sur ce bouton, une ligne est ajoutée au tableau HTML présent sur le premier slide, puis une fonction récupère la ligne html ajoutée et l'ajoute au cache du plugin (cache total puisque celui-ci est divisé car le tableau possède un affichage par page). Je réutilise ensuite les fonctions pour mettre en forme le cache sur le slide1.
Voilà, je pense pas que ça serve à grand chose (d'ôu les guillemts à solution), mais bon, sait-on jamais....

Sinon, personne n'a d'idées pour le problème lors de la phase d'initialisation (constructeur) entre IE et Firefox??
Merci à tous !

EDIT : Merci pour ta proposition Bovino.

[Invité]

Pour le problème du constructeur, il semblerait que ce soit une seule partie de mon code qui ne fonctionne pas, et plus précisément cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var nb_occ = document.forms['formAjout'].elements['libelle_form'].value.length;

'document.all' ne fonctionne pas non plus, ni 'document.getElementById'...
Auriez-vous une idée pourquoi ??

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.forms['formAjout'].elements['libelle_form']

libelle_form est-il unique ?
C'est quoi comme balise ?

[Invité]

libelle_form est unique et correspond à un input type="text"

[Invité]

Bon, plus de réponse, je clos le sujet.

Merci à tous