Click, Replace and Submit

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

Click, Replace and Submit

laza
Hi!

I'm trying to do something like this: In a Form a Submit Button should be replaced by the String "Processing" when the user submits the form.

What I tried was this (in renderContentOn:):

[...]
        html submitButton
            id: #submit;
            onClick: ((html jQuery id: #submit) replaceWith: 'Processing');
            on: #save of: self]
[...]

This will replace the buttion with the text "Processing", but the form will not be submitted. On the other hand this works

[...]
        html submitButton
            id: #submit;
            onClick: ((html jQuery id: #submit) hide);
            on: #save of: self]
[...]

I tried various other things but to no avail. What am I missing?

Alex

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

Re: Click, Replace and Submit

Lukas Renggli
> I'm trying to do something like this: In a Form a Submit Button should be
> replaced by the String "Processing" when the user submits the form.
>
> What I tried was this (in renderContentOn:):
>
> [...]
>         html submitButton
>             id: #submit;
>             onClick: ((html jQuery id: #submit) replaceWith: 'Processing');
>             on: #save of: self]
> [...]

This removes the button from the page, before the form is actually submitted.

Lukas

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

Re: Click, Replace and Submit

laza
2011/8/2 Lukas Renggli <[hidden email]>
This removes the button from the page, before the form is actually submitted.

Ok, so how can I replace the button by some other element (text/image) and trigger an explicit submit? I could have missed that in the docs, so please feel free to point me to some page explaining this!

In the meantime I can live with this. It's not as nice as I intended it, but it works for now:

            onClick: ((html jQuery id: #submit) value: 'Processing'; attributeAt: #disabled put: #true);

Thanks, Alex

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

Re: Click, Replace and Submit

Lukas Renggli
>> This removes the button from the page, before the form is actually
>> submitted.
>
> Ok, so how can I replace the button by some other element (text/image) and
> trigger an explicit submit? I could have missed that in the docs, so please
> feel free to point me to some page explaining this!

This has nothing to do with JQuery and/or Seaside, this is just HTTP,
HTML and JavaScript. The form submission is part of the browser event
handling of the button, but your click handler interfers with this
when you remove the button.

> In the meantime I can live with this. It's not as nice as I intended it, but
> it works for now:
>
>             onClick: ((html jQuery id: #submit) value: 'Processing';
> attributeAt: #disabled put: #true);

Not sure, but I would say that doesn't work either: disabled buttons
typically do not trigger a form submission.

Also, why do you write '#true' instead of 'true'?

Lukas

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

RE: Click, Replace and Submit

Robert Sirois
Are you trying to query the server for validation before submitting or have client-side javascript to the validation?

Here's some ideas:

#onClick: ((html jQuery: #submit) html: 'Processing').
#onClick: (html jQuery ajax callback: [ "function" ]; onSuccess: ((html jQuery: #form) html: 'Thank you!'; addClass: 'ui-state-highlight').

RS

> From: [hidden email]

> Date: Tue, 2 Aug 2011 16:29:19 +0200
> Subject: Re: [Seaside] Click, Replace and Submit
> To: [hidden email]
>
> >> This removes the button from the page, before the form is actually
> >> submitted.
> >
> > Ok, so how can I replace the button by some other element (text/image) and
> > trigger an explicit submit? I could have missed that in the docs, so please
> > feel free to point me to some page explaining this!
>
> This has nothing to do with JQuery and/or Seaside, this is just HTTP,
> HTML and JavaScript. The form submission is part of the browser event
> handling of the button, but your click handler interfers with this
> when you remove the button.
>
> > In the meantime I can live with this. It's not as nice as I intended it, but
> > it works for now:
> >
> >             onClick: ((html jQuery id: #submit) value: 'Processing';
> > attributeAt: #disabled put: #true);
>
> Not sure, but I would say that doesn't work either: disabled buttons
> typically do not trigger a form submission.
>
> Also, why do you write '#true' instead of 'true'?
>
> Lukas
>
> --
> Lukas Renggli
> www.lukas-renggli.ch
> _______________________________________________
> 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
|

Click, Replace and Submit

Louis LaBrunda
In reply to this post by laza
Hi Alex,

How about defining both the text you want to see (label: or what ever) and
the button, with the text hidden and the button showing.  Then in the
onClick, show the text and hide the button.

Lou


>2011/8/2 Lukas Renggli <[hidden email]>
>
>> This removes the button from the page, before the form is actually
>> submitted.
>>
>
>Ok, so how can I replace the button by some other element (text/image) and
>trigger an explicit submit? I could have missed that in the docs, so please
>feel free to point me to some page explaining this!
>
>In the meantime I can live with this. It's not as nice as I intended it, but
>it works for now:
>
>            onClick: ((html jQuery id: #submit) value: 'Processing';
>attributeAt: #disabled put: #true);
>
>Thanks, Alex
-----------------------------------------------------------
Louis LaBrunda
Keystone Software Corp.
SkypeMe callto://PhotonDemon
mailto:[hidden email] http://www.Keystone-Software.com

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

Re: Click, Replace and Submit

jtuchel
In reply to this post by laza
HI,

why not use brute forca and submit the form after replacing the button?
Try something along the lines of:

onClick: ((html jQuery id: #submit) replaceWith: 'Processing'), (html jQuery ajax this) serializeForm);

I have no Smalltalk image at hand right now (my fingers are nervously shaking and my throat aches being away from one ;-) ), so there might be some addionatal brackets or stuff that's missing.

Let us know how it worked.

Joachim
Reply | Threaded
Open this post in threaded view
|

Re: Click, Replace and Submit

jtuchel
Sorry, typo:

onClick: ((html jQuery id: #submit) replaceWith: 'Processing'), (html jQuery ajax *removed*) serializeForm);
Reply | Threaded
Open this post in threaded view
|

Re: Click, Replace and Submit

laza
In reply to this post by Lukas Renggli
2011/8/2 Lukas Renggli <[hidden email]>
This has nothing to do with JQuery and/or Seaside, this is just HTTP,
HTML and JavaScript. The form submission is part of the browser event
handling of the button, but your click handler interfers with this
when you remove the button.

I guess I made some assumptions about how submit works instead. So I hacked this piece of html (wow that felt strange) to see what could work.

<html><head><title>Demo</title></head>
<body>
<form name="Person" action="http://de.selfhtml.org/cgi-bin/formview.pl">
<input type="text" id="lastname" size="30">
<input id="save" type="submit" onclick="dosubmit()" value="Save">
</form>
<script>
function dosubmit() {
  var button = document.getElementById("save");
  var text = document.createElement("span");
  text.innerHTML = "Progress";
  button.parentNode.replaceChild(text, button);
  document.Person.submit();
}
</script>
</body>

This does not work. I guess I can't do a submit once I changed dom structure of the form? So if that's not gonna work it's not gonna work using Seaside either.

>             onClick: ((html jQuery id: #submit) value: 'Processing';
> attributeAt: #disabled put: #true);

Not sure, but I would say that doesn't work either: disabled buttons
typically do not trigger a form submission.

Oh, that works. Maybe because the dom structure of the form hasn't changed only some attributes?
 
Also, why do you write '#true' instead of 'true'?

True. What was I thinking! ;)
I have to admit, that I still feel a bit confused about the jQuery, JS, Ajax stuff, so I thought setting some attribute "directly" needs to have a "literal" true.

Alex

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

Re: Click, Replace and Submit

laza
In reply to this post by Robert Sirois
2011/8/2 Robert Sirois <[hidden email]>
Are you trying to query the server for validation before submitting or have client-side javascript to the validation?

The embarrassing truth is, that the computation for the resulting page takes a noticeable time. And I want to inform the user, that a) something is happening b) "he shouldn't be pressing that button again"(TM).
I thought it would be good to replace the button with some of those spinning wheels you see elsewhere all over the place.
  
Here's some ideas:

#onClick: ((html jQuery: #submit) html: 'Processing').
#onClick: (html jQuery ajax callback: [ "function" ]; onSuccess: ((html jQuery: #form) html: 'Thank you!'; addClass: 'ui-state-highlight').

 I tried some simpler form of your suggestion with no success, but I guess I could try this again.

Thanks,
 Alex

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

Re: Click, Replace and Submit

laza
In reply to this post by Louis LaBrunda
Hi Lou!

2011/8/2 Louis LaBrunda <[hidden email]>
How about defining both the text you want to see (label: or what ever) and
the button, with the text hidden and the button showing.  Then in the
onClick, show the text and hide the button.

Thought about that too and I think that's the way to go.

Thanks,
 Alex

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

Re: Click, Replace and Submit

laza
Now I'm facing another problem. I'm using some JS libraries and on the first request all the <script> references are included in the page.
After I do submit a form the rerendered page is missing all those library references. I still can't figure out where this might go wrong.
Any suggestions?

Thanks,
 Alex

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

Re: Click, Replace and Submit

Johan Brichau-2
Alex,

What is the code you use to include the scripts? Where is it located?

And what is the callback that is executed on form submission?

On 03 Aug 2011, at 11:11, Alexander Lazarević wrote:

> Now I'm facing another problem. I'm using some JS libraries and on the first request all the <script> references are included in the page.
> After I do submit a form the rerendered page is missing all those library references. I still can't figure out where this might go wrong.
> Any suggestions?
>
> Thanks,
>  Alex
> _______________________________________________
> 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: Click, Replace and Submit

Robert Sirois
Johan probably has a point here. Make sure JQDeploymentLibrary and JQUiDeploymentLibrary (if you're using UI) are included in the libraries in the application config.

Otherwise, you can include them this way:

updateRoot: html
super updateRoot: html.

html javascript url: 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js'.
html javascript url: 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js'.
html stylesheet url: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/redmond/jquery-ui.css'.

RS

> Subject: Re: [Seaside] Click, Replace and Submit

> From: [hidden email]
> Date: Wed, 3 Aug 2011 11:59:56 +0200
> To: [hidden email]
>
> Alex,
>
> What is the code you use to include the scripts? Where is it located?
>
> And what is the callback that is executed on form submission?
>
> On 03 Aug 2011, at 11:11, Alexander Lazarević wrote:
>
> > Now I'm facing another problem. I'm using some JS libraries and on the first request all the <script> references are included in the page.
> > After I do submit a form the rerendered page is missing all those library references. I still can't figure out where this might go wrong.
> > Any suggestions?
> >
> > Thanks,
> > Alex
> > _______________________________________________
> > 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: Click, Replace and Submit

Johan Brichau-2
I didn't really want to make a point ;-)

We just need more information on the code to know what is wrong.

Johan

On 03 Aug 2011, at 16:51, Robert Sirois wrote:

> Johan probably has a point here. Make sure JQDeploymentLibrary and JQUiDeploymentLibrary (if you're using UI) are included in the libraries in the application config.
>
> Otherwise, you can include them this way:
>
> updateRoot: html
> super updateRoot: html.
>
> html javascript url: 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js'.
> html javascript url: 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js'.
> html stylesheet url: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/redmond/jquery-ui.css'.
>
> RS
>
> > Subject: Re: [Seaside] Click, Replace and Submit
> > From: [hidden email]
> > Date: Wed, 3 Aug 2011 11:59:56 +0200
> > To: [hidden email]
> >
> > Alex,
> >
> > What is the code you use to include the scripts? Where is it located?
> >
> > And what is the callback that is executed on form submission?
> >
> > On 03 Aug 2011, at 11:11, Alexander Lazarević wrote:
> >
> > > Now I'm facing another problem. I'm using some JS libraries and on the first request all the <script> references are included in the page.
> > > After I do submit a form the rerendered page is missing all those library references. I still can't figure out where this might go wrong.
> > > Any suggestions?
> > >
> > > Thanks,
> > > Alex
> > > _______________________________________________
> > > 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: Click, Replace and Submit

laza
Sorry for the delay guys, but I had to check first if I'm seeing this in Pharo too. ;)

While experimenting I added the JQAjaxifierLibrary to the application "just in case, can't hurt can it?"
After removing it again everything seems to be ok.
But the button trick won't work anymore, so Lukas was right there.

Anyway thanks for the help and sorry for the confusion.

Alex

2011/8/3 Johan Brichau <[hidden email]>
I didn't really want to make a point ;-)

We just need more information on the code to know what is wrong.

Johan

On 03 Aug 2011, at 16:51, Robert Sirois wrote:

> Johan probably has a point here. Make sure JQDeploymentLibrary and JQUiDeploymentLibrary (if you're using UI) are included in the libraries in the application config.
>
> Otherwise, you can include them this way:
>
> updateRoot: html
>       super updateRoot: html.
>
>       html javascript url: 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js'.
>       html javascript url: 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js'.
>       html stylesheet url: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/redmond/jquery-ui.css'.
>
> RS
>
> > Subject: Re: [Seaside] Click, Replace and Submit
> > From: [hidden email]
> > Date: Wed, 3 Aug 2011 11:59:56 +0200
> > To: [hidden email]
> >
> > Alex,
> >
> > What is the code you use to include the scripts? Where is it located?
> >
> > And what is the callback that is executed on form submission?
> >
> > On 03 Aug 2011, at 11:11, Alexander Lazarević wrote:
> >
> > > Now I'm facing another problem. I'm using some JS libraries and on the first request all the <script> references are included in the page.
> > > After I do submit a form the rerendered page is missing all those library references. I still can't figure out where this might go wrong.
> > > Any suggestions?
> > >
> > > Thanks,
> > > Alex
> > > _______________________________________________
> > > 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


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