Rails spinoffs - May 2007 - How to get a current INPUT tag value and send it via AJAX.Updater

Hello,

I''m stuck with a problem and don''t know how to solve it. I
have a form
with several INPUT fields. When a user changes a value in any INPUT
field I need to get the value and send an Ajax.Updater request with
this value to my backend and work with it. The response then needs to
update a div after the backend finishes.

I''m using Symfony PHP framework with Prototype 1.5.0 and it generated
this code:

new Ajax.Updater(''medium_9'',
''/calendar/updateyrr/medium_id/9/
requested/XXXX'', {asynchronous:true, evalScripts:false,
onComplete:function(request, json){Element.hide(''indicator'')},
onLoading:function(request, json){Element.show(''indicator'')}})

My problems are:
1) If I use an onchange or onkeypress event on the INPUT field to send
the Updater I don''t know how to get the current value from the INPUT
field and replace the XXX in the URL

2) I tried to submit the whole form, but it only works when I submit
it with a button. Is it possible to submit it with a onchange event on
a input field and make the AJAX call instead of the form submit?

When I tried
new Ajax.Updater(''mediums_9'',
''/calendar/updateyrr'',
{asynchronous:true, evalScripts:false, onComplete:function(request,
json){Element.hide(''indicator'')}, onLoading:function(request,
json)
{Element.show(''indicator'')},
parameters:Form.serialize(this)}); return
false;"

it worked fine when the form was submitted with a Submit button.

when I used this:
....parameters:Form.serialize(this)}); this.form.submit(); return
false;" It submitted the form normally instead of calling the AJAX
updater.

I also though about constructing the AJAX.Updater with an eval
function an injecting the input.value to the string but it doesn''t
seems to be correct approach to me.

Just a note, I also need to have a standard Submit button with submits
the whole form normally to a php script so option 1) is prefered, but
If I need to submit the whole form with AJAX I might be able to
workaround it when I need to handle the form post and not only the DIV
update.

Thank you for any input.

Martyp


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Alrighty, I have no idea what the Symfony PHP framework is doing for you 
and what you''re coding by hand, but this is how I would do it:

1.  Put a custom ID on your form; I''m going to use theForm for the
moment.
2.  Write a function like this:

function inputFieldChangeSetup() {
    $("theForm").getInputs().each(function(input) {
       input.observe("change", function(e) {
          var value = Event.element(e).value;      // get the value of 
the input which made this event
          new Ajax.Updater("some_thingy", 
"/calendar/updateyrr/medium_id/9/requested/" + value, { ... });
        }
    });
}

3. Then, run that function when the window is loaded:

    Event.observe(window, "load", inputFieldChangeSetup);

Let us know if you need more help.
 - Dash -

Martyp wrote:
> Hello,
>
> I''m stuck with a problem and don''t know how to solve it.
I have a form
> with several INPUT fields. When a user changes a value in any INPUT
> field I need to get the value and send an Ajax.Updater request with
> this value to my backend and work with it. The response then needs to
> update a div after the backend finishes.
>
> I''m using Symfony PHP framework with Prototype 1.5.0 and it
generated
> this code:
>
> new Ajax.Updater(''medium_9'',
''/calendar/updateyrr/medium_id/9/
> requested/XXXX'', {asynchronous:true, evalScripts:false,
> onComplete:function(request,
json){Element.hide(''indicator'')},
> onLoading:function(request,
json){Element.show(''indicator'')}})
>
> My problems are:
> 1) If I use an onchange or onkeypress event on the INPUT field to send
> the Updater I don''t know how to get the current value from the
INPUT
> field and replace the XXX in the URL
>
> 2) I tried to submit the whole form, but it only works when I submit
> it with a button. Is it possible to submit it with a onchange event on
> a input field and make the AJAX call instead of the form submit?
>
> When I tried
> new Ajax.Updater(''mediums_9'',
''/calendar/updateyrr'',
> {asynchronous:true, evalScripts:false, onComplete:function(request,
> json){Element.hide(''indicator'')},
onLoading:function(request, json)
> {Element.show(''indicator'')},
parameters:Form.serialize(this)}); return
> false;"
>
> it worked fine when the form was submitted with a Submit button.
>
> when I used this:
> ....parameters:Form.serialize(this)}); this.form.submit(); return
> false;" It submitted the form normally instead of calling the AJAX
> updater.
>
> I also though about constructing the AJAX.Updater with an eval
> function an injecting the input.value to the string but it doesn''t
> seems to be correct approach to me.
>
> Just a note, I also need to have a standard Submit button with submits
> the whole form normally to a php script so option 1) is prefered, but
> If I need to submit the whole form with AJAX I might be able to
> workaround it when I need to handle the form post and not only the DIV
> update.
>
> Thank you for any input.
>
> Martyp
>
>
> >
>
>   
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

I always use a hidden Iframe for my form submissions. It saves a lot
of headaches and coding.

This way you could set the target of the from to the hidden Iframe and
submit it there as many times as you want without interefering with
the UI.

Tave the submit button be type="button", not type="submit"
and have
the onclick call a function that sets the form target to nothing, then
submit the form normally.


On May 2, 1:43 pm, Martyp
<martin.pav...-rN3PHIWzTs2Ujszb+1+qSA@public.gmane.org>
wrote:
> Hello,
>
> I''m stuck with a problem and don''t know how to solve it.
I have a form
> with several INPUT fields. When a user changes a value in any INPUT
> field I need to get the value and send an Ajax.Updater request with
> this value to my backend and work with it. The response then needs to
> update a div after the backend finishes.
>
> I''m using Symfony PHP framework with Prototype 1.5.0 and it
generated
> this code:
>
> new Ajax.Updater(''medium_9'',
''/calendar/updateyrr/medium_id/9/
> requested/XXXX'', {asynchronous:true, evalScripts:false,
> onComplete:function(request,
json){Element.hide(''indicator'')},
> onLoading:function(request,
json){Element.show(''indicator'')}})
>
> My problems are:
> 1) If I use an onchange or onkeypress event on the INPUT field to send
> the Updater I don''t know how to get the current value from the
INPUT
> field and replace the XXX in the URL
>
> 2) I tried to submit the whole form, but it only works when I submit
> it with a button. Is it possible to submit it with a onchange event on
> a input field and make the AJAX call instead of the form submit?
>
> When I tried
> new Ajax.Updater(''mediums_9'',
''/calendar/updateyrr'',
> {asynchronous:true, evalScripts:false, onComplete:function(request,
> json){Element.hide(''indicator'')},
onLoading:function(request, json)
> {Element.show(''indicator'')},
parameters:Form.serialize(this)}); return
> false;"
>
> it worked fine when the form was submitted with a Submit button.
>
> when I used this:
> ....parameters:Form.serialize(this)}); this.form.submit(); return
> false;" It submitted the form normally instead of calling the AJAX
> updater.
>
> I also though about constructing the AJAX.Updater with an eval
> function an injecting the input.value to the string but it doesn''t
> seems to be correct approach to me.
>
> Just a note, I also need to have a standard Submit button with submits
> the whole form normally to a php script so option 1) is prefered, but
> If I need to submit the whole form with AJAX I might be able to
> workaround it when I need to handle the form post and not only the DIV
> update.
>
> Thank you for any input.
>
> Martyp

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On May 2, 2007, at 1:06 PM, Diodeus wrote:
> Tave the submit button be type="button", not
type="submit" and have
> the onclick call a function that sets the form target to nothing, then
> submit the form normally.
I disagree.  Keep the type="submit", observe the onsubmit event  
instead of onclick.

The hidden iframe is an interesting, but a visual response won''t  
degrade if Javascript is turned off.


TAG


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---