Mootools, ajax and checkboxes

[Jean Ceugniet]

Hi,

I just made my very first ajax form submitting. This works perfectly
(myAjax01 is a variable external to this function).

****************************
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
****************************

but i'd like to remove the submit button (visually), and to make the
checkboxes "active" : they should make the same ajax call as if the form
is submitted, each time a checkbox is checked or unchecked, and this
doesn't work (i'm probably not using the event propagation the right
way, but i don't get it).

****************************
Code >>
****************************
$$("#formRecherche input").each (function (champ)
{
if (champ.type == "checkbox")
{
champ.addEvent ("click", function ()
{
$("formRecherche").fireEvent ("submit");
});
}
});

****************************
<< Code
****************************

Could someone used tu mootools and ajax help me, please ?

[David Mark]

On Dec 10, 6:04 pm, Jean Ceugniet <[e-mail]:

Hi,

I just made my very first ajax form submitting. This works perfectly
(myAjax01 is a variable external to this function).

****************************
Code >>
****************************
$("formRecherche").addEvent("submit", function(e) {
/**
* Prevent the submit event
*/
new Event(e).stop();

I love how these Prototype-like libraries force you to create a new
object to accomplish the simplest tasks.

>
/**
* 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
****************************

but i'd like to remove the submit button (visually), and to make the
checkboxes "active" : they should make the same ajax call as if the form
is submitted, each time a checkbox is checked or unchecked, and this
doesn't work (i'm probably not using the event propagation the right
way, but i don't get it).

****************************
Code >>
****************************
$$("#formRecherche input").each (function (champ)
{
if (champ.type == "checkbox")
{
champ.addEvent ("click", function ()
{
$("formRecherche").fireEvent ("submit");

Unless I miss my guess about MooTools fireEvent method, that won't
submit the form. What you need to do is name your submit listener
function. Then you can call it from here.

});
}

});

****************************
<< Code
****************************

Could someone used tu mootools and ajax help me, please ?

I know virtually nothing about MooTools (sp?) other than the code was
inspired by Prototype and augments host objects. In other words, it
should be avoided.

[Jean Ceugniet]

Could you explain the "name your submit listener" method in deeper, please ?

TIA

David Mark a écrit :

On Dec 10, 6:04 pm, Jean Ceugniet <[e-mail]:

>Hi,

I just made my very first ajax form submitting. This works perfectly
(myAjax01 is a variable external to this function).

****************************
Code >>
****************************
$("formRecherche").addEvent("submit", function(e) {
/**
* Prevent the submit event
*/
new Event(e).stop();

I love how these Prototype-like libraries force you to create a new
object to accomplish the simplest tasks.

> /**
* 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
****************************

but i'd like to remove the submit button (visually), and to make the
checkboxes "active" : they should make the same ajax call as if the form
is submitted, each time a checkbox is checked or unchecked, and this
doesn't work (i'm probably not using the event propagation the right
way, but i don't get it).

****************************
Code >>
****************************
$$("#formRecherche input").each (function (champ)
{
if (champ.type == "checkbox")
{
champ.addEvent ("click", function ()
{
$("formRecherche").fireEvent ("submit");

Unless I miss my guess about MooTools fireEvent method, that won't
submit the form. What you need to do is name your submit listener
function. Then you can call it from here.

> });
}

});

****************************
<< Code
****************************

Could someone used tu mootools and ajax help me, please ?

I know virtually nothing about MooTools (sp?) other than the code was
inspired by Prototype and augments host objects. In other words, it
should be avoided.

[David Mark]

On Dec 11, 5:18 am, Jean Ceugniet <[e-mail]:

Could you explain the "name your submit listener" method in deeper, please ?

Give it a name so you can call it directly in your click listeners.
Looking at your code again, I am unsure as to why the MooTools
fireEvent method is not working for this as it doesn't need to
actually submit the form. In theory it should work. But in reality,
you don't need it to work.

[jean.ceugniet]

Ok. So, here is my html code. For now, the only way i found to work
around the problem was to click the submit button when the checkboxes
are actually clicked (that triggers the form submit, which is
intercepted ...). If you can show me how to name the click listeners
(i'm not quite used to javascript, and i don't see how to launch the
form submit event when the checkbox click event is triggered : how to
"create" a non-real event and pass it as a parameter ?). Thanks.

***************************
Code >>
***************************
<form action="code-recherche.php" method="post" id="formRecherche">
<input name="id_motscles[]" id="motcle_1" value="1" type="checkbox">
<input name="id_motscles[]" id="motcle_2" value="2" type="checkbox">
<input name="id_motscles[]" id="motcle_3" value="3" type="checkbox">
<input name="id_motscles[]" id="motcle_4" value="4" type="checkbox">
<input name="id_motscles[]" id="motcle_5" value="5" type="checkbox">
<input name="id_motscles[]" id="motcle_6" value="6" type="checkbox">
<input name="id_motscles[]" id="motcle_7" value="7" type="checkbox">
<input name="id_motscles[]" id="motcle_8" value="8" type="checkbox">

<input value="Enregistrer" type="submit">
</form>
***************************
<< Code
***************************