[AJAX] Rechargement d'une div et rechargement de javascript

**_Rg12_** · 22/06/2009, 13h32

Bonjour

Tout d'abord je vous expose mon problème :

J'ai une application (ASP.NET) qui me génère une page contenant un tableau. Ce tableau est partiellement mis en forme par du javascript (pagination, fonctions de tri). Les deux scripts javascript sont disponibles ici : tri de tableau, pagination.
Ces scripts fonctionnent parfaitement sur mon appli.

Par ailleurs, sur ma page, j'ai une liste déroulante qui comporte le nombre de résultats à afficher. Ainsi, je veux pouvoir modifier la pagination et le nombre de résultats à afficher dans mon tableau avec un rechargement uniquement du tableau. Pour cela, je récupère le nombre de résultats à afficher et je modifie les attributs de mon tableau (le nombre d'éléments à afficher est passé en argument dans la classe css du tableau).
Cela fonctionne également très bien après inspection du DOM.

Dernière étape : le rechargement du tableau avec la nouvelle valeur du nombre d'éléments de mon tableau.
Pour ça, j'utilise de l'Ajax :

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
function envoieRequete(url, id) {
    var xhr_object = null;
    var position = id;
    //window.alert(position);
    if (window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
    else
        if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
 
 
    xhr_object.open('POST', url, true);
    xhr_object.onreadystatechange = function() {
        if (xhr_object.readyState == 4) {
            var position_debut_open = xhr_object.responseText.indexOf('<table class="tableDonnees ', 0);
            var position_fin_open = xhr_object.responseText.indexOf('>', position_debut_open);
            position_fin_open++;
            var position_close = xhr_object.responseText.indexOf('</table>', position_fin_open);
            var tableau = xhr_object.responseText.substring(position_fin_open, position_close);
            document.getElementById(position).innerHTML = tableau;
        }
    }
    xhr_object.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr_object.send(null);
 
}

Comme vous le voyez, je récupère uniquement le contenu du tableau pour le réinsérer avec la directive innerHTML.

Le problème est le suivant :
Lorsque je change le nombre de lignes de mon tableau à afficher de telle sorte que toutes les lignes sont affichées, le fait de sélectionner un nombre plus petit d'éléments ne me modifie pas la pagination.
Par ailleurs, si par défaut j'affiche 1 élément et que je choisis d'en afficher 2, il m'affiche tous les éléments et non 2.

Faut-il indiquer au navigateur de réexécuter les javascripts après la réécriture de la page pour que la pagination s'applique correctement ?
Si oui, comment faut-il procéder ? Si non, comment puis-je résoudre ce problème ?

D'avance merci

**Bovino** · 24/06/2009, 10h09

Salut,
Tu as un début d'explication dans la FAQ

**_Rg12_** · 24/06/2009, 10h18

Bonjour,

Tout d'abord merci pour votre réponse

En fait mon problème n'est pas tout à fait le même que celui évoqué dans la FAQ. La FAQ mentionne le fait que les évènements disparaissent. Or le problème que je rencontre c'est le fait que le javascript inclus en début de code ne se réapplique pas à la portion de code mise à jour avec AJAX. Ce javascript parse en fait la page et modifier les attributs d'une balise.

Il faudrait donc que je puisse ré-exécuter ce javascript inclus en début de page pour qu'il se ré-applique à ma balise modifiée par AJAX.

**E.Bzz** · 24/06/2009, 10h32

Envoyé par _Rg12_

Il faudrait donc que je puisse ré-exécuter ce javascript inclus en début de page pour qu'il se ré-applique à ma balise modifiée par AJAX.

Ça serait plutôt celui-là, alors ...

A+

**_Rg12_** · 24/06/2009, 15h10

L'exemple concerne des scripts directement inclus dans le contenu retourné par AJAX. Dans mon cas, les scripts sont présents dans les balises <head> et ce n'est pas cette partie là qui est touchée par AJAX.
Est-ce que l'utilisation de eval() marche également dans ce cas ? Je viens d'essayer et il me semble que non.

Pour récapituler, j'ai fait un rapide schéma de la situation :

**E.Bzz** · 24/06/2009, 15h14

Envoyé par _Rg12_

L'exemple concerne des scripts directement inclus dans le contenu retourné par AJAX. Dans mon cas, les scripts sont présents dans les balises <head> et ce n'est pas cette partie là qui est touchée par AJAX.

Exact !
Mais si tu regardes le script, tu verras qu'en allant chercher les tiens dans le <head> au lieu de idDuDivDInsertion, tu pourras les ré-évaluer.
C'est ce que tu cherches à faire, non ?

A+