jQuery Ajax: do something before and after

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

jQuery Ajax: do something before and after

jtuchel
Hi,

I am trying to do something pretty simple (I thought):
I want to show some wait dialog or replace a submit button with a spinning wheel and the text 'please wait' until the ajax has finished.

For this I did something like this in my code

s submitButton
  onClick:  (
                                s jQuery ajax
                                        onBeforeSend: (((s jQuery class: 'submit')  hide));
                                        callback: [self doSomething];
                                        onComplete: ((s jQuery class: 'submit')  show));
  with: 'Click here'.

I tried to open a jQuery dialog in the beforeSend and closing it in complete, but this either doesnt work at all or only in one of FF and Chrome, but never in both.

How do people solve this "easy" task?

Joachim
Reply | Threaded
Open this post in threaded view
|

Re: jQuery Ajax: do something before and after

Paul DeBruicker
On 01/22/2013 08:30 AM, jtuchel wrote:
> s submitButton
>   onClick:  (
> s jQuery ajax
> onBeforeSend: (((s jQuery class: 'submit')  hide));
> callback: [self doSomething];
> onComplete: ((s jQuery class: 'submit')  show));
>   with: 'Click here'.


I'd do it like this:

s submitButton
  onClick: (s jQuery class: 'submit')  hide) ,  (
                                s jQuery ajax
                                        callback: [self doSomething];
                                        onComplete: ((s jQuery class: 'submit')  show));
  with: 'Click here'.

So when clicked the button is hidden then the ajax callback is called
and when the ajaz callback completes the button is shown.


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

Re: jQuery Ajax: do something before and after

Gastón Dall' Oglio
Hi.

I use similar code to render a login button:

renderLoginButton: html

html tbButton beSuccess;
    dataLoadingText: Please wait...';
    onClick:
        (html jQuery this call: 'button' with: 'loading'),
        (html jQuery ajax 
            serializeForm;
            callback: [ self login ];
            onComplete: html javascript refresh);
     with: 'Login'

I'm using TwitterBootstrap, and I've done some classes and methods wrapping it. I attached those packages ().

Regards.

PS: Why I use anchor instead of submit? that's another story :)


2013/1/22 Paul DeBruicker <[hidden email]>
On 01/22/2013 08:30 AM, jtuchel wrote:
> s submitButton
>   onClick:  (
>                               s jQuery ajax
>                                       onBeforeSend: (((s jQuery class: 'submit')  hide));
>                                       callback: [self doSomething];
>                                       onComplete: ((s jQuery class: 'submit')  show));
>   with: 'Click here'.


I'd do it like this:

s submitButton
  onClick: (s jQuery class: 'submit')  hide) ,  (
                                s jQuery ajax
                                        callback: [self doSomething];
                                        onComplete: ((s jQuery class: 'submit')  show));
  with: 'Click here'.

So when clicked the button is hidden then the ajax callback is called
and when the ajaz callback completes the button is shown.


_______________________________________________
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

TBootstrap-Libraries-GastonDallOglio.4.mcz (329K) Download Attachment
TBootstrap-Seaside-Canvas-GastonDallOglio.10.mcz (11K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: jQuery Ajax: do something before and after

Gastón Dall' Oglio
Hi.

Today I began to wrap button plugin of Twitter Bootstrap, so code look less ugly:

Example:

html tbButton beSuccess;
   id: 'buttonid';
   dataLoadingText: 'Sending...';
   dataCompleteText: 'Sent';
   onClick:
      (html jQuery this tbButton loading),
      (html jQuery ajax 
          serializeForm;
          callback: [ (Delay forSeconds: 3) wait. ];
          onComplete: ((html jQuery id: 'buttonid') tbButton complete));
    with: 'Send'.

or with arbitrary text states:

html tbButton beSuccess;
    id: 'buttonid';
    dataLoadingText: 'Sending...';
    data: 'ok' text: 'Sent';
    data: 'bad' text: 'No sent';
    onClick:
       (html jQuery this tbButton loading),
       (html jQuery ajax 
           serializeForm;
           callback: [ (Delay forSeconds: 3) wait. ];
           onSuccess: ((html jQuery id: 'buttonid') tbButton state: 'ok');
           onError: ((html jQuery id: 'buttonid') tbButton state: 'bad'));
    with: 'Send'.


I know that already there an project about TwitterBootstrap in ss3 but there is some differences with mine, I go to see asap for possibilities of merge both projects. 

Regards.


2013/1/22 Gastón Dall' Oglio <[hidden email]>
Hi.

I use similar code to render a login button:

renderLoginButton: html

html tbButton beSuccess;
    dataLoadingText: Please wait...';
    onClick:
        (html jQuery this call: 'button' with: 'loading'),
        (html jQuery ajax 
            serializeForm;
            callback: [ self login ];
            onComplete: html javascript refresh);
     with: 'Login'

I'm using TwitterBootstrap, and I've done some classes and methods wrapping it. I attached those packages ().

Regards.

PS: Why I use anchor instead of submit? that's another story :)


2013/1/22 Paul DeBruicker <[hidden email]>
On 01/22/2013 08:30 AM, jtuchel wrote:
> s submitButton
>   onClick:  (
>                               s jQuery ajax
>                                       onBeforeSend: (((s jQuery class: 'submit')  hide));
>                                       callback: [self doSomething];
>                                       onComplete: ((s jQuery class: 'submit')  show));
>   with: 'Click here'.


I'd do it like this:

s submitButton
  onClick: (s jQuery class: 'submit')  hide) ,  (
                                s jQuery ajax
                                        callback: [self doSomething];
                                        onComplete: ((s jQuery class: 'submit')  show));
  with: 'Click here'.

So when clicked the button is hidden then the ajax callback is called
and when the ajaz callback completes the button is shown.


_______________________________________________
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: jQuery Ajax: do something before and after

jtuchel
In reply to this post by Gastón Dall' Oglio
Paul, Gaston,

I was busy with other things, so sorry for my late reply.

Doing a little more testing, it turns out both approaches - the one you describe and using onBeforeSend: - work equally well in most browsers. But not in all.

Funnily, Chrome on OS X and Safari work correctly, as does IE on Win 7 from Version 9, but not Chrome on Windows. So maybe that is a bug in Chrome and I shouldn't worry.

In all cases: thanks a lot for answering. Seaside, especially in combination with jQuery is such a wide field with so many options and unknown corners that an exchange like here on this group is so helpful!

Hang on with Smalltalk and Seaside,

Joachim
Reply | Threaded
Open this post in threaded view
|

Re: jQuery Ajax: do something before and after

jtuchel
Hi there,

I am back with this issue. I finally found the difference that renders these two options unusable. Once you wrap the submitButton into a form tag, the ajax thingie is screwed, at least in Chrome.

So there is a significant difference between this:

renderContentOn: html
	html textInput
		id: 'text';
		class: 'submit';
		with: 'Test für Ajax-Actions'.
		html submitButton 
			callback: [];
			onClick: (((html jQuery ajax)
				onBeforeSend: ((html jQuery class: 'submit') hide);
				callback: [self doSomeStuff];
				onComplete: ((html jQuery class: 'submit') show)));
			with: 'Test mit onBeforeSend'.


and this:

renderContentOn: html
   html form: [
	html textInput
		id: 'text';
		class: 'submit';
		with: 'Test für Ajax-Actions'.
        html submitButton 
	       callback: [];
			onClick: (((html jQuery ajax)
				onBeforeSend: ((html jQuery class: 'submit') hide);
				callback: [self doSomeStuff];
				onComplete: ((html jQuery class: 'submit') show)));
			with: 'Test mit onBeforeSend'].


While the first example works as expected, the button in a form doesn't in chrome.
Is this a known limitation that I should have been aware of? Is there any reason for this difference in behavior? How do other seasiders handle this? Are forms bad per se in conjunction with Ajax??? This woulkd be totally new to me...

Joachim


Reply | Threaded
Open this post in threaded view
|

Re: jQuery Ajax: do something before and after

jtuchel
Hmmm,

I sent this message using Nabble, and it seems it swallowed my code
samples that I had put between <raw> tags. I guess I have general
troubles when I wrap tags into between others ;-)))

Anyways: here are the two code samples, first the one that works:

renderContentOn: html
     html textInput
         id: 'text';
         class: 'submit';
         with: 'Test für Ajax-Actions'.
         html submitButton
             callback: [];
             onClick: (((html jQuery ajax)
                 onBeforeSend: ((html jQuery class: 'submit') hide);
                 callback: [self doSomeStuff];
                 onComplete: ((html jQuery class: 'submit') show)));
             with: 'Test mit onBeforeSend'.


and here is the one that doesn't:

renderContentOn: html
    html form: [
     html textInput
         id: 'text';
         class: 'submit';
         with: 'Test für Ajax-Actions'.
         html submitButton
            callback: [];
             onClick: (((html jQuery ajax)
                 onBeforeSend: ((html jQuery class: 'submit') hide);
                 callback: [self doSomeStuff];
                 onComplete: ((html jQuery class: 'submit') show)));
             with: 'Test mit onBeforeSend'].

The last one doesn't work in chrome and Safari. In Firefox it seems to
call the ajax callback very unreliably.

Any ideas?

Joachim


Am 19.03.13 14:18, schrieb jtuchel:

> Hi there,
>
> I am back with this issue. I finally found the difference that renders these
> two options unusable. Once you wrap the submitButton into a form tag, the
> ajax thingie is screwed, at least in Chrome.
>
> So there is a significant difference between this:
>
>
>
>
> and this:
>
>
>
>
> While the first example works as expected, the button in a form doesn't in
> chrome.
> Is this a known limitation that I should have been aware of? Is there any
> reason for this difference in behavior? How do other seasiders handle this?
> Are forms bad per se in conjunction with Ajax??? This woulkd be totally new
> to me...
>
> Joachim
>
>
>
>
>
>
> --
> View this message in context: http://forum.world.st/jQuery-Ajax-do-something-before-and-after-tp4664568p4677296.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: jQuery Ajax: do something before and after

jtuchel
So maybe I should spend a few more words on what I mean by "working".

My intention is to hide certain cotrols on screen while a longer running
ajax call is being executed. After the callback was completed, the
controls should come back.
When I say it's not working, I mean that the ajax callback is executed,
even in Chrome, but the hiding of controls doesn't happen.

Once I've got this running reliably on at least four different browsers,
I really want to use some "please wait" lightbox dialog, but I wanted to
start simple - and failed...

Joachim

Am 19.03.13 14:23, schrieb [hidden email]:

> Hmmm,
>
> I sent this message using Nabble, and it seems it swallowed my code
> samples that I had put between <raw> tags. I guess I have general
> troubles when I wrap tags into between others ;-)))
>
> Anyways: here are the two code samples, first the one that works:
>
> renderContentOn: html
>     html textInput
>         id: 'text';
>         class: 'submit';
>         with: 'Test für Ajax-Actions'.
>         html submitButton
>             callback: [];
>             onClick: (((html jQuery ajax)
>                 onBeforeSend: ((html jQuery class: 'submit') hide);
>                 callback: [self doSomeStuff];
>                 onComplete: ((html jQuery class: 'submit') show)));
>             with: 'Test mit onBeforeSend'.
>
>
> and here is the one that doesn't:
>
> renderContentOn: html
>    html form: [
>     html textInput
>         id: 'text';
>         class: 'submit';
>         with: 'Test für Ajax-Actions'.
>         html submitButton
>            callback: [];
>             onClick: (((html jQuery ajax)
>                 onBeforeSend: ((html jQuery class: 'submit') hide);
>                 callback: [self doSomeStuff];
>                 onComplete: ((html jQuery class: 'submit') show)));
>             with: 'Test mit onBeforeSend'].
>
> The last one doesn't work in chrome and Safari. In Firefox it seems to
> call the ajax callback very unreliably.
>
> Any ideas?
>
> Joachim
>
>
> Am 19.03.13 14:18, schrieb jtuchel:
>> Hi there,
>>
>> I am back with this issue. I finally found the difference that
>> renders these
>> two options unusable. Once you wrap the submitButton into a form tag,
>> the
>> ajax thingie is screwed, at least in Chrome.
>>
>> So there is a significant difference between this:
>>
>>
>>
>>
>> and this:
>>
>>
>>
>>
>> While the first example works as expected, the button in a form
>> doesn't in
>> chrome.
>> Is this a known limitation that I should have been aware of? Is there
>> any
>> reason for this difference in behavior? How do other seasiders handle
>> this?
>> Are forms bad per se in conjunction with Ajax??? This woulkd be
>> totally new
>> to me...
>>
>> Joachim
>>
>>
>>
>>
>>
>>
>> --
>> View this message in context:
>> http://forum.world.st/jQuery-Ajax-do-something-before-and-after-tp4664568p4677296.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
>

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

Re: jQuery Ajax: do something before and after

Ryan Simmons-2
Adding return: false should work. It you want to stop the default submit action and have the button act as ajax only.

renderContentOn: html

   html form: [
    html textInput
        id: 'text';
        class: 'submit';
        with: 'Test für Ajax-Actions'.
        html submitButton
           callback: [];
            onClick: (((html jQuery ajax)
                onBeforeSend: ((html jQuery class: 'submit') hide);
                callback: [self doSomeStuff];
                onComplete: ((html jQuery class: 'submit') show);
                return: false));
            with: 'Test mit onBeforeSend'].


On 19 March 2013 15:41, [hidden email] <[hidden email]> wrote:
So maybe I should spend a few more words on what I mean by "working".

My intention is to hide certain cotrols on screen while a longer running ajax call is being executed. After the callback was completed, the controls should come back.
When I say it's not working, I mean that the ajax callback is executed, even in Chrome, but the hiding of controls doesn't happen.

Once I've got this running reliably on at least four different browsers, I really want to use some "please wait" lightbox dialog, but I wanted to start simple - and failed...

Joachim

Am 19.03.13 14:23, schrieb [hidden email]:

Hmmm,

I sent this message using Nabble, and it seems it swallowed my code samples that I had put between <raw> tags. I guess I have general troubles when I wrap tags into between others ;-)))

Anyways: here are the two code samples, first the one that works:

renderContentOn: html
    html textInput
        id: 'text';
        class: 'submit';
        with: 'Test für Ajax-Actions'.
        html submitButton
            callback: [];
            onClick: (((html jQuery ajax)
                onBeforeSend: ((html jQuery class: 'submit') hide);
                callback: [self doSomeStuff];
                onComplete: ((html jQuery class: 'submit') show)));
            with: 'Test mit onBeforeSend'.


and here is the one that doesn't:

renderContentOn: html
   html form: [
    html textInput
        id: 'text';
        class: 'submit';
        with: 'Test für Ajax-Actions'.
        html submitButton
           callback: [];
            onClick: (((html jQuery ajax)
                onBeforeSend: ((html jQuery class: 'submit') hide);
                callback: [self doSomeStuff];
                onComplete: ((html jQuery class: 'submit') show)));
            with: 'Test mit onBeforeSend'].

The last one doesn't work in chrome and Safari. In Firefox it seems to call the ajax callback very unreliably.

Any ideas?

Joachim


Am 19.03.13 14:18, schrieb jtuchel:
Hi there,

I am back with this issue. I finally found the difference that renders these
two options unusable. Once you wrap the submitButton into a form tag, the
ajax thingie is screwed, at least in Chrome.

So there is a significant difference between this:




and this:




While the first example works as expected, the button in a form doesn't in
chrome.
Is this a known limitation that I should have been aware of? Is there any
reason for this difference in behavior? How do other seasiders handle this?
Are forms bad per se in conjunction with Ajax??? This woulkd be totally new
to me...

Joachim






--
View this message in context: http://forum.world.st/jQuery-Ajax-do-something-before-and-after-tp4664568p4677296.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


_______________________________________________
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: jQuery Ajax: do something before and after

jtuchel
Hi Ryan,

you are right. Adding  return: false to the ajax object is exactly the
right thing to do. I feel so stupid.

So this brings me to my next problem: How would I do one of the
following (which I did in the submitButton's callback block):
* navigate to another component (usign show:, for example)
* Re-render teh component itself (which is what I did before: I just had
an empty callback and the component would re-render itself based on
state that was changed in the ajax callback)

Joachim

Am 19.03.13 14:50, schrieb Ryan Simmons:

> Adding return: false should work. It you want to stop the default
> submit action and have the button act as ajax only.
>
> renderContentOn: html
>  html form: [
> html textInput
>   id: 'text';
>   class: 'submit';
>   with: 'Test für Ajax-Actions'.
>   html submitButton
>      callback: [];
>       onClick: (((html jQuery ajax)
>           onBeforeSend: ((html jQuery class: 'submit') hide);
>           callback: [self doSomeStuff];
>           onComplete: ((html jQuery class: 'submit') show);
>             return: false));
>         with: 'Test mit onBeforeSend'].
>
>
> On 19 March 2013 15:41, [hidden email]
> <mailto:[hidden email]> <[hidden email]
> <mailto:[hidden email]>> wrote:
>
>     So maybe I should spend a few more words on what I mean by "working".
>
>     My intention is to hide certain cotrols on screen while a longer
>     running ajax call is being executed. After the callback was
>     completed, the controls should come back.
>     When I say it's not working, I mean that the ajax callback is
>     executed, even in Chrome, but the hiding of controls doesn't happen.
>
>     Once I've got this running reliably on at least four different
>     browsers, I really want to use some "please wait" lightbox dialog,
>     but I wanted to start simple - and failed...
>
>     Joachim
>
>     Am 19.03.13 14:23, schrieb [hidden email]
>     <mailto:[hidden email]>:
>
>         Hmmm,
>
>         I sent this message using Nabble, and it seems it swallowed my
>         code samples that I had put between <raw> tags. I guess I have
>         general troubles when I wrap tags into between others ;-)))
>
>         Anyways: here are the two code samples, first the one that works:
>
>         renderContentOn: html
>             html textInput
>                 id: 'text';
>                 class: 'submit';
>                 with: 'Test für Ajax-Actions'.
>                 html submitButton
>                     callback: [];
>                     onClick: (((html jQuery ajax)
>                         onBeforeSend: ((html jQuery class: 'submit')
>         hide);
>                         callback: [self doSomeStuff];
>                         onComplete: ((html jQuery class: 'submit')
>         show)));
>                     with: 'Test mit onBeforeSend'.
>
>
>         and here is the one that doesn't:
>
>         renderContentOn: html
>            html form: [
>             html textInput
>                 id: 'text';
>                 class: 'submit';
>                 with: 'Test für Ajax-Actions'.
>                 html submitButton
>                    callback: [];
>                     onClick: (((html jQuery ajax)
>                         onBeforeSend: ((html jQuery class: 'submit')
>         hide);
>                         callback: [self doSomeStuff];
>                         onComplete: ((html jQuery class: 'submit')
>         show)));
>                     with: 'Test mit onBeforeSend'].
>
>         The last one doesn't work in chrome and Safari. In Firefox it
>         seems to call the ajax callback very unreliably.
>
>         Any ideas?
>
>         Joachim
>
>
>         Am 19.03.13 14:18, schrieb jtuchel:
>
>             Hi there,
>
>             I am back with this issue. I finally found the difference
>             that renders these
>             two options unusable. Once you wrap the submitButton into
>             a form tag, the
>             ajax thingie is screwed, at least in Chrome.
>
>             So there is a significant difference between this:
>
>
>
>
>             and this:
>
>
>
>
>             While the first example works as expected, the button in a
>             form doesn't in
>             chrome.
>             Is this a known limitation that I should have been aware
>             of? Is there any
>             reason for this difference in behavior? How do other
>             seasiders handle this?
>             Are forms bad per se in conjunction with Ajax??? This
>             woulkd be totally new
>             to me...
>
>             Joachim
>
>
>
>
>
>
>             --
>             View this message in context:
>             http://forum.world.st/jQuery-Ajax-do-something-before-and-after-tp4664568p4677296.html
>             Sent from the Seaside General mailing list archive at
>             Nabble.com.
>             _______________________________________________
>             seaside mailing list
>             [hidden email]
>             <mailto:[hidden email]>
>             http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
>         _______________________________________________
>         seaside mailing list
>         [hidden email]
>         <mailto:[hidden email]>
>         http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
>     _______________________________________________
>     seaside mailing list
>     [hidden email]
>     <mailto:[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

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

Re: jQuery Ajax: do something before and after

Johan Brichau-2
Hi Joachim,

> So this brings me to my next problem: How would I do one of the following (which I did in the submitButton's callback block):
> * navigate to another component (usign show:, for example)

Since the ajax callback in your code snippet is an ajax action callback, you will need to do something different to get at something like the component call behavior in Seaside.
I have not actually tested this, but this is what I can think of:

        html submitButton
             callback: [];
             onClick: (((html jQuery ajax)
                       onBeforeSend: ((html jQuery class: 'submit') hide);
                       script: [:s | s << (s javascript callback:[self show: SomeComponent new])];
                       onComplete: ((html jQuery class: 'submit') show)) return: false).

But the snippet becomes a bit weird because you are triggering a full-page request (using #show:) _and_ you want to reshow the submit button on the previous page?
If you wanted to have a full page rerender anyway, but only were trying to hide the submit button so it does not get clicked twice, you can do it like this:

        html submitButton
             callback: [self show: WAMultiCounter new];
             onClick: (html jQuery class: 'submit') hide

The above assumes that the submit button is the nested in a form and that the browser triggers the onclick event handler _before_ executing the default action. This should be the case but I have not verified.

> * Re-render teh component itself (which is what I did before: I just had an empty callback and the component would re-render itself based on state that was changed in the ajax callback)

Right, this is because an actual submit happened before you included the 'return false' ?
But if you want to re-render the entire component, why bother using ajax?

Sorry if I misinterpret your intentions. I'm happy to help out but I'm puzzled by what you are trying to do ;-)

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

Re: jQuery Ajax: do something before and after

jtuchel
Hi Johan,

first of all: thanks fpr commenting. My code was just a simplification
of what I want to achieve. I wanted to do the simplest thing that I
could do for a before/after example, just to make sure I am not stuck
somewhere completely different than I thought.

My real goal is/was to open a progress dialog during a longer running
ajax call and show some success/failure information afterwards. This
success/failure dialog should then answer: and return the the component
the user came from. So sorry if my example as a whole didn't make sense.

In essence, I somehow completely failed to understand why the submit
action of a form submit button would be happening before the ajax call
is finished. Even though I know that ajax calls are asynchronous. The
fact that I have onBeforeSend and anComplete handlers wrappered around
it, doesn't make it any more synchronous of course. So your comment is
absolutely spot on! Thanks for that.

Building on top of the "return: false" trick, I could solve my problem -
at least in a manner good enough for a prototype.

Thanks again

Joachim


Am 24.03.13 13:57, schrieb Johan Brichau:

> Hi Joachim,
>
>> So this brings me to my next problem: How would I do one of the following (which I did in the submitButton's callback block):
>> * navigate to another component (usign show:, for example)
> Since the ajax callback in your code snippet is an ajax action callback, you will need to do something different to get at something like the component call behavior in Seaside.
> I have not actually tested this, but this is what I can think of:
>
> html submitButton
>               callback: [];
>               onClick: (((html jQuery ajax)
>                         onBeforeSend: ((html jQuery class: 'submit') hide);
>                         script: [:s | s << (s javascript callback:[self show: SomeComponent new])];
>                         onComplete: ((html jQuery class: 'submit') show)) return: false).
>
> But the snippet becomes a bit weird because you are triggering a full-page request (using #show:) _and_ you want to reshow the submit button on the previous page?
> If you wanted to have a full page rerender anyway, but only were trying to hide the submit button so it does not get clicked twice, you can do it like this:
>
> html submitButton
>               callback: [self show: WAMultiCounter new];
>               onClick: (html jQuery class: 'submit') hide
>
> The above assumes that the submit button is the nested in a form and that the browser triggers the onclick event handler _before_ executing the default action. This should be the case but I have not verified.
>
>> * Re-render teh component itself (which is what I did before: I just had an empty callback and the component would re-render itself based on state that was changed in the ajax callback)
> Right, this is because an actual submit happened before you included the 'return false' ?
> But if you want to re-render the entire component, why bother using ajax?
>
> Sorry if I misinterpret your intentions. I'm happy to help out but I'm puzzled by what you are trying to do ;-)
>
> best
> Johan_______________________________________________
> 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