Mootools, ajax and checkboxes

Discussion in 'Javascript' started by Jean Ceugniet, Dec 10, 2007.

  1. 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 ?
     
    Jean Ceugniet, Dec 10, 2007
    #1
    1. Advertising

  2. Jean Ceugniet

    David Mark Guest

    On Dec 10, 6:04 pm, Jean Ceugniet <> wrote:
    > 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, Dec 10, 2007
    #2
    1. Advertising

  3. 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 <> wrote:
    >> 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, Dec 11, 2007
    #3
  4. Jean Ceugniet

    David Mark Guest

    On Dec 11, 5:18 am, Jean Ceugniet <> wrote:
    > 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.
     
    David Mark, Dec 11, 2007
    #4
  5. Jean Ceugniet

    Guest

    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
    ***************************
     
    , Dec 11, 2007
    #5
  6. Jean Ceugniet

    VK Guest

    On Dec 11, 6:05 pm, wrote:
    > 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
    > ***************************


    I don't know how to do it with "moo cows" :) but with JavaScript
    itself it could be like:

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    function init() {
    var chk = document.getElementsByName('id_motscles[]');
    for (var i=0; i<chk.length; i++) {
    chk.onclick = submitter;
    }
    }

    function submitter() {
    document.forms['MySearchForm'].submit();
    }

    window.onload = init;
    </script>
    </head>

    <body>
    <form name="MySearchForm" action="code-recherche.php" method="post">
    <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">
    <noscript><input value="Enregistrer" type="submit"></noscript>
    </form>
    </body>
    </html>
     
    VK, Dec 11, 2007
    #6
  7. Yes, but how to do it, since the normal submit event is intercepted (see
    previous messages) ?


    VK a écrit :
    > On Dec 11, 6:05 pm, wrote:
    >> 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
    >> ***************************

    >
    > I don't know how to do it with "moo cows" :) but with JavaScript
    > itself it could be like:
    >
    > <html>
    > <head>
    > <title>Untitled Document</title>
    > <meta http-equiv="Content-Type"
    > content="text/html; charset=iso-8859-1">
    > <script type="text/javascript">
    > function init() {
    > var chk = document.getElementsByName('id_motscles[]');
    > for (var i=0; i<chk.length; i++) {
    > chk.onclick = submitter;
    > }
    > }
    >
    > function submitter() {
    > document.forms['MySearchForm'].submit();
    > }
    >
    > window.onload = init;
    > </script>
    > </head>
    >
    > <body>
    > <form name="MySearchForm" action="code-recherche.php" method="post">
    > <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">
    > <noscript><input value="Enregistrer" type="submit"></noscript>
    > </form>
    > </body>
    > </html>
     
    Jean Ceugniet, Dec 11, 2007
    #7
  8. Jean Ceugniet

    Jim Guest

    On Dec 11, 4:17 pm, Jean Ceugniet <> wrote:
    > Yes, but how to do it, since the normal submit event is intercepted (see
    > previous messages) ?
    >

    Jean,

    I think you're going about this the long way around. Let's take a
    step back and think about what you are wanting to accomplish.

    From what I can gather, you are wanting to fire off an ajax call every
    time a check box is clicked, right? So why bother "submitting" the
    form to begin with? You need something more like this:

    <html><head><title>dummy</title>
    <script>
    function CheckBoxChange(){
    //okay, a checkbox has changed value
    //so call your ajax function

    DoAjax();

    //and return
    }

    function PageLoaded(){
    var chk = document.getElementsByName('id_motscles[]');
    for (var i=0; i<chk.length; i++) {
    chk.onclick = CheckBoxChange;
    }
    }

    window.onload = PageLoaded;
    </script>
    <body>

    <form action="code-recherche.php" method="post" id="formRecherche">
    <input name="id_motscles[]" id="motcle_1" value="1"
    type="checkbox"><br/>
    <input name="id_motscles[]" id="motcle_2" value="2"
    type="checkbox"><br/>
    <input name="id_motscles[]" id="motcle_3" value="3"
    type="checkbox"><br/>
    <input name="id_motscles[]" id="motcle_4" value="4"
    type="checkbox"><br/>
    <input name="id_motscles[]" id="motcle_5" value="5"
    type="checkbox"><br/>
    <input name="id_motscles[]" id="motcle_6" value="6"
    type="checkbox"><br/>
    <input name="id_motscles[]" id="motcle_7" value="7"
    type="checkbox"><br/>
    <input name="id_motscles[]" id="motcle_8" value="8" type="checkbox">
    </form>
    </body>
    </html>
     
    Jim, Dec 11, 2007
    #8
  9. Jean Ceugniet

    VK Guest

    On Dec 12, 12:17 am, Jean Ceugniet <> wrote:
    > Yes, but how to do it, since the normal submit event is intercepted


    Intercepted by what? I guess I still missing the root of your problem.
    In the code I have posted onclick event for each checkbox invokes
    submit() method of the form. If you don't want to submit the form but
    do something else instead - then don't submit the form and do
    something else instead. As easy as that. So instead

    function submitter() {
    document.forms['MySearchForm'].submit();
    }

    it might be:

    function submitter() {
    checkFormInput();
    doAnyOtherStuff();
    serializeFormData();
    sendFormDataByAjaxRequest()
    }
     
    VK, Dec 11, 2007
    #9
  10. Ok, it seems like i've forgotten to give you some info which was in the
    previous posts. I already have this, which works : it intercepts the
    normal submit from my form, and makes an ajax call instead.

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

    Since this works, i'd like my checkboxes to "make the same thing as when
    the form is submitted", that is to say "no real form submit, and the
    same ajax call as if the form was asked for submission".

    Jim a écrit :
    > On Dec 11, 4:17 pm, Jean Ceugniet <> wrote:
    >> Yes, but how to do it, since the normal submit event is intercepted (see
    >> previous messages) ?
    >>

    > Jean,
    >
    > I think you're going about this the long way around. Let's take a
    > step back and think about what you are wanting to accomplish.
    >
    > From what I can gather, you are wanting to fire off an ajax call every
    > time a check box is clicked, right? So why bother "submitting" the
    > form to begin with? You need something more like this:
    >
    > <html><head><title>dummy</title>
    > <script>
    > function CheckBoxChange(){
    > //okay, a checkbox has changed value
    > //so call your ajax function
    >
    > DoAjax();
    >
    > //and return
    > }
    >
    > function PageLoaded(){
    > var chk = document.getElementsByName('id_motscles[]');
    > for (var i=0; i<chk.length; i++) {
    > chk.onclick = CheckBoxChange;
    > }
    > }
    >
    > window.onload = PageLoaded;
    > </script>
    > <body>
    >
    > <form action="code-recherche.php" method="post" id="formRecherche">
    > <input name="id_motscles[]" id="motcle_1" value="1"
    > type="checkbox"><br/>
    > <input name="id_motscles[]" id="motcle_2" value="2"
    > type="checkbox"><br/>
    > <input name="id_motscles[]" id="motcle_3" value="3"
    > type="checkbox"><br/>
    > <input name="id_motscles[]" id="motcle_4" value="4"
    > type="checkbox"><br/>
    > <input name="id_motscles[]" id="motcle_5" value="5"
    > type="checkbox"><br/>
    > <input name="id_motscles[]" id="motcle_6" value="6"
    > type="checkbox"><br/>
    > <input name="id_motscles[]" id="motcle_7" value="7"
    > type="checkbox"><br/>
    > <input name="id_motscles[]" id="motcle_8" value="8" type="checkbox">
    > </form>
    > </body>
    > </html>
     
    Jean Ceugniet, Dec 11, 2007
    #10
  11. Jean Ceugniet

    pixelchutes Guest

    On Dec 10 2007, 4:04 pm, Jean Ceugniet <>
    wrote:
    >
    > $("formRecherche").fireEvent ("submit");
    >
    >
    > ****************************
    > << Code
    > ****************************
    >
    > Could someone used tu mootools and ajax help me, please ?



    I had to pass to pass the calling event to the fireEvent function in
    order to get fireEvent('submit') working as one might expect:

    element.addEvent('click',function(event){

    new Event(e).stop();
    $('your_form_id').fireEvent('submit',event);

    });

    Regards,

    Mike Reid
    www.pixelchutes.com
     
    pixelchutes, Jan 20, 2008
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Seth Illgard

    Mootools vs Prototype?

    Seth Illgard, Mar 11, 2007, in forum: Javascript
    Replies:
    6
    Views:
    131
    -Lost
    Mar 13, 2007
  2. Shirley

    Can Mootools cowork with XUL?

    Shirley, Jul 11, 2007, in forum: Javascript
    Replies:
    0
    Views:
    130
    Shirley
    Jul 11, 2007
  3. manilal prajapati
    Replies:
    2
    Views:
    124
    Evertjan.
    Oct 17, 2007
  4. Piotr Kaleta
    Replies:
    4
    Views:
    242
    Henry
    Apr 21, 2008
  5. ameshkin
    Replies:
    4
    Views:
    209
    Thomas 'PointedEars' Lahn
    Jul 22, 2008
Loading...

Share This Page