plugin ValidationEngine sur une div rechargée par Ajax
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 ) :
http://dev.web.site.voila.fr/validationEngine/a.jpg
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 :
http://dev.web.site.voila.fr/validationEngine/b.jpg
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:
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:
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:
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:
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:
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;
}; |
Code:
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);
} |
En bref je ne comprends pas trop pourquoi cela ne fonctionne pas tout en ayant essayé différentes méthodes :
- 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
