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

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

**danielhagnoul** · 09/05/2010, 11h12

Bonjour.

live(), Voir : http://www.developpez.net/forums/d83...s/#post4805186

**b.louh** · 09/05/2010, 17h46

Merci bien pour la mise en forme, pour cette réponse, je vais chercher dans cette voie .

b.louh

**rib** · 11/05/2010, 05h16

bonjours, je ne voit pas bien se que tu veut faire.
j'utilise aussi ce plugin de differente facon, utilise tu la fonction ajaxsubmit ou tu te sert tu que des validation avant le submit?
si tu utilise la fonction ajaxsubmit du plug il ne te reste qua coder ta fonction onsucces.
regarde mes script si sa peut t'aider sur :https://www.assassinphonic.fr/test mes module de connection et d'inscription fonctionne avec.
si tu veut les fichier php appeller en ajax avec ce plug je pourais te les poster.
en esperant ke sa puisse t'aider.

plugin ValidationEngine sur une div rechargée par Ajax

jQuery

Discussions similaires

Partager

Partager