Connecting Tech Pros Worldwide Help | Site Map

Mootools, ajax and checkboxes

 
LinkBack Thread Tools Search this Thread
  #1  
Old December 10th, 2007, 10:05 PM
Jean Ceugniet
Guest
 
Posts: n/a
Default Mootools, ajax and checkboxes

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 ?

  #2  
Old December 10th, 2007, 10:25 PM
David Mark
Guest
 
Posts: n/a
Default Re: Mootools, ajax and checkboxes

On Dec 10, 6:04 pm, Jean Ceugniet <jean.ceugn...@gmail.comwrote:
Quote:
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.
Quote:
>
/**
* 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.
Quote:
});
}
>
});
>
****************************
<< 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.
  #3  
Old December 11th, 2007, 09:25 AM
Jean Ceugniet
Guest
 
Posts: n/a
Default Re: Mootools, ajax and checkboxes


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

TIA



David Mark a écrit :
Quote:
On Dec 10, 6:04 pm, Jean Ceugniet <jean.ceugn...@gmail.comwrote:
Quote:
>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.
>
Quote:
> /**
> * 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.
>
Quote:
> });
> }
>>
>});
>>
>****************************
><< 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.
  #4  
Old December 11th, 2007, 09:45 AM
David Mark
Guest
 
Posts: n/a
Default Re: Mootools, ajax and checkboxes

On Dec 11, 5:18 am, Jean Ceugniet <jean.ceugn...@gmail.comwrote:
Quote:
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.
  #5  
Old December 11th, 2007, 02:15 PM
jean.ceugniet@gmail.com
Guest
 
Posts: n/a
Default Re: Mootools, ajax and checkboxes

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

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Popular Articles

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 220,989 network members.