plugin ValidationEngine sur une div rechargée par Ajax

**b.louh** · 08/05/2010, 17h34

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;	
 
 };

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);
}