Discussion :

[Sylvain__A_]

Bonjour à tous,

Je suis en train de coder un formManager au sein d'un framework php maison, et afin de communiquer avec l'utiliseur après la soumission du formulaire et en cas de problème, j'essaye de coder un plugin jQuery pour afficher des toolTip près des champs à erreur du dit formualire.

J'utilise php pour écrire un objet json de ce genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var aTooltip = [{ 'field' : 'form_key', 'error' : 'secret key doesn\'t match' },{ 'field' : 'inputText', 'error' : '<span class="formAlert">Champ obligatoire !</span>' }];

ça marche très bien.

J'ai définit un objet k_Form qui rassemble les fonctions dont j'ai besoin.
Voici la fonction displayToolTip, qui est bien appelé, et récupère bien le message d'erreur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
...
else if( typeof aToolTipToDisplay === "object" )
{
	$.each( aToolTipToDisplay, function(i){
		var sSelector = aToolTipToDisplay[ i ].field;
		$(":input[name='"+sSelector+"']").setToolTip( aToolTipToDisplay[ i ].error, "error", "top.left", false );
	});
}
...

ça marche, dans le sens ou si je met dnas setTooltip alert(message), j'ai bien le message json qui alert.

Voici ma tentative de plugin :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
(function($) {
 
	$.fn.setToolTip = function( sMessage, sClass, aPosition, switchLoadDisplay )
	{  
       	var el = $(this);
 
	$(this).append("<b>Hello</b>");
 
	appendToolTip(el, sMessage, sClass, aPosition );
 
	el.one("load", function()
	{
		showToolTip(el);
		setTimeout( function(){
            	     hideToolTip(el);
                }, 3000);
	});
 
	el.hover(
	     function () {
        	showToolTip(el);
	     }, 
	     function () {
		hideToolTip(el);
	      }
         );
 
        return el;      
    };
 
 
	function appendToolTip( element, sMessage, sClass, aPosition )
	{
		alert( sMessage );
		$(element).append("<div>"+sMessage+"</div>");
		//alert( sMessage );
		//this.append("<div>"+sMessage+"</div>");
		//this.style.backgroundColor = "black";
		for(prop in this)
		{
			console.log(this[prop]);
		} 
	}
 
	function showToolTip()
	{
 
	}
 
	function hideToolTip ()
	{
 
	}
 
})(jQuery);

J'ai essayé pas mal de combinaison, mais je n'arrive pas à afficher quoi que ce soit, dès lors que je selectionne this ou élèment.

Toute idée ou remarque sera la bienvenue, parceque là c'ets le vide, ni erreur dans firebug, ni rien...

[danielhagnoul]

Bonjour.

Il y a un tutoriel : http://khayyam.developpez.com/articl...jquery/plugin/