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 gaston.dalloglio@gmail.com

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 (). And see here: http://twitter.github.com/bootstrap/javascript.html#buttons

Regards.

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

2013/1/22 Paul DeBruicker pdebruic@gmail.com

...

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 seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

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-tp4664568p46... Sent from the Seaside General mailing list archive at Nabble.com.

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 jtuchel@objektfabrik.de:

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-tp4664568p46... Sent from the Seaside General mailing list archive at Nabble.com. _______________________________________________ seaside mailing list seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

---

seaside mailing list seaside@lists.squeakfoundation.org 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, jtuchel@objektfabrik.de mailto:jtuchel@objektfabrik.de <jtuchel@objektfabrik.de mailto:jtuchel@objektfabrik.de> 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 jtuchel@objektfabrik.de
<mailto:jtuchel@objektfabrik.de>:

    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
        seaside@lists.squeakfoundation.org
        <mailto:seaside@lists.squeakfoundation.org>
        http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside


    _______________________________________________
    seaside mailing list
    seaside@lists.squeakfoundation.org
    <mailto:seaside@lists.squeakfoundation.org>
    http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside


_______________________________________________
seaside mailing list
seaside@lists.squeakfoundation.org
<mailto:seaside@lists.squeakfoundation.org>
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

---

seaside mailing list seaside@lists.squeakfoundation.org 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 seaside@lists.squeakfoundation.org http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside