Mootools, ajax et checkboxes
Le
Jean Ceugniet
Salut,
Je viens de faire ma toute première soumission de formulaire en ajax.
Cette partie là fonctione (myAjax01 est une variable externe à la fonction).
*****************************************************
Code >>
*****************************************************
$("formRecherche").addEvent("submit", function(e) {
/**
* Prevent the submit event
*/
new Event(e).stop();
/**
* This empties the log and shows the spinning indicator
*/
$("formRecherche").className = "ajax_loading_01";
/**
* send takes care of encoding and returns the Ajax instance.
* onComplete removes the spinner from the log.
*/
myAjax01 = this.send({
onComplete: function() {
formRechercheMaj (myAjax01);
}
});
});
*****************************************************
<< Code
*****************************************************
mais je voudrais enlever le bouton submit (visuellement), et rendre les
checkboxes "actives" : elles devraient déclencher la même requète ajax
que si le formulaire était soumis, à chaque fois qu'une checkbox est
cochée ou décochée, et cette partie là ne marche pas (j'utilise
probablement la propagation d'évènement de façon incorrecte, mais je ne
vois pas où).
*****************************************************
Code >>
*****************************************************
$$("#formRecherche input").each (function (champ)
{
if (champ.type == "checkbox")
{
champ.addEvent ("click", function ()
{
$("formRecherche").fireEvent ("submit");
});
}
});
*****************************************************
<< Code
*****************************************************
D'avance merci
Je viens de faire ma toute première soumission de formulaire en ajax.
Cette partie là fonctione (myAjax01 est une variable externe à la fonction).
*****************************************************
Code >>
*****************************************************
$("formRecherche").addEvent("submit", function(e) {
/**
* Prevent the submit event
*/
new Event(e).stop();
/**
* This empties the log and shows the spinning indicator
*/
$("formRecherche").className = "ajax_loading_01";
/**
* send takes care of encoding and returns the Ajax instance.
* onComplete removes the spinner from the log.
*/
myAjax01 = this.send({
onComplete: function() {
formRechercheMaj (myAjax01);
}
});
});
*****************************************************
<< Code
*****************************************************
mais je voudrais enlever le bouton submit (visuellement), et rendre les
checkboxes "actives" : elles devraient déclencher la même requète ajax
que si le formulaire était soumis, à chaque fois qu'une checkbox est
cochée ou décochée, et cette partie là ne marche pas (j'utilise
probablement la propagation d'évènement de façon incorrecte, mais je ne
vois pas où).
*****************************************************
Code >>
*****************************************************
$$("#formRecherche input").each (function (champ)
{
if (champ.type == "checkbox")
{
champ.addEvent ("click", function ()
{
$("formRecherche").fireEvent ("submit");
});
}
});
*****************************************************
<< Code
*****************************************************
D'avance merci
Poser une question
Je ne connais pas Mootools mais :
- ne serait-ce pas :
$$("formRecherche input").each ( function () {...};
- de plus ici je pense que j'essaierais de simplifier
$$("#formRecherche input").each ( function ()
{
if (champ.type == "checkbox")
{
champ.addEvent ("click", function ()
{
this.form.submit();
});
}
});
Sinon en bête JS de nos grand-mères (et en "nommant" le form) :
var f = document.formRecherche;
// ou sans nommer le form (mais avec un id tt de même !) :
// var f = $('formRecherche');
if(f)
for (var i=0, L=f.length; i<L; i++) {
if(f[i].type == 'checkbox')
f[i].onclick = function(){ this.form.submit(); };
}
mais ... bon ... à savoir si ça va envoyer réellement le formulaire
(en Ajax et après éventuels contrôles) ?
sachant que dans la fonction de submit attachée je vois une histoire de
stopPropagation :
/**
* Prevent the submit event
*/
new Event(e).stop();
et qu'en outre, le truc submit(); , je me demande s'il ne by-passe pas
le onsubmit ?
donc peut-être :
var f = $('formRecherche');
if(f)
for (var i=0, L=f.length; i<L; i++) {
if(f[i].type == 'checkbox')
f[i].onclick = function(){
myAjax01 = this.form.send(
{
onComplete: function() {
formRechercheMaj (myAjax01);
}
}
);
};
}
--
sm