Bonjour,

J'ai un formulaire classique.

Ma page de traitement ressemble pour l'instant à cela :

<?php
if(isset($_GET['nom']) && isset($_GET['email']) && isset($_GET['coms'])) {
$_GET = array_map('htmlspecialchars', $_GET);

$nom = $_GET['nom'];
$email = $_GET['email'];
$coms = $_GET['coms'];

print_r($_GET);
}
?>

Seulement je voudrais que le résultat s'affiche dans une div au-dessus du formulaire (donc le traitement serait en AJAX).

$(myform).submit(function() {
		var ok = $jform.check();
			if(ok) {
				$.get('mail.php', 
					{
						nom: $('[name="nom"]').val(),
						email: $('[name="email"]').val(),
						coms: $('[name="coms"]').val()
					},
				function(data) {
					$('#resultat').html(data);
				});
			}
		return ok;
	});

Donc au lieu que ce soit ma page mail.php qui m'affiche le résultat j'aimerais qu'il s'affiche dans une div.

Firebug m'indique que le statut de ma page mail.php (XHR) est "Aborted". Pourquoi ?

EDIT :

J'ai aussi essayé ce code, même erreur :

$.ajax({
	url: 'mail.php',
	data: 'nom='+$('[name="nom"]').val()+'&email='+$('[name="email"]').val()+'&coms='+$('[name="coms"]').val(),
	success: 
		function(data) {
			$('#resultat').html(data);
			alert(data);
		}
});

Salut,

Pour commencer, il ne faut pas utiliser $.get pour envoyer un formulaire.
Le $.get est là pour récupérer des infos, pas pour en envoyer.
Il faut donc utilise $.ajax

Ensuite, pour le paramètre "data", plutôt que de mettre un à un les champs, utilise le form.serialize. Ce sera bien plus rapide et au moins, tu seras sûr qu'il enverra les données comme il faut.

Après, on envoie JAMAIS un formulaire en get. TOUJOURS en post. Ca évite de dépasser les limites HTTP du GET (255 caractères), et de passer 3 jours à chercher le bug quand c'est le cas.

Et pour finir, tant que tu es en get, il se passe quoi si tu appelles directement ta page email.php avec les paramètres de ton formulaire ? Faut vérifier s'il n'y a pas des erreurs côté PHP

Il n'y a pas d'erreur côté PHP.

$(myform).submit(function() {
		var ok = $jform.check();
			if(ok) {
				$.ajax({
				type: 'POST',
				url: 'mail.php',
				data: 'nom='+$('[name="nom"]').val()+'&email='+$('[name="email"]').val()+'&coms='+$('[name="coms"]').val(),
				success: 
					function(data) {
						$('#resultat').html(data);
					alert(data);
					}
				});
			}
		return ok;
	});

Comment tu utilises le serialize ? Je ne comprends pas pourquoi Firebug me met "Aborted"...

Essaie ça :

<form id="monformulaire">
...
</form>

$("#monformulaire").submit(function() {
   var ok = $jform.check();
   if(ok) {
      $.ajax({
         type: 'POST',
         url: 'mail.php',
         data: $("#monformulaire").serialize(),
         success: 
            function(data) {
               $('#resultat').html(data);
               alert(data);
             }
      });
   }
   return false;
});

Mouais j'ai fait des tests en dehors de mon site et sans utiliser mon plugin et ça fonctionne...
Donc je suis un peu saoulé de ne pas savoir pourquoi ça ne fonctionne lorsque j'intègre mon plugin.

Prévois juste un paramètre à ta fonction check, avec le formulaire à analyser. Et ça devrait passer.

Donc tu penses qu'en paramètre je peux passer le nom de la page de traitement dans mon check() ? J'essayerai, merci.

En fait, à la façon dont tu l'as implémenté, ça n'est pas vraiment un plugin JQuery. Car un plugin doit être une extension de l'objet JQuery, et toujours retourner un objet de type JQuery.

Or là, j'ai l'impression qu'il s'utilise en autonome, mais en se basant sur JQuery.

J'espère être assez clair

Ah ? Comment devrais-je faire selon toi ? Quel type de plan suivre ? Ça m'intéresse...

Dans l'absolu, il faudrait l'utiliser comme ça :

$("#formulaire").submit(function(){
   var ok = $(this).jform();
   ...
});

C'est à dire que ton plugin doit être capable de récupérer le sélecteur de JQuery pour travailler sur l'objet.

Et même, il faudrait que .jform() retourne également un objet de type JQuery pour être réutilisé derrière (ex: $("#form").jform().html("pouet"); ). mais vu l'utilisation, inutile de pousser aussi loin

Oui je sais plus si c'est Golmote qui avait dit ça (en même temps c'est lui qui m'avait indiqué la structure à adopter ) qu'on ne pouvait pas utiliser le chaînage jQuery.

J'aimerais pouvoir faire comme tu dis mais du coup je ne sais pas comment faire dans le plugin, comment le coder donc ? Tout en sachant que le plugin doit avoir son propre espace de noms...
J'ai essayé de m'inspirer de plugins existants pour voir comment ils étaient structurés mais ça n'a pas répondu à mes attentes.

Et comment ensuite appeler mes fonctions ? En passant le nom de la fonction en paramètre ?

Si tu peux me donner des exemples pour que je puisse comprendre ne serait-ce que la structure à mettre en place... Merci.

Il y a différentes façons de créer un plugin. La manière "prototype" :

(function($){
   $.fn.monplugin = function(params) {
      ... tes fonctions ...
   }
})(jQuery);

La manière extend :

(function($){
   $.extend(options,{
      ... tes fonctions ...
   });
})(jQuery);

Le combiné des deux :

(function($){
   $.fn.monplugin = function(params) {
      ... ton objet principal ...
   }
   $.extend($.fn.monplugin,{
      ... tes sous fonctions ...
   });
})(jQuery);

Après, tu peux aussi sortir les fonctions de l'attachement à Jquery :

(function($){
   $.fn.monplugin = function(params) {
      ... ton objet ...
   }
   $.fn.monplugin.mafonction = function() {...}
})(jQuery);

Enfin bref, tout ça est complexe est dépend de comment tu veux utiliser/implémenter le plugin.

Effectivement ce n'est pas simple.

J'aimerais savoir si il y a des avantages/inconvénients pour chaque manière de procéder. Et dans le cas de mon plugin, quelle serait la meilleure méthode ? Que ferais-tu à ma place ? Pourquoi ?

Alors Shivaan ?

Oula oui. J'avais tenté de te répondre, mais à cause d'un bug du site, j'ai abandonné. Et du coup, j'ai oublié de revenir.

Alors en fait, j'avoue que moi-même je ne comprends pas l'intérêt de chacune des méthodes. De mon analyse, on utilise plutôt fn quand on souhaite n'utiliser que le moteur de JQuery, alors qu'on utilisera extend quand on veut reprendre et modifier le moteur (puisque extend s'occupe de faire des "merge" d'objets, et donc de fonctions). Mais je ne peux pas l'assurer avec certitude.

De mon expérience en création de plugin (qui se résume à des tests), je dirais que la manière la plus propre de procéder est la suivante :

// la closure
(function($){
    // on merge l'objet fn avec le plugin (plutôt que de prototyper)
    $.fn.extend({
        // on créé l'objet avec les paramètres
        jform: function(options) {
            // on initialise les valeurs par défaut
            var defaults = {
                a: 1,
                b: 2
                // etc
            };
            // on merge les valeurs par défaut avec les paramètres
            var options = $.extend(defaults, options);
            // ici les fonctions internes au plugin
            var c = function(){...},
                d = function(){...};
            // enfin, on écrit le script principal du plugin
            for, if, truc, bidule
            // et on permet le chaînage avec
            return this;
        }
    });
})(jQuery);

Tu peux évidemment oublier le chaînage puisque ton plugin doit te retourner true ou false pour la validation du formulaire. Mais en tout cas, c'est sur cette base que je partirais, si j'avais à faire un plugin.

D'accord merci je vais essayer avec ta méthode, et du coup comment tu appelles le plugin après ?

En fait, fn est la partie publique de JQuery. Donc par exemple, quand tu utilises $("bla").html(), tu appelles JQuery.fn.html()

Pour ton plugin, ce sera pareil. Il suffira d'utiliser $("#tonformulaire").jform() pour que les traitements se lancent. Et avec cette méthode, tu as accès directement à ton formulaire grâce à la variable "selector" (dans ton plugin this.selector te retournera l'objet form passé en paramètre à l'objet JQuery initial)

Je fais des essais, désolé si je pose des questions idiotes c'est juste qu'il faut que je comprenne le "truc".

On considère <form id="form1"></form> et $('#form1').jform(); .

Et le plugin :

(function($){
    // on merge l'objet fn avec le plugin (plutôt que de prototyper)
    $.fn.extend({
        // on créé l'objet avec les paramètres
        jform: function(options) {
            // on initialise les valeurs par défaut
            var defaults = {
                a: 1,
                b: 2
                // etc
            };
            // on merge les valeurs par défaut avec les paramètres
            var options = $.extend(defaults, options);
			var $t = $(this);
			
            // ici les fonctions internes au plugin
				
			// INPUT TEXT
			inputText = function(params) {
				var defaults = {
				disabled: false,
				password: false,
				hidden: false,
				focus: false,
				required: false,
				maxlength: 255,
				value: '',
				br: 0
				};
			var p = $.extend(defaults, params), self = this;
			
			$t.wrap($div),

			c = (p.hidden) ? 'hidden' : 'text';
			c = (p.password) ? 'password' : 'text';
			
			var $l = $('<label></label>'), $i = $('<input type="'+c+'"/>');
			
			$t.append($l).append($i);
			$l.append(p.label).attr('for', p.id);
			$i.attr('id', p.id).attr('name', p.name).attr('value', p.value).attr('maxlength', p.maxlength);
			
				for(i = 0; i < p.br; i++) $i.after('<br />');			
				(p.disabled) ? $i.attr('disabled', 'disabled') : $i.removeAttr('disabled');	
				if(p.required) $i.attr('required', 'required');
				if(p.format) $i.attr('format', p.format);
				

			}
			
            // et on permet le chaînage avec
            return this;
        }
    });
})(jQuery);

Il n'y a aucune erreur dans Firebug.

Ma question est la suivante, comment appeler la fonction inputText() et lui passer ma mappe de paramètres comme je faisais avant ?

$jform.inputText({
	label: 'Login: ', id: 1, name: '_text', value: '', focus: true, required: true, br: 1
});

Je suppose qu'il faut faire quelque chose comme ça :

$('#form1').jform('inputText', {
	label: 'Login: ', id: 1, name: '_text', value: '', focus: true, required: true, br: 1
});

Et dans le plugin que faut-il ajouter/modifier pour que ça marche ?

$("#form1").jform().inputText({
	label: 'Login: ', id: 1, name: '_text', value: '', focus: true, required: true, br: 1
});

?

$("#form1").jform().inputText is not a function

Je n'ai pas touché au code du plugin, voir code au-dessus.

Oui, j'imagine que si tu veux que tes fonctions soient accessible depuis l'extérieur, il faut faire un extend.

Il faudrait donc prendre ce modèle :

// la closure
(function($){
    // on merge l'objet fn avec le plugin (plutôt que de prototyper)
    $.fn.extend({
        // on créé l'objet avec les paramètres
        jform: function(options) {
            // on initialise les valeurs par défaut
            var defaults = {
                a: 1,
                b: 2
                // etc
            };
            // on merge les valeurs par défaut avec les paramètres
            var options = $.extend(defaults, options);
            // enfin, on écrit le script principal du plugin
            for, if, truc, bidule
            // et on permet le chaînage avec
            return this;
        }
    });
    $.fn.jform.extend({
        // ici les fonctions externes au plugin
        c: function(){...},
        d: function(){...}
    });
})(jQuery);

Bon après, je ne suis pas non plus un pro de la création de plugin

(function($){
    // on merge l'objet fn avec le plugin (plutôt que de prototyper)
    $.fn.extend({
        // on créé l'objet avec les paramètres
        jform: function(options) {
            // on initialise les valeurs par défaut
            var defaults = {
                a: 1,
                b: 2
			};
            // on merge les valeurs par défaut avec les paramètres
            var options = $.extend(defaults, options);
			var $t = $(this);
			
            // ici les fonctions internes au plugin
			
            // et on permet le chaînage avec
            return this;
        }

		$.fn.jform.extend({
			// ici les fonctions externes au plugin
			inputText : function(params) {
				var defaults = {
				disabled: false,
				password: false,
				hidden: false,
				focus: false,
				required: false,
				maxlength: 255,
				value: '',
				br: 0
				};
			var p = $.extend(defaults, params), self = this;
			
			c = (p.hidden) ? 'hidden' : 'text';
			c = (p.password) ? 'password' : 'text';
			
			var $l = $('<label></label>'), $i = $('<input type="'+c+'"/>');
			
			$t.append($l).append($i);
			$l.append(p.label).attr('for', p.id);
			$i.attr('id', p.id).attr('name', p.name).attr('value', p.value).attr('maxlength', p.maxlength);
			
				for(i = 0; i < p.br; i++) $i.after('<br />');			
				(p.disabled) ? $i.attr('disabled', 'disabled') : $i.removeAttr('disabled');	
				if(p.required) $i.attr('required', 'required');
				if(p.format) $i.attr('format', p.format);
			}
		});
	});
})(jQuery);

missing } after property list

Wtf?

EDIT : j'ai vu ta modification.

$.fn.jform.extend is not a function

Et il surligne ça inputText: function(params) {