HTML/Javascript list and Comet updating it's contents.
Locked
HTML/Javascript list and Comet updating it's contents.
 
|
Hi,
I am struggling to figure out a way to proceed. I want to have a list that displays elements from my model. When I add an element, I want to update the page with Comet. I searched the web for examples, but only found examples using other frameworks. I do not know how to begin. I don't think using orderedList, unorderedList or table is sufficient to do what I want. I don't see a way to add items to these lists. I am completely confused about how to render a list in Javascript. I am guessing I need an Array of values and a Table/TableRow/TableData to display them. Not sure how to do this nor add items. I am looking for example code. Any assistance would be greatly appreciated. Thanks, Rob _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: HTML/Javascript list and Comet updating it's contents.
|
|
There is an example application included with the comet package called
CTReport or something (I don't have an image at hand right now) that does exactly that. Lukas On Friday, October 8, 2010, Rob Withers <[hidden email]> wrote: > Hi, > > I am struggling to figure out a way to proceed. I want to have a list that displays elements from my model. When I add an element, I want to update the page with Comet. I searched the web for examples, but only found examples using other frameworks. I do not know how to begin. > > I don't think using orderedList, unorderedList or table is sufficient to do what I want. I don't see a way to add items to these lists. I am completely confused about how to render a list in Javascript. I am guessing I need an Array of values and a Table/TableRow/TableData to display them. Not sure how to do this nor add items. I am looking for example code. > > Any assistance would be greatly appreciated. > > Thanks, > Rob > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > -- Lukas Renggli www.lukas-renggli.ch _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: HTML/Javascript list and Comet updating it's contents.
|
|
Lukas,
Excellent! I checked out that example and it demonstrates how to display a list using javascript. What I don't see, and it could be staring me in the face, is a way to add new items (or remove them) with the list using Comet. Thanks, Rob -------------------------------------------------- From: "Lukas Renggli" <[hidden email]> Sent: Friday, October 08, 2010 5:03 PM To: "Seaside - general discussion" <[hidden email]> Subject: Re: [Seaside] HTML/Javascript list and Comet updating it's contents. > There is an example application included with the comet package called > CTReport or something (I don't have an image at hand right now) that > does exactly that. > > Lukas > > On Friday, October 8, 2010, Rob Withers <[hidden email]> wrote: >> Hi, >> >> I am struggling to figure out a way to proceed. I want to have a list >> that displays elements from my model. When I add an element, I want to >> update the page with Comet. I searched the web for examples, but only >> found examples using other frameworks. I do not know how to begin. >> >> I don't think using orderedList, unorderedList or table is sufficient to >> do what I want. I don't see a way to add items to these lists. I am >> completely confused about how to render a list in Javascript. I am >> guessing I need an Array of values and a Table/TableRow/TableData to >> display them. Not sure how to do this nor add items. I am looking for >> example code. >> >> Any assistance would be greatly appreciated. >> >> Thanks, >> Rob >> _______________________________________________ >> seaside mailing list >> [hidden email] >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >> > > -- > 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 |
Re: HTML/Javascript list and Comet updating it's contents.
|
|
Give me a second, I will try to extend the example.
Lukas On 9 October 2010 00:00, Rob Withers <[hidden email]> wrote: > Lukas, > > Excellent! I checked out that example and it demonstrates how to display a > list using javascript. What I don't see, and it could be staring me in the > face, is a way to add new items (or remove them) with the list using Comet. > > Thanks, > Rob > > -------------------------------------------------- > From: "Lukas Renggli" <[hidden email]> > Sent: Friday, October 08, 2010 5:03 PM > To: "Seaside - general discussion" <[hidden email]> > Subject: Re: [Seaside] HTML/Javascript list and Comet updating it's > contents. > >> There is an example application included with the comet package called >> CTReport or something (I don't have an image at hand right now) that >> does exactly that. >> >> Lukas >> >> On Friday, October 8, 2010, Rob Withers <[hidden email]> wrote: >>> >>> Hi, >>> >>> I am struggling to figure out a way to proceed. I want to have a list >>> that displays elements from my model. When I add an element, I want to >>> update the page with Comet. I searched the web for examples, but only found >>> examples using other frameworks. I do not know how to begin. >>> >>> I don't think using orderedList, unorderedList or table is sufficient to >>> do what I want. I don't see a way to add items to these lists. I am >>> completely confused about how to render a list in Javascript. I am guessing >>> I need an Array of values and a Table/TableRow/TableData to display them. >>> Not sure how to do this nor add items. I am looking for example code. >>> >>> Any assistance would be greatly appreciated. >>> >>> Thanks, >>> Rob >>> _______________________________________________ >>> seaside mailing list >>> [hidden email] >>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >>> >> >> -- >> 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 > -- Lukas Renggli www.lukas-renggli.ch _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: HTML/Javascript list and Comet updating it's contents.
|
|
Have a look at:
Name: Comet-Examples-lr.22 Author: lr Time: 9 October 2010, 11:06:01 am UUID: 3ab59a42-c1ff-4808-afee-ac0eade27ab3 Ancestors: Comet-Examples-lr.21 - added the possiblity for new items to CTReport On 9 October 2010 10:46, Lukas Renggli <[hidden email]> wrote: > Give me a second, I will try to extend the example. > > Lukas > > On 9 October 2010 00:00, Rob Withers <[hidden email]> wrote: >> Lukas, >> >> Excellent! I checked out that example and it demonstrates how to display a >> list using javascript. What I don't see, and it could be staring me in the >> face, is a way to add new items (or remove them) with the list using Comet. >> >> Thanks, >> Rob >> >> -------------------------------------------------- >> From: "Lukas Renggli" <[hidden email]> >> Sent: Friday, October 08, 2010 5:03 PM >> To: "Seaside - general discussion" <[hidden email]> >> Subject: Re: [Seaside] HTML/Javascript list and Comet updating it's >> contents. >> >>> There is an example application included with the comet package called >>> CTReport or something (I don't have an image at hand right now) that >>> does exactly that. >>> >>> Lukas >>> >>> On Friday, October 8, 2010, Rob Withers <[hidden email]> wrote: >>>> >>>> Hi, >>>> >>>> I am struggling to figure out a way to proceed. I want to have a list >>>> that displays elements from my model. When I add an element, I want to >>>> update the page with Comet. I searched the web for examples, but only found >>>> examples using other frameworks. I do not know how to begin. >>>> >>>> I don't think using orderedList, unorderedList or table is sufficient to >>>> do what I want. I don't see a way to add items to these lists. I am >>>> completely confused about how to render a list in Javascript. I am guessing >>>> I need an Array of values and a Table/TableRow/TableData to display them. >>>> Not sure how to do this nor add items. I am looking for example code. >>>> >>>> Any assistance would be greatly appreciated. >>>> >>>> Thanks, >>>> Rob >>>> _______________________________________________ >>>> seaside mailing list >>>> [hidden email] >>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >>>> >>> >>> -- >>> 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 >> > > > > -- > Lukas Renggli > www.lukas-renggli.ch > -- Lukas Renggli www.lukas-renggli.ch _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: HTML/Javascript list and Comet updating it's contents.
|
|
Thanks, Lukas. This example does raise some questions for me. One class of
questions is regarding the use of jQuery. Is there any documentation I could read about it? I'll put these questions in a separate email to keep this one short. The other question relates to what I am trying to do, and I will start with that. I am trying to write a Chat application. 1) appending items to a list. I notice that your approach here maintains a list on the server and adds an item to that list and then re-renders the entire table. Since I am trying to write a chat application, this will work for the list of users, but not for the message traffic in a particular chat session, since I do not intend to keep the messages at the server. I took a look at the CTChat example I see and it looks like the pertinent method is #push:with:. push: aString with: aBlock "This code pushes the new message to all its clients. With the exception of part 2 adding the message itself, all other parts are optional." self pusher javascript: [ :script | script add: ((script jQuery: #messages) "1. limit listing to 20 messages" children; sliceFrom: 0 to: -19; remove; end; "2. append message to bottom" append: [ :html | self renderMessage: aBlock class: aString on: html ]; end; "3. scroll to bottom" scrollTop: 65536) ] So, what is (script jQuery: #messages) doing? What type of object is the result? Is the server getting the list of messages from the client? Or is aBlock (a String) and aString being sent to the client and this script is running on the client? I am not clear on the sequence of cascaded messages sent: (#children; #sliceFrom:to:, #remove, #end, #append:, #end, #scrollTop:). Can you give me a quick explanation? Thanks, Rob -------------------------------------------------- From: "Lukas Renggli" <[hidden email]> Sent: Saturday, October 09, 2010 5:06 AM To: "Seaside - general discussion" <[hidden email]> Subject: Re: [Seaside] HTML/Javascript list and Comet updating it's contents. > Have a look at: > > Name: Comet-Examples-lr.22 > Author: lr > Time: 9 October 2010, 11:06:01 am > UUID: 3ab59a42-c1ff-4808-afee-ac0eade27ab3 > Ancestors: Comet-Examples-lr.21 > > - added the possiblity for new items to CTReport > > > On 9 October 2010 10:46, Lukas Renggli <[hidden email]> wrote: >> Give me a second, I will try to extend the example. >> >> Lukas >> >> On 9 October 2010 00:00, Rob Withers <[hidden email]> wrote: >>> Lukas, >>> >>> Excellent! I checked out that example and it demonstrates how to >>> display a >>> list using javascript. What I don't see, and it could be staring me in >>> the >>> face, is a way to add new items (or remove them) with the list using >>> Comet. >>> >>> Thanks, >>> Rob >>> >>> -------------------------------------------------- >>> From: "Lukas Renggli" <[hidden email]> >>> Sent: Friday, October 08, 2010 5:03 PM >>> To: "Seaside - general discussion" <[hidden email]> >>> Subject: Re: [Seaside] HTML/Javascript list and Comet updating it's >>> contents. >>> >>>> There is an example application included with the comet package called >>>> CTReport or something (I don't have an image at hand right now) that >>>> does exactly that. >>>> >>>> Lukas >>>> >>>> On Friday, October 8, 2010, Rob Withers <[hidden email]> wrote: >>>>> >>>>> Hi, >>>>> >>>>> I am struggling to figure out a way to proceed. I want to have a list >>>>> that displays elements from my model. When I add an element, I want >>>>> to >>>>> update the page with Comet. I searched the web for examples, but only >>>>> found >>>>> examples using other frameworks. I do not know how to begin. >>>>> >>>>> I don't think using orderedList, unorderedList or table is sufficient >>>>> to >>>>> do what I want. I don't see a way to add items to these lists. I am >>>>> completely confused about how to render a list in Javascript. I am >>>>> guessing >>>>> I need an Array of values and a Table/TableRow/TableData to display >>>>> them. >>>>> Not sure how to do this nor add items. I am looking for example code. >>>>> >>>>> Any assistance would be greatly appreciated. >>>>> >>>>> Thanks, >>>>> Rob >>>>> _______________________________________________ >>>>> seaside mailing list >>>>> [hidden email] >>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >>>>> >>>> >>>> -- >>>> 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 >>> >> >> >> >> -- >> Lukas Renggli >> www.lukas-renggli.ch >> > > > > -- > 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 |
Re: HTML/Javascript list and Comet updating it's contents.
|
|
> So, what is (script jQuery: #messages) doing?
This is the same as script jQuery: '#messages' a query on the DOM element with the ID messages. > What type of object is the > result? On the Smalltalk side an instance of JQueryInstance. On the Javascript side a jQuery instance of the matching DOM elements. > Is the server getting the list of messages from the client? No, #append: just appends a new item to the list. The list of messages is not stored on the server. > Or is > aBlock (a String) and aString being sent to the client and this script is > running on the client? The block is a Seaside render block. It happens on the server, the resulting HTML string is sent to the client. > I am not clear on the sequence of cascaded messages > sent: (#children; #sliceFrom:to:, #remove, #end, #append:, #end, > #scrollTop:). #jQuery: defines the query. #children, #sliceFrom:to: refines the query. #remove performs the action on the resulting DOM elements. #end resets to the original query. Each single method has a detailed method comment, look at the implementor (or display it with eCompletion). These is basic jQuery knowledge, do some of the Javascript/HTML tutorials listed here: <http://docs.jquery.com/Tutorials>. You might also be interested in my jQuery tutorial of ESUG last year in Brest. The slides and the video are linked here <http://www.seaside.st/documentation/videos>. Lukas -- Lukas Renggli www.lukas-renggli.ch _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: HTML/Javascript list and Comet updating it's contents.
|
|
I am generally adverse to commenting my code. This framework you have built
is certainly enhanced by it. Thank you for the help, Lukas. I really liked your slides. Rob -------------------------------------------------- From: "Lukas Renggli" <[hidden email]> Sent: Saturday, October 09, 2010 4:49 PM To: "Seaside - general discussion" <[hidden email]> Subject: Re: [Seaside] HTML/Javascript list and Comet updating it's contents. >> So, what is (script jQuery: #messages) doing? > > This is the same as > > script jQuery: '#messages' > > a query on the DOM element with the ID messages. > >> What type of object is the >> result? > > On the Smalltalk side an instance of JQueryInstance. > > On the Javascript side a jQuery instance of the matching DOM elements. > >> Is the server getting the list of messages from the client? > > No, #append: just appends a new item to the list. The list of messages > is not stored on the server. > >> Or is >> aBlock (a String) and aString being sent to the client and this script is >> running on the client? > > The block is a Seaside render block. It happens on the server, the > resulting HTML string is sent to the client. > >> I am not clear on the sequence of cascaded messages >> sent: (#children; #sliceFrom:to:, #remove, #end, #append:, #end, >> #scrollTop:). > > #jQuery: defines the query. #children, #sliceFrom:to: refines the > query. #remove performs the action on the resulting DOM elements. #end > resets to the original query. Each single method has a detailed method > comment, look at the implementor (or display it with eCompletion). > > These is basic jQuery knowledge, do some of the Javascript/HTML > tutorials listed here: <http://docs.jquery.com/Tutorials>. > > You might also be interested in my jQuery tutorial of ESUG last year > in Brest. The slides and the video are linked here > <http://www.seaside.st/documentation/videos>. > > 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 |
«
Return to Seaside General
|
1 view|%1 views
| Free forum by Nabble | Edit this page |