jQuery Ajax: do something before and after
Locked
 
|
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 |
Re: jQuery Ajax: do something before and after
|
|
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 |
Re: jQuery Ajax: do something before and after
|
|
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]>
_______________________________________________ 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 |
Re: jQuery Ajax: do something before and after
|
|
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'. And I create an project http://smalltalkhub.com/#!/~GastonDallOglio/TBootstrap 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]>
_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
Re: jQuery Ajax: do something before and after
|
|
Adding return: false should work. It you want to stop the default submit action and have the button act as ajax only. 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". _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
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 |
Re: jQuery Ajax: do something before and after
|
|
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 |
|
|
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 |
«
Return to Seaside General
|
1 view|%1 views
| Free forum by Nabble | Edit this page |