JQuery updating DOM elements
Locked
 
|
On a JQuery dialog, I would like to update the text input fields with default data, based on the data entered in the first field. I have the following code for the first field :-
html span class: 'formdata'; with: [html
textInput id: #tournamentname; value: tournamentEvent tournamentName;
callback: [:value | tournamentEvent tournamentName: value. self test: value on: html]; onChange: (html jQuery ajax serializeThis)].
test: value on: html (html jQuery: #potsize) html: DateAndTime now
#potsize is the id: of another field in the dialog. My callback works, but the DOM is not updated. What is the correct way to update other DOM elements in this fashion? Thanks.
-- -JT _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: JQuery updating DOM elements
|
|
> html span class: 'formdata'; with: [html
> textInput > id: #tournamentname; > value: tournamentEvent tournamentName; > callback: [:value | tournamentEvent tournamentName: value. self test: value > on: html]; > onChange: (html jQuery ajax serializeThis)]. html is not valid in the context of a callback. When the callback is evaluated the response connected to the html canvas you are referring to has already been sent to the client. Slime would detect such mistakes. > #potsize is the id: of another field in the dialog. My callback works, but > the DOM is not updated. What is the correct way to update other DOM elements > in this fashion? Try something along: onChange: (html jQuery ajax serializeThis; html: [ :r | " gee, we have a new renderer " r render: DateAndTime now ]) Lukas -- Lukas Renggli http://www.lukas-renggli.ch _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: JQuery updating DOM elements
|
|
- How do I use Slime with my Code? Using the latest Pharo image, and have found the Slime classes, but not sure how to use them.
- Tried this :- html span class: 'formdata'; with: [html
textInput id: #tournamentname; value: tournamentEvent tournamentName;
callback: [:value | tournamentEvent tournamentName: value]; onChange: (html jQuery ajax serializeThis; html: [:r | r render: [self test: 1 on: r]] )].
but cannot see any changes to the DOM element. Thanks for looking at this for me. On Tue, Feb 10, 2009 at 3:18 PM, Lukas Renggli <[hidden email]> wrote:
-- -JT _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: JQuery updating DOM elements
|
|
> - How do I use Slime with my Code? Using the latest Pharo image, and have
> found the Slime classes, but not sure how to use them. http://www.lukas-renggli.ch/blog/slime > - Tried this :- > html span class: 'formdata'; with: [html > textInput > id: #tournamentname; > value: tournamentEvent tournamentName; > callback: [:value | tournamentEvent tournamentName: value]; > onChange: (html jQuery ajax serializeThis; html: [:r | r render: [self test: > 1 on: r]] )]. You need to specify somewhere what element to change, right? - You can either do that by sending back a javascript that does the update of the particular element. In this case you would replace "html: [ :r | .. ]" with something like "script: [ :s | s << (s jQuery: '.someid') html: DateAndTime now ]". This is very powerful, but also a bit complicated. - Or (and this is probably what you want) you can use the ajax-loader on the particular DOM node. So just replace "html jQuery ajax" with "(html jQuery: '.someid') load". Lukas -- Lukas Renggli http://www.lukas-renggli.ch _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: JQuery updating DOM elements
|
|
In reply to this post by John Toohey-2
Its easy to mistake putting an html into #onChange: method.
It is also confusing to read, because you seeing both, html rendering source, and callback script/ajax rendering in the same method body , and its easy to make a mistake and mix contexts. Maybe it worth considering about adding a different form of it? html ajax on: #change send: #onMyDivChangeCallback: to: self so, then in onMyDivChangeCallback: you can provide html rendering for ajax request, and you can't use different html canvas other than passed to this method. Safe & clean. 2009/2/10 John Toohey <[hidden email]>: > - How do I use Slime with my Code? Using the latest Pharo image, and have > found the Slime classes, but not sure how to use them. > - Tried this :- > html span class: 'formdata'; with: [html > textInput > id: #tournamentname; > value: tournamentEvent tournamentName; > callback: [:value | tournamentEvent tournamentName: value]; > onChange: (html jQuery ajax serializeThis; html: [:r | r render: [self test: > 1 on: r]] )]. > but cannot see any changes to the DOM element. > Thanks for looking at this for me. > > On Tue, Feb 10, 2009 at 3:18 PM, Lukas Renggli <[hidden email]> wrote: >> >> > html span class: 'formdata'; with: [html >> > textInput >> > id: #tournamentname; >> > value: tournamentEvent tournamentName; >> > callback: [:value | tournamentEvent tournamentName: value. self test: >> > value >> > on: html]; >> > onChange: (html jQuery ajax serializeThis)]. >> >> html is not valid in the context of a callback. When the callback is >> evaluated the response connected to the html canvas you are referring >> to has already been sent to the client. Slime would detect such >> mistakes. >> >> > #potsize is the id: of another field in the dialog. My callback works, >> > but >> > the DOM is not updated. What is the correct way to update other DOM >> > elements >> > in this fashion? >> >> Try something along: >> >> onChange: (html jQuery ajax >> serializeThis; >> html: [ :r | >> " gee, we have a new renderer " >> r render: DateAndTime now ]) >> >> Lukas >> >> -- >> Lukas Renggli >> http://www.lukas-renggli.ch >> _______________________________________________ >> seaside mailing list >> [hidden email] >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > > > -- > -JT > > > > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > -- Best regards, Igor Stasenko AKA sig. _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: JQuery updating DOM elements
|
|
In reply to this post by Lukas Renggli
Changed the code to this :-
html span class: 'formdata'; with: [html textInput
id: #tournamentname; value: tournamentEvent tournamentName; callback: [:value | tournamentEvent tournamentName: value];
onChange: ((html jQuery: #potsize) load html: [:h | h render: 999 ])]. Now I'm just trying to change the default value of #potsize to 999, and I can see the initial request being sent to the server, but nothing is updated on the client.
I tried to load the Slime package from your site, but received a lot of errors from my Pharo image. I can run the Slime tests that are included with Seaside 2.9 successfully, but can't see how to run Slime on my own code.
Any help is really appreciated. Thanks. On Tue, Feb 10, 2009 at 4:09 PM, Lukas Renggli <[hidden email]> wrote:
-- -JT _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: JQuery updating DOM elements
|
|
Changed the code to this, and now it works :-
html span class: 'formdata'; with: [html textInput
id: #tournamentname; value: 'DefaultName'; value: tournamentEvent tournamentName;
callback: [:value | tournamentEvent tournamentName: value]; onChange:(html jQuery ajax script: [ :s | s << (s jQuery: #potsize) value: 999])
]. On Wed, Feb 11, 2009 at 1:56 PM, John Toohey <[hidden email]> wrote: Changed the code to this :- -- -JT _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: JQuery updating DOM elements
|
|
In reply to this post by John Toohey-2
> Changed the code to this :-
> html span class: 'formdata'; with: [html > textInput > id: #tournamentname; > value: tournamentEvent tournamentName; > callback: [:value | tournamentEvent tournamentName: value]; > onChange: ((html jQuery: #potsize) load html: [:h | h render: 999 ])]. > Now I'm just trying to change the default value of #potsize to 999, and I > can see the initial request being sent to the server, but nothing is updated > on the client. I removed all the noise around it, and it works for me: html span id: 'potsize'. html textInput onChange: ((html jQuery: #potsize) load html: [:h | h render: 999 ]) > I tried to load the Slime package from your site, but received a lot of > errors from my Pharo image. I can run the Slime tests that are included with > Seaside 2.9 successfully, but can't see how to run Slime on my own code. I show how to run any of the refactoring tools on a particular set of methods only in the screen-cast here: http://www.lukas-renggli.ch/blog/ob-rb-3 Lukas > Any help is really appreciated. > Thanks. > On Tue, Feb 10, 2009 at 4:09 PM, Lukas Renggli <[hidden email]> wrote: >> >> > - How do I use Slime with my Code? Using the latest Pharo image, and >> > have >> > found the Slime classes, but not sure how to use them. >> >> http://www.lukas-renggli.ch/blog/slime >> >> > - Tried this :- >> > html span class: 'formdata'; with: [html >> > textInput >> > id: #tournamentname; >> > value: tournamentEvent tournamentName; >> > callback: [:value | tournamentEvent tournamentName: value]; >> > onChange: (html jQuery ajax serializeThis; html: [:r | r render: [self >> > test: >> > 1 on: r]] )]. >> >> You need to specify somewhere what element to change, right? >> >> - You can either do that by sending back a javascript that does the >> update of the particular element. In this case you would replace >> "html: [ :r | .. ]" with something like "script: [ :s | s << (s >> jQuery: '.someid') html: DateAndTime now ]". This is very powerful, >> but also a bit complicated. >> >> - Or (and this is probably what you want) you can use the ajax-loader >> on the particular DOM node. So just replace "html jQuery ajax" with >> "(html jQuery: '.someid') load". >> >> Lukas >> >> -- >> Lukas Renggli >> http://www.lukas-renggli.ch >> _______________________________________________ >> seaside mailing list >> [hidden email] >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > > > -- > -JT > > > > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > -- Lukas Renggli http://www.lukas-renggli.ch _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: JQuery updating DOM elements
|
|
Great screencast, thanks.
Does #load set the value of the DOM element, and is it preferable to use the #script for updating a form? On Wed, Feb 11, 2009 at 3:21 PM, Lukas Renggli <[hidden email]> wrote:
-- -JT _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: JQuery updating DOM elements
|
|
#load only replaces HTML Dom nodes.
#ajax and #script: allows you to just change the value of the form field by using #value:, which is in your case probably preferable because the callback of the form element is not recreated. Lukas On Wed, Feb 11, 2009 at 9:58 PM, John Toohey <[hidden email]> wrote: > Great screencast, thanks. > Does #load set the value of the DOM element, and is it preferable to use the > #script for updating a form? > > On Wed, Feb 11, 2009 at 3:21 PM, Lukas Renggli <[hidden email]> wrote: >> >> > Changed the code to this :- >> > html span class: 'formdata'; with: [html >> > textInput >> > id: #tournamentname; >> > value: tournamentEvent tournamentName; >> > callback: [:value | tournamentEvent tournamentName: value]; >> > onChange: ((html jQuery: #potsize) load html: [:h | h render: 999 ])]. >> > Now I'm just trying to change the default value of #potsize to 999, and >> > I >> > can see the initial request being sent to the server, but nothing is >> > updated >> > on the client. >> >> I removed all the noise around it, and it works for me: >> >> html span id: 'potsize'. >> html textInput >> onChange: ((html jQuery: #potsize) load >> html: [:h | h render: 999 ]) >> >> > I tried to load the Slime package from your site, but received a lot of >> > errors from my Pharo image. I can run the Slime tests that are included >> > with >> > Seaside 2.9 successfully, but can't see how to run Slime on my own code. >> >> I show how to run any of the refactoring tools on a particular set of >> methods only in the screen-cast here: >> >> http://www.lukas-renggli.ch/blog/ob-rb-3 >> >> Lukas >> >> > Any help is really appreciated. >> > Thanks. >> > On Tue, Feb 10, 2009 at 4:09 PM, Lukas Renggli <[hidden email]> >> > wrote: >> >> >> >> > - How do I use Slime with my Code? Using the latest Pharo image, and >> >> > have >> >> > found the Slime classes, but not sure how to use them. >> >> >> >> http://www.lukas-renggli.ch/blog/slime >> >> >> >> > - Tried this :- >> >> > html span class: 'formdata'; with: [html >> >> > textInput >> >> > id: #tournamentname; >> >> > value: tournamentEvent tournamentName; >> >> > callback: [:value | tournamentEvent tournamentName: value]; >> >> > onChange: (html jQuery ajax serializeThis; html: [:r | r render: >> >> > [self >> >> > test: >> >> > 1 on: r]] )]. >> >> >> >> You need to specify somewhere what element to change, right? >> >> >> >> - You can either do that by sending back a javascript that does the >> >> update of the particular element. In this case you would replace >> >> "html: [ :r | .. ]" with something like "script: [ :s | s << (s >> >> jQuery: '.someid') html: DateAndTime now ]". This is very powerful, >> >> but also a bit complicated. >> >> >> >> - Or (and this is probably what you want) you can use the ajax-loader >> >> on the particular DOM node. So just replace "html jQuery ajax" with >> >> "(html jQuery: '.someid') load". >> >> >> >> Lukas >> >> >> >> -- >> >> Lukas Renggli >> >> http://www.lukas-renggli.ch >> >> _______________________________________________ >> >> seaside mailing list >> >> [hidden email] >> >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >> > >> > >> > >> > -- >> > -JT >> > >> > >> > >> > _______________________________________________ >> > seaside mailing list >> > [hidden email] >> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >> > >> > >> >> >> >> -- >> Lukas Renggli >> http://www.lukas-renggli.ch >> _______________________________________________ >> seaside mailing list >> [hidden email] >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > > > -- > -JT > > > > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > -- Lukas Renggli http://www.lukas-renggli.ch _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: JQuery updating DOM elements
|
|
Got it. Thanks again for your patience and help. I'm starting to really get my head around the JQuery support now, great addition to an already superb web framework.
On Wed, Feb 11, 2009 at 4:07 PM, Lukas Renggli <[hidden email]> wrote: #load only replaces HTML Dom nodes. -- -JT _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
In reply to this post by Lukas Renggli
On Wed, Feb 11, 2009 at 9:21 PM, Lukas Renggli <[hidden email]> wrote:
Hi, is there a simple way to do the same trick with old 2.8 and scriptaculous & prototype? rush _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: JQuery updating DOM elements
|
|
>> I removed all the noise around it, and it works for me:
>> >> html span id: 'potsize'. >> html textInput >> onChange: ((html jQuery: #potsize) load >> html: [:h | h render: 999 ]) >> > > Hi, is there a simple way to do the same trick with old 2.8 and > scriptaculous & prototype? Sure (untested and directly written in the web browser, as usual): html span id: 'potsize'. html textInput onChange: (html updater id: 'potsize'; callback: [ :h | h render: 999 ]) See SUFormTest has functional tests for all input elements. Similar JQFormTest is the equivalent for JQuery. Unfortunately these tests are a bit obscure, because I did not want to duplicate code across all different form elements. Lukas -- Lukas Renggli http://www.lukas-renggli.ch _______________________________________________ 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 |