Form, serialize:, answer: and callback:

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

Form, serialize:, answer: and callback:

Dave
Hi,
 I've a form I have to submit via ajax. The form is in a component called via call:, when the form is submitted I want to return to the previous component.

Here's my code

... 
html form:[
...
html anchor onClick:(html jQuery ajax serializeForm callback: [self answer: itsVisit ]);
text:'ok'.
...
]

Form is submitted, but answer: does not return to the previous component even if it is executed (I know because I put a halt in the callback block).
Can anyone explain why and how to solve it?

Thanks
 Dave
Reply | Threaded
Open this post in threaded view
|

Re: Form, serialize:, answer: and callback:

Dave
Blah, the forum stripped away my code.
So that's the code:

html form:[
...
html anchor onClick:(html jQuery ajax serializeForm callback: [self answer: itsVisit ]);
text:'ok'.
...
]

Dav wrote
Hi,
 I've a form I have to submit via ajax. The form is in a component called via call:, when the form is submitted I want to return to the previous component.

Here's my code

... 
html form:[
...
html anchor onClick:(html jQuery ajax serializeForm callback: [self answer: itsVisit ]);
text:'ok'.
...
]

Form is submitted, but answer: does not return to the previous component even if it is executed (I know because I put a halt in the callback block).
Can anyone explain why and how to solve it?

Thanks
 Dave
Reply | Threaded
Open this post in threaded view
|

Re: Form, serialize:, answer: and callback:

Johan Brichau-2
answer: does not work in an Ajax callback.

Is there a reason to use Ajax when you want to do a full page refresh anyway?
I.e.: you could submit the form using a normal callback.

Johan

On 12 Jun 2013, at 00:51, Dav <[hidden email]> wrote:

> Blah, the forum stripped away my code.
> So that's the code:
>
> html form:[
> ...
> html anchor onClick:(html jQuery ajax serializeForm callback: [self answer:
> itsVisit ]);
> text:'ok'.
> ...
> ]
>
>
> Dav wrote
>> Hi,
>> I've a form I have to submit via ajax. The form is in a component called
>> via call:, when the form is submitted I want to return to the previous
>> component.
>>
>> Here's my code
>
>>
>> Form is submitted, but answer: does not return to the previous component
>> even if it is executed (I know because I put a halt in the callback
>> block).
>> Can anyone explain why and how to solve it?
>>
>> Thanks
>> Dave
>
>
>
>
>
> --
> View this message in context: http://forum.world.st/Form-serialize-answer-and-callback-tp4692893p4692894.html
> Sent from the Seaside General mailing list archive at Nabble.com.
> _______________________________________________
> 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
Reply | Threaded
Open this post in threaded view
|

Re: Form, serialize:, answer: and callback:

mozillanerd
Johan Brichau <johan <at> inceptive.be> writes:

>
>...
It is unclear to Dan that callback does a full page refresh. Please let me
know as I am not entirely clear, and it is possible to play with priorities
to cause callback to behave differently.

THanks



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

Re: Form, serialize:, answer: and callback:

Johan Brichau-2

On 12 Jun 2013, at 08:24, intrader <[hidden email]> wrote:

> It is unclear to Dan that callback does a full page refresh. Please let me
> know as I am not entirely clear, and it is possible to play with priorities
> to cause callback to behave differently.

callback priorities only determine the order of execution of callbacks when several callbacks are being serialized over a single http call.
As an application programmer, you should almost never have to deal with them. They are, in fact, hard-coded in the WACallback classes.

The difference I point to is the one between an XMLHttpRequest and an HttpRequest (which correspond to ajax callback and regular callback). Even when working with Seaside, you need to be aware of the differences. When you use an ajax callback (such as jQuery's serializeForm) the browser performs an XMLHttpRequest and the entire page will stay the same. For Seaside, that means you are 'staying in the same continuation'. Your callback merely performs some operation on the server and sends back a response that can be treated by javascript on the client side. If you are using a standard form submission callback (such as the one example here [2]), the browser performs a POST http request and expects a full page response to refresh the entire page on the client side. This is also where Seaside creates a new continuation.

The mechanism of call: and answer: [1] operates only in the context of regular callbacks. In essence, they only meaningfully execute in the context of a regular (full page) callback.

See more:
[1] http://book.seaside.st/book/components/calling/call-answer
[2] http://book.seaside.st/book/in-action/todo/forms

Hope this helps,
Johan

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

Re: Form, serialize:, answer: and callback:

Dave
Hi Johan,
 You described the concetps very well. I'm trying to better explain my issue.

Unfortunately I have to send form data to the server twice: once without changing page and once performing a full regular callback.
So at first my code was:

html form:[
        ...
        html submitButton callback: [ self answer: itsVisit ];
        text: 'ok'.
        ...
        html div with: [
                        ...
                        html button onClick: html jQuery ajax serializeForm; with: 'Update'
                        ...
        ]
]


That's near a solution because when I click on the 'Update' button the form is submitted twice, Lukas pointed the issue (http://forum.world.st/Jquery-submit-loads-page-tp3919176p3919179.html) and provided a workaround (see "return false"). I can implement Lukas' solution changing
html button onClick: (html jQuery ajax serializeForm; return: false) with: 'Update'
but I'm struggling to find something clearer.


So I changed the submitButton with an anchor and onClick: etc. etc.

html form:[
        ...
        html anchor onClick:(html jQuery ajax serializeForm callback: [self answer: itsVisit ]);
        text: 'ok'.
        ...
        html div with: [
                        ...
                        html button onClick: html jQuery ajax serializeForm; with: 'Update'
                        ...
        ]
]

Now the form is not submitted twice when I click on the 'Update' anchor, but if I click the submitButton answer: does not work.

Can you see any other solution?
TIA
Dave
Reply | Threaded
Open this post in threaded view
|

Re: Form, serialize:, answer: and callback:

Johan Brichau-2
Hi Dave,

You can use the onComplete: option of a jQAjax and trigger a full page request from javascript:

html button
        onClick: (html jQuery ajax
                                serializeForm;
                                onComplete: (html javascript callback: [self answer: 'tadaaa!']);
        with: 'Update'

cheers,
Johan

On 12 Jun 2013, at 10:47, Dave <[hidden email]> wrote:

> Hi Johan,
> You described the concetps very well. I'm trying to better explain my
> issue.
>
> Unfortunately I have to send form data to the server twice: once without
> changing page and once performing a full regular callback.
> So at first my code was:
>
> html form:[
> ...
> html submitButton callback: [ self answer: itsVisit ];
> text: 'ok'.
> ...
> html div with: [
> ...
> html button onClick: html jQuery ajax serializeForm; with: 'Update'
> ...
> ]
> ]
>
>
> That's near a solution because when I click on the 'Update' button the form
> is submitted twice, Lukas pointed the issue
> (http://forum.world.st/Jquery-submit-loads-page-tp3919176p3919179.html) and
> provided a workaround (see "return false"). I can implement Lukas' solution
> changing
> html button onClick: (html jQuery ajax serializeForm; return: false) with:
> 'Update'
> but I'm struggling to find something clearer.
>
>
> So I changed the submitButton with an anchor and onClick: etc. etc.
>
> html form:[
> ...
> html anchor onClick:(html jQuery ajax serializeForm callback: [self answer:
> itsVisit ]);
> text: 'ok'.
> ...
> html div with: [
> ...
> html button onClick: html jQuery ajax serializeForm; with: 'Update'
> ...
> ]
> ]
>
> Now the form is not submitted twice when I click on the 'Update' anchor, but
> if I click the submitButton answer: does not work.
>
> Can you see any other solution?
> TIA
> Dave
>
>
>
> --
> View this message in context: http://forum.world.st/Form-serialize-answer-and-callback-tp4692893p4692933.html
> Sent from the Seaside General mailing list archive at Nabble.com.
> _______________________________________________
> 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
Reply | Threaded
Open this post in threaded view
|

Re: Form, serialize:, answer: and callback:

Dave
Hi Johan,
In your snippet there is a mix of my code, I don't need to "answer:" on 'Update' but on 'ok'.

Anyway, I tried to use "onComplete:"  this way:

html form:[
        ...
        html button onClick: (html jQuery ajax serializeForm; onComplete: (html javascript callback: [ self answer: itsVisit ]));
        text: 'ok'.
        ...
        html div with: [
                        ...
                        html button onClick: html jQuery ajax serializeForm; with: 'Update'
                        ...
        ]
]


but it doesn't work, "answer:" is not called
Dave

Johan Brichau-2 wrote
Hi Dave,

You can use the onComplete: option of a jQAjax and trigger a full page request from javascript:

html button
        onClick: (html jQuery ajax
                                serializeForm;
                                onComplete: (html javascript callback: [self answer: 'tadaaa!']);
        with: 'Update'

cheers,
Johan

On 12 Jun 2013, at 10:47, Dave <[hidden email]> wrote:

> Hi Johan,
> You described the concetps very well. I'm trying to better explain my
> issue.
>
> Unfortunately I have to send form data to the server twice: once without
> changing page and once performing a full regular callback.
> So at first my code was:
>
> html form:[
> ...
> html submitButton callback: [ self answer: itsVisit ];
> text: 'ok'.
> ...
> html div with: [
> ...
> html button onClick: html jQuery ajax serializeForm; with: 'Update'
> ...
> ]
> ]
>
>
> That's near a solution because when I click on the 'Update' button the form
> is submitted twice, Lukas pointed the issue
> (http://forum.world.st/Jquery-submit-loads-page-tp3919176p3919179.html) and
> provided a workaround (see "return false"). I can implement Lukas' solution
> changing
> html button onClick: (html jQuery ajax serializeForm; return: false) with:
> 'Update'
> but I'm struggling to find something clearer.
>
>
> So I changed the submitButton with an anchor and onClick: etc. etc.
>
> html form:[
> ...
> html anchor onClick:(html jQuery ajax serializeForm callback: [self answer:
> itsVisit ]);
> text: 'ok'.
> ...
> html div with: [
> ...
> html button onClick: html jQuery ajax serializeForm; with: 'Update'
> ...
> ]
> ]
>
> Now the form is not submitted twice when I click on the 'Update' anchor, but
> if I click the submitButton answer: does not work.
>
> Can you see any other solution?
> TIA
> Dave
>
>
>
> --
> View this message in context: http://forum.world.st/Form-serialize-answer-and-callback-tp4692893p4692933.html
> Sent from the Seaside General mailing list archive at Nabble.com.
> _______________________________________________
> 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
Reply | Threaded
Open this post in threaded view
|

Re: Form, serialize:, answer: and callback:

Johan Brichau-2
Is the form serialized?

On 12 Jun 2013, at 11:36, Dave <[hidden email]> wrote:

> Hi Johan,
> In your snippet there is a mix of my code, I don't need to "answer:" on
> 'Update' but on 'ok'.
>
> Anyway, I tried to use "onComplete:"  this way:
>
> html form:[
> ...
> html button onClick: (html jQuery ajax serializeForm; onComplete: (html
> javascript callback: [ self answer: itsVisit ]));
> text: 'ok'.
> ...
> html div with: [
> ...
> html button onClick: html jQuery ajax serializeForm; with: 'Update'
> ...
> ]
> ]
>
>
> but it doesn't work, "answer:" is not called
> Dave
>
>
> Johan Brichau-2 wrote
>> Hi Dave,
>>
>> You can use the onComplete: option of a jQAjax and trigger a full page
>> request from javascript:
>>
>> html button
>> onClick: (html jQuery ajax
>> serializeForm;
>> onComplete: (html javascript callback: [self answer: 'tadaaa!']);
>> with: 'Update'
>>
>> cheers,
>> Johan
>>
>> On 12 Jun 2013, at 10:47, Dave &lt;
>
>> lasmiste@
>
>> &gt; wrote:
>>
>>> Hi Johan,
>>> You described the concetps very well. I'm trying to better explain my
>>> issue.
>>>
>>> Unfortunately I have to send form data to the server twice: once without
>>> changing page and once performing a full regular callback.
>>> So at first my code was:
>>>
>>> html form:[
>>> ...
>>> html submitButton callback: [ self answer: itsVisit ];
>>> text: 'ok'.
>>> ...
>>> html div with: [
>>> ...
>>> html button onClick: html jQuery ajax serializeForm; with: 'Update'
>>> ...
>>> ]
>>> ]
>>>
>>>
>>> That's near a solution because when I click on the 'Update' button the
>>> form
>>> is submitted twice, Lukas pointed the issue
>>> (http://forum.world.st/Jquery-submit-loads-page-tp3919176p3919179.html)
>>> and
>>> provided a workaround (see "return false"). I can implement Lukas'
>>> solution
>>> changing
>>> html button onClick: (html jQuery ajax serializeForm; return: false)
>>> with:
>>> 'Update'
>>> but I'm struggling to find something clearer.
>>>
>>>
>>> So I changed the submitButton with an anchor and onClick: etc. etc.
>>>
>>> html form:[
>>> ...
>>> html anchor onClick:(html jQuery ajax serializeForm callback: [self
>>> answer:
>>> itsVisit ]);
>>> text: 'ok'.
>>> ...
>>> html div with: [
>>> ...
>>> html button onClick: html jQuery ajax serializeForm; with: 'Update'
>>> ...
>>> ]
>>> ]
>>>
>>> Now the form is not submitted twice when I click on the 'Update' anchor,
>>> but
>>> if I click the submitButton answer: does not work.
>>>
>>> Can you see any other solution?
>>> TIA
>>> Dave
>>>
>>>
>>>
>>> --
>>> View this message in context:
>>> http://forum.world.st/Form-serialize-answer-and-callback-tp4692893p4692933.html
>>> Sent from the Seaside General mailing list archive at Nabble.com.
>>> _______________________________________________
>>> seaside mailing list
>>>
>
>> seaside@.squeakfoundation
>
>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>> _______________________________________________
>> seaside mailing list
>
>> seaside@.squeakfoundation
>
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
>
>
>
> --
> View this message in context: http://forum.world.st/Form-serialize-answer-and-callback-tp4692893p4692950.html
> Sent from the Seaside General mailing list archive at Nabble.com.
> _______________________________________________
> 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
Reply | Threaded
Open this post in threaded view
|

Re: Form, serialize:, answer: and callback:

mozillanerd
In reply to this post by Johan Brichau-2
Johan Brichau <johan <at> inceptive.be> writes:

>
>
> On 12 Jun 2013, at 08:24, intrader <intrader <at> aol.com> wrote:
>...

Thanks for your clear explanation - what I get also is that answer: does not
operate in this context.

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

Re: Form, serialize:, answer: and callback:

Dave
In reply to this post by Johan Brichau-2
Johan Brichau-2 wrote
Is the form serialized?

Hi Johan,
 I dived a bit more in the issue. The form is some way "serialized" (I'm going to explain why I put serialized between quotes [1]), but I think there is a problem with webkit (chrome, safari), instead firefox is working.
I replicated the behavior with a couple of components, so you can test by yourself:

FirstComponent>>
renderContentOn: html
        html anchor
                callback: [ self call: SecondComponent new ];
                with: 'Call second component'
               
               
SecondComponent>>
renderContentOn: html
       
        html
                form: [
                        html textInput.
                        html button
                                onClick:
                                                (html jQuery ajax
                                                                serializeForm;
                                                                onComplete: (html javascript callback: [ self answer ]));
                                text: 'ok' ].


If you test the above code on firefox (v21.0 on osx 10.8.4) it works (i.e. answer is called), but it doesn't on chrome nor on safari.

But I discovered that there are no XHR [1], if you open firebug, or the equivalent in chrome/safari, you notice that if you click on the ok button there is no trace of XHRs.
You can better spot it if you change the code this way:

SecondComponent>>
renderContentOn: html
        html
                form: [
                        html textInput.
                        html button
                                onClick:
                                                (html jQuery ajax
                                                                serializeForm;
                                                                onComplete: (html javascript callback: [ self answer ]));
                                text: 'ok' ].
        html button
                onClick: html jQuery ajax serializeThis;
                text: 'test'

If you click on 'test' button you'll see XHR, but if you click on 'ok' don't. That puzzles me a lot.

Hints? :-)

Cheers
Dave