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

[Bovino]

Désolé, mais là non, pas vraiment d'idée...
Je suppose que tu as bien précisé :

Code :

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

jQueryVarNoConflict = jQuery.noConflict();

et que & correspond à l'encodage de la page qui appelle la fonction Ajax...

Peut-être aurais-tu un lien vers une page de test pour voir si l'erreur n'est pas ailleurs...

[Invité]

Oui, j'utilise Jquery et MooTools et j'ai eu des souci de compatibilité..
Sinon, je développe en local, j'ai n'ai donc malheureusement pas d'exemple précis à montrer.

Je suis coincé ...
Merci quand même Bovino!

[Bovino]

la fonction Ajax ne fonctionne pas : ma table ne se met pas à jour..

Je trouve que tu vas un peu vite...
Est-ce que tu as Firebug ? Si oui, peux-tu vérifier quand la requête est exécutée dans l'onglet 'Net' puis 'XHR' les valeurs de 'Params' et 'Response' ?
Ca pourra donner des indications précieuses...

[Bovino]

Juste un doute qui m'assaille...
Tu développe en local ??? Tu as quel serveur installé sur ton poste ?

Private : et là, je permettrais pas à SpaceFrog de me dire qu'il n'y a pas besoin de couche serveur en local pour faire une requête http de surcroit vers un fichier php !!!

[Invité]

Après 5 jours passés uniquement passés sur ce problème, je sais pas si on peut dire que je vais 'un peu vite' !!

Sinon j'ai installer en local easyphp, je ne me suis pas préoccupé des réglages sachant que je ne connais pas encore les spécificités du serveur (pas très pro comme solution hein, mais l'administration vous savez... têtue comme des mules!)
Bref...

[Bovino]

J'essaye de reprendre le cour, parce que j'ai l'impression qu'on s'est un peu éloignés du problème de départ :
Ce qui ne fonctionne pas, c'est la mise à jour de ta page (ce que tu indiquais au début), ou l'insertion dans la BDD.

Est-ce que tu as Firebug ? Si oui, peux-tu vérifier quand la requête est exécutée dans l'onglet 'Net' puis 'XHR' les valeurs de 'Params' et 'Response' ?
Ca pourra donner des indications précieuses...

Firebug peut te permettre de savoir ce qui est envoyé comme requête (en particulier les paramètres...) et ce qui est renvoyé.
A partir de là, ça permet de mieux cerner l'origine de l'erreur.

Après 5 jours passés uniquement passés sur ce problème, je sais pas si on peut dire que je vais 'un peu vite' !!

Je sais que c'est hyper gonflant de sécher comme ça sur un problème (dont la solution est probablement simple en plus), mais ce que je voulais dire, c'est que si ta base ne se met pas à jour, c'est pas obligatoirement à cause de la fonction Ajax, mais peut être de la création des paramètres, de leur traitement en php ou de l'insertion mysql...

[DoubleU]

1/ Fais voir comment tu crées ton tableau et comment tu appelles tes fonctions qui gèrent le tri.

2/ Est-ce que ca ne serait pas plus simple, plutot que de recharger tout ton tableau depuis php, de juste retourner les lignes en plus et d'ajouter ces lignes dans ton tableau? Ainsi, tu ne recharges jamais le tableau et puisqu'il fonctionne initialement, il fonctionnera apres chaque ajout...

[Invité]

Je vais essayer de récapituler ici le plus précisément possible, n'hésite pas à me dire s'il manque des informations (ou si c'est pas clair):

J'ai une page web, basé sur le principe du 'slide'.
Chaque slide possède un contenu, ce contenu est inséré dans des conteneurs SPAN. Un plugin jQuery permet d'afficher un slide à la fois et donne des effets de transition lorsque l'on passe d'un slide à un autre. Cela se présente donc ainsi :

Code :

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

1
2
3
4
5
6
7
<span id='reload_1'>
     <?php require_once 'slide1.php' ?>
</span>
<span>
     <?php require_once 'slide2.php' ?>
</span>
etc...

Lorsque j'arrive pour la première fois sur le site, je suis sur le SLIDE 1 (appelons le comme ça). Ce slide contient uniquement une table, contenant des données récupérées à partir d'une BD. 2 plugins jQuery permettent d'effectuer 'en temps réel' le tri de cette table et l'affichage d'infobulles.

Passons au SLIDE2 : celui-ci contient un formulaire d'ajout de données dans la BD. Mon objectif est que lorsque l'utilisateur clique sur le bouton de validation, une insertion des données en BD est faite, la page glisse sur le SLIDE1, qui va à présent contenir les nouvelles valeurs (que l'on vient juste de saisir).


Lorsque je clique sur le bouton valider, j'utilise AJAX; AJAX appelle une page ('insert.php' qui se charge de faire l'insertion en BD). A la fin de l'insertion, 'insert.php' appelle 'slide1.php' (qui s'occupe de construire la table avec les données de la BD, donc prise en compte des nouvelles valeurs puisque insertion faite précédement). A l'issu du traitement, je récupère le résultat grâce à 'httpRequest.responseText' puis j'applique à la page avec 'innerHTML'. La table s'inscris dans la page, les nouvelles données sont présentes, tout est OK Hormis le fait que les deux plugins javascript de tri de tables et d'affichage d'infobulles ne sont plus fonctionnelles après le rechargement du SLIDE1 par AJAX.

Voici mes deux plugins jQuery qui permettent le tri de table et l'affichage d'infobulles :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
window.addEvent('domready',function(){
     jQueryVarNoConflict(function() {
     jQueryVarNoConflict("table")
          .tablesorter({cssHeader: "sortHeader", cssAsc: "sortedASC", cssDesc: "sortedDESC"})
          .tablesorterPager({container: jQueryVarNoConflict("#pager"), size: 12});
     });
});
 
jQueryVarNoConflict(function(){
     jQueryVarNoConflict("a.clic").simpletooltip({click: true, effect: "slideDown", hideDelay: 0.4});
});

Création de la table (les fonctions de tri sont gérés lorsque l'on clique sur un titre de colonne par le gestionnaire d'événements. Idem pour les infobulles, le gestionnaire d'évenements n'inscris pas le DIV à la suite du tableau, mais uniquement lorsque l'on clique sur un élémént du tableau) :

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
26
 
<table id="tableR" cellpadding="0" cellpadding="0">
<thead>
    <th axis='string'>ID</th> 
    <th axis='string'>LIBELLE</th>
    <th axis='string'>DESCRIPTION</th>
    <th axis='string'>TYPE</th>
</thead>
<tbody><?php
while($a = mysql_fetch_array($result)) {
    print "<tr id='trid_".$a['ID']."' height='".($css_global_height)."'>";
    print "<td><a href='#tooltip' class='clic'>".$a['ID']."</a></td>";
    print "<td nowrap><div style='overflow:hidden;'><a href='#tooltip' class='clic'>".$libelle."</div></a></td>";
    print "<td nowrap><div style='overflow:hidden;'><a href='#tooltip' class='clic'>".$description"</div></a></td>";
   print "<td class='centerAlign'><a href='#tooltip' class='clic'>".$a['TYPE']."</a></td>";
                }
?></tbody>
</table>
 
<div id="tooltip" class="Tip"><ul>
    <li class="top"></li>
    <li><a href="#" onClick="slide1.walk(2);" rel="close">Modifier</a></li>
    <li><a href="#" onClick="slide1.walk(0);" rel="close">Supprimer</a></li>
    <li><a href="#" onClick="slide1.walk(3);" rel="close">Param</a></li>
    <li class="bottom"></li>
</ul></div>

Merci pour ton aide Bovino, EDIT: et DoubleU

@DoubleU : J'ai essayé d'insérer qu'une seule ligne, mais le problème reviens au même, les fonctions de tri ne fonctionnent plus puisque le contenu de la table n'est plus le même et que la fonction de tri n'a pas été 'rechargé' pour prendre en compte les nouvelles valeurs...

[DoubleU]

A priori, je dirais que c'est normal:

1/ Tu crées ta page initialement, et tu affectes sur ondomready l'evenement qui va rendre tes colonnes triables

2/ Apres validation de ton formulaire, tu remplaces ton tableau par un nouveau.
Le problème, c'est que c'est l'ancien tableau qui était triable, et la tu ne rends pas le nouveau triable.

Donc il te faut rappeler la fonction qui tu lançais sur ondomready apres le chargement de ta div via ajax.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
httpRequest.open('POST', 'insert.php', false);
     httpRequest.onreadystatechange = function() {
          if (httpRequest.readyState == 4) {
               if (httpRequest.status == 200) {
setInnerHTML(document.getElementById('reload_div'), httpRequest.responseText);
jQueryVarNoConflict(function() {
     jQueryVarNoConflict("table")
          .tablesorter({cssHeader: "sortHeader", cssAsc: "sortedASC", cssDesc: "sortedDESC"})
          .tablesorterPager({container: jQueryVarNoConflict("#pager"), size: 12});
     });
               } else { alert('Un problème est ...'); }
          }

Ceci étant, vu que tu n'utilises pas les méthodes du dom pour faire ton ajout, mais innerHTML, pas sur que jquery fonctionne bien sur ces éléments la...

[Invité]

Moi je veux bien utiliser du DOM
En fait j'ai essayer mais j'ai abandonner pacque c'est beaucoup trop complexe et que j'ai des délais à respecter, et comme j'ai déjà pris ÉNORMÉMENT de retard je peux pas m'y plonger dedans..

J'ai essayer le bout de code que tu donnes, mais ça aurait été trop facile ...

[DoubleU]

Essaie avec innerHTML, si ca se trouve ca va marcher.

[Invité]

J'ai tout essayé ... snif!

Le problème reste bien au niveau du gestionnaire d'événements : il faut que j'arrive à 'réinitialiser' les fonctions de tri de tables et infobulles. Mais comme elles utilisent le framwork jQuery, je ne sais pas comment faire...
Si quelqu'un à une solution, je dis oui

[Bovino]

Code :

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

1
2
3
4
5
6
7
window.addEvent('domready',function(){
     jQueryVarNoConflict(function() {
     jQueryVarNoConflict("table")
          .tablesorter({cssHeader: "sortHeader", cssAsc: "sortedASC", cssDesc: "sortedDESC"})
          .tablesorterPager({container: jQueryVarNoConflict("#pager"), size: 12});
     });
});

Là je comprends pas trop ce que tu fais...
La principale fonction de jQuery est la sélection simplifiée des éléments. Pour cela, il utilise par défaut le raccourci $().
Mais comme $() est déjà utilisé par d'autres frameworks, jQuery (qui est bien gentil) offre la possibilité de remplacer ce sélecteur universel par un autre en précisant après l'avoir chargé : jQuery.noConflict().
En langage courant, jQuery.noConflict() veut dire : attention, désormais, quand tu verras un $, il ne faut plus l'interpréter comme le sélecteur jQuery.
Du coup, le $ de jQuery devient par défaut : jQuery() !!!
Mais jQuery est vraiment très gentil et te laisse en plus la possibilité d'affecter n'importe quel nom à la place de ce jQuery(). C'est ce que j'imagine que tu as fait avec jQueryVarNoConflict()...

Du coup, pour revenir à nos moutons et à ce que je ne comprends pas :
jQueryVarNoConflict(function() {});
ça te crées un objet jQuery... qui du coup me semble bien complexe et plutôt inapproprié... d'où peut-être les comportements inattendus de ta fonction...

[DoubleU]

Je connais pas du tout jquery, donc j'ai juste recopié ce que t'avais mis plus haut. Si c'est pas correct, c'est normal ^^

L'idée c'était d'appeler juste apres ton setInnerHTML la même fonction que tu lançais sur ton ondomready (ce que j'ai donc recopié), de façon a réaffecter tous tes evenements qui rendent ton tableau triable. A toi d'adapter le code pour pouvoir le lancer de cette facon.