Simple Form Submission via JQuery ajax

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Simple Form Submission via JQuery ajax

Esteban A. Maringolo
I have a simple FORM with a SELECT element together with a SUBMIT button.

html form
with: [
 html select
   list: self availableGroupSelectors;
   labels: [:x | self labelFor: x];
   selected: self group;
   callback: [:x | self group: x ].
 html space.
 html submitButton with: 'Update'.
  ]
]


What should I do if I want to make this form work "ajaxified", it
is... to make a request in the background, and replace the content of
a DIV element (with an already defined id).

Something like adding ("pseudo" code):
html submitButton onClick: ((html jQuery id: divId) load html: [
:ajaxHtml | self renderNewContentOn: ajaxHtml ]).

Maybe I can avoid using a submitButton, or return false at the end of
the onClick handler. It doesn't matter. I just want to be able to
render the new content using the selected value in the SELECT element.

I might have a few extra parameters (input elements), but I guess the
method will be same.

Regards,


Esteban A. Maringolo
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Simple Form Submission via JQuery ajax

Esteban A. Maringolo
Self answer:

 html button bePush
   onClick:
    (html jQuery ajax
        serializeForm;
        onComplete: ((html jQuery id: contentId) load html: [
:ajaxHtml | self renderBuilderOn: ajaxHtml ]));
   with: 'Actualizar'.
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Simple Form Submission via JQuery ajax

Johan Brichau-2
In reply to this post by Esteban A. Maringolo
Hi Esteban,

Add the following to your select:

html select
        ...
        onChange: (html jQuery ajax
                                serializeThisWithHidden;
                                script: [:s | s << ((s jQuery id: id) html: [:r | self renderNewContentOn: r]) ]

In short:
        - trigger a serialization of the select input element, followed by the generation of a script that replaces the div contents
        - both these operations can be done using a single ajax request
        - serializeThisWithHidden is Seaside-specific because a hidden element needs to be generated with selects and checkboxes.

If you want to serialize an entire form, starting from the submit button, then use #serializeForm (in a click handler on the submit button).
And yes, you need to prevent form submission in that case using a 'return false'.

Hope this helps
Johan


On 09 Jan 2014, at 20:20, Esteban A. Maringolo <[hidden email]> wrote:

> I have a simple FORM with a SELECT element together with a SUBMIT button.
>
> html form
> with: [
> html select
>   list: self availableGroupSelectors;
>   labels: [:x | self labelFor: x];
>   selected: self group;
>   callback: [:x | self group: x ].
> html space.
> html submitButton with: 'Update'.
>  ]
> ]
>
>
> What should I do if I want to make this form work "ajaxified", it
> is... to make a request in the background, and replace the content of
> a DIV element (with an already defined id).
>
> Something like adding ("pseudo" code):
> html submitButton onClick: ((html jQuery id: divId) load html: [
> :ajaxHtml | self renderNewContentOn: ajaxHtml ]).
>
> Maybe I can avoid using a submitButton, or return false at the end of
> the onClick handler. It doesn't matter. I just want to be able to
> render the new content using the selected value in the SELECT element.
>
> I might have a few extra parameters (input elements), but I guess the
> method will be same.
>
> Regards,
>
>
> Esteban A. Maringolo
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside