Bonjour à tous et à toutes .
Je suis débutant en programmation web et j'ai un petit souci que je n'arrive pas à résoudre seul. J'ai parcouru, avant de faire ce message pas mal de forums, tutoriels, etc mais je n'aie pas de solution .
Je veux utiliser un formulaire de validation de login en utilisant JQuery et validationEngine. Jusque là cela fonctionne ( la validation de formulaire par validationEngine s'exécute bien aux infobulles grises transparentes ) :
petit test ici
Mais je voudrais recharger le contenu d'une div avec ajax et que cette div rechargée contienne la validation de formulaire.
La div est bien chargée par ajax ( avec JQuery, prototype ou ajax tout court, différentes méthodes essayées ) mais la validation de formulaire ne s'exécute pas :
Je suis sous Firefox 3.6.3, utilise JQuery v1.3, aie essayé avec prototype 1.5.0, validationEngine, serveur web wampserver
Côté fichiers j'ai un :
- index.html qui charge un fichier b.php
- b.php qui affiche une div et qui à l'action de clic charge une fonction javascript
- remplaceContenuDiv qui pour une div passée en paramètres charge via ajax l'url passée aussi en paramètres :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13 <html> <head> <script src="prototype-1.5.0-compressed.js" type="text/javascript"></script> <link rel="stylesheet" href="template.css" type="text/css" media="screen" title="no title" charset="utf-8" /> <script src="jquery.js" type="text/javascript"></script> <script src="c.js" type="text/javascript"></script> </head> <body <div id="contenu"> <a onclick="remplaceContenuDiv('contenu', 'a.html')">cliquer ici !</a> </div> </body> </html>- c.js qui fait par ajax le remplacement de la div, avec les différentes méthodes essayées :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13 function remplaceContenuDiv(division, grille) { jQuery.noConflict(); // pour eviter les conflits avec $ , $ ~ JQuery // methode 0 ne marche pas prototype.js new Ajax.Updater ( $(division), grille, { evalScripts:true } ); // xhr_object.setRequestHeader("Cache-Control","no-cache");
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 // methode 1 ne marche pas jQuery('#'+division).load ( grille, function() { alert('page chargee'); // tests pour lancer validationengine en manuel mais non réussi //JQuery('#formID').validationEngineLanguage.newLang(); //JQuery(document).ready(function(){JQuery.validationEngineLanguage.newLang()}); //JQuery.validationEngineLanguage.newLang(); alert('apres lancement validationengine'); } );
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 // methode 2 ne marche pas jQuery("#" + division).empty(); //on vide la div dont l'id est contenu jQuery.ajax( //appel ajax { url: grille, //contient une liste voir plus haut async: true, type: 'POST', global: false, dataType: 'html', // html pour que les js recuperes soient executes cache: false, success: function(html) //action à réaliser en cas de succès { jQuery("#" + division).append(html) ; alert('load ok'); var global = this; eval(global); $(document).ready(); } }); alert('a');
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 // methode 3 ne marche pas var http = createXHR(); http.open("POST", grille , true); http.onreadystatechange = function() { if ((http.readyState == 4) && (http.status==200)) { $(division).innerHTML = http.responseText; //setInnerHTML($(division), http.responseText); var global = this; eval(global); } } http.send(); return 0; };En bref je ne comprends pas trop pourquoi cela ne fonctionne pas tout en ayant essayé différentes méthodes :
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
27
28
29
30
31
32
33
34 // pour methode 3 function createXHR() { var request = false; try { request = new ActiveXObject('Msxml2.XMLHTTP'); // IE } //try 1 catch (err2) { try { request = new ActiveXObject('Microsoft.XMLHTTP');//IE } //try 2 catch (err3) { try { request = new XMLHttpRequest(); // Mozilla 1 }// try 3 catch (err1) { request = false; } } } return request; } // pour methode 3 function $$(idElement) { return document.getElementById (idElement); }
- new Ajax.Updater avec evalScripts:true
- load de jquery
- jQuery.ajax avec dataType: 'html'
- en essayant d'évaluer le innerHtml retourné (var global = this; eval(global)
Ci joint les sources que j'utilise.
Merci de votre aide, b.louh
Partager