Page Refresh back to same html element

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

Page Refresh back to same html element

Rajeev Lochan
Hi,
I was wondering if there is a way to get back to the html element that was last edited or clicked on.

For example, I have a long list of items and to view the lower items, scrollbar is used. I have some anchors/buttons next to each item. When I click on anchor or button, page refreshes and shows the default view (top of the list). Again I have to scroll down to make other changes.

Is there a way to overcome this problem?

Should I use onLoad or anything related to y co-ordinate of the html element last used.

Last but not the least, Warm wishes on New Year to everyone.

Thanks & Regards,
Rajeev


--
Rajeev Lochan

Co-founder, AR-CAD.com

http://www.ar-cad.com
+91 9243468076 (Bangalore)
080 65355873
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Page Refresh back to same html element

Tom Phoenix
On Jan 1, 2008 3:58 AM, Rajeev Lochan <[hidden email]> wrote:

> For example, I have a long list of items and to view the lower items,
> scrollbar is used. I have some anchors/buttons next to each item. When I
> click on anchor or button, page refreshes and shows the default view (top of
> the list). Again I have to scroll down to make other changes.

Although this isn't exactly what you're asking for, I'd consider
displaying the list in a different way. Above the list you have now,
include the "most recent up-to-three" active items on the list. That
is, a few of the list items would be duplicated at the top of the
page, for the user's convenience. This is not unlike a search engine
returning "most popular results" before the entire list of results.
Would that work for you?

If you do want to scroll down to an item when the page reloads, you'll
need an internal HTML name at that point. You could name each possible
point where you might want to scroll to, but it's probably easier just
to use one label:

    html anchor name: 'START_HERE'.

To redirect the browser to that point, your presenter can implement
the #updateUrl: message; see the Seaside documentation page on "The
Render Tree". This works for me:

    updateUrl: url

        super updateUrl: url.
        url fragment: 'START_HERE'

Good luck with it!

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

Re: Page Refresh back to same html element

Rajeev Lochan
Hi Tom,
>Above the list you have now,
>include the "most recent up-to-three" active items on the list. That
>is, a few of the list items would be duplicated at the top of the
>page, for the user's convenience. This is not unlike a search engine
>returning "most popular results" before the entire list of results.
>Would that work for you?

It wouldnt work for me, as all the items are equally important for me. My app is going to deal with say Shopping Lists.


>If you do want to scroll down to an item when the page reloads, you'll
>need an internal HTML name at that point. You could name each possible
>point where you might want to scroll to, but it's probably easier just
>to use one label:

>   html anchor name: 'START_HERE'.

>To redirect the browser to that point, your presenter can implement
>the #updateUrl: message; see the Seaside documentation page on "The
>Render Tree". This works for me:

>   updateUrl: url

>      super updateUrl: url.
>      url fragment: 'START_HERE'


I tried this and it works out of the box only with a particular predefined Anchor. As I mentioned above, mine is going to be Dynamically built list with a lot of items. Is there anyway to assign unique name to all anchors. One of the solutions I can think of is

html anchor name: html nextId asString.

Then somehow pass this information to #updateUrl:

If there are other possibilities, please help me.

Thanks & Regards,
Rajeev





On Jan 1, 2008 9:09 PM, Tom Phoenix <[hidden email]> wrote:
On Jan 1, 2008 3:58 AM, Rajeev Lochan <[hidden email]> wrote:

> For example, I have a long list of items and to view the lower items,
> scrollbar is used. I have some anchors/buttons next to each item. When I
> click on anchor or button, page refreshes and shows the default view (top of
> the list). Again I have to scroll down to make other changes.

Although this isn't exactly what you're asking for, I'd consider
displaying the list in a different way. Above the list you have now,
include the "most recent up-to-three" active items on the list. That
is, a few of the list items would be duplicated at the top of the
page, for the user's convenience. This is not unlike a search engine
returning "most popular results" before the entire list of results.
Would that work for you?

If you do want to scroll down to an item when the page reloads, you'll
need an internal HTML name at that point. You could name each possible
point where you might want to scroll to, but it's probably easier just
to use one label:

   html anchor name: 'START_HERE'.

To redirect the browser to that point, your presenter can implement
the #updateUrl: message; see the Seaside documentation page on "The
Render Tree". This works for me:

   updateUrl: url

       super updateUrl: url.
       url fragment: 'START_HERE'

Good luck with it!

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



--
Rajeev Lochan

Co-founder, AR-CAD.com

http://www.ar-cad.com
+91 9243468076 (Bangalore)
080 65355873
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Page Refresh back to same html element

Randal L. Schwartz
>>>>> "Rajeev" == Rajeev Lochan <[hidden email]> writes:

Rajeev> I tried this and it works out of the box only with a particular predefined
Rajeev> Anchor. As I mentioned above, mine is going to be Dynamically built list
Rajeev> with a lot of items. Is there anyway to assign unique name to all anchors.
Rajeev> One of the solutions I can think of is

Rajeev> html anchor name: html nextId asString.

Rajeev> Then somehow pass this information to #updateUrl:

Just designing out loud, but I suspect your callback could update a state
variable (in the component) that defines the anchor tag to which to scroll,
and the #updateUrl: of that component would add that tag to the url.  Might
just work, since the callback pass is processed *before* the rendering pass.

--
Randal L. Schwartz - Stonehenge Consulting Services, Inc. - +1 503 777 0095
<[hidden email]> <URL:http://www.stonehenge.com/merlyn/>
Perl/Unix/security consulting, Technical writing, Comedy, etc. etc.
See PerlTraining.Stonehenge.com for onsite and open-enrollment Perl training!
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Page Refresh back to same html element

Rajeev Lochan
Thanks a lot Randal and Tom,
I could accomplish the task with your help and guidance.
The following are the things I did.

1) Add 'identifier' an instance Variable in MySession (which is my root session class).

2) Add 2 methods #identifier and #identifier: in MyRootComponent ( Which is a subclass of WAComponent and my root component)

MyRootComponent>> identifier
^ self session identifier


MyRootComponent>>identifier: anId
self session identifier: anId


3) Override #updateUrl: in MyRootComponent

updateUrl: url
"identifier has the html Id of the anchor/element clicked last"
       super updateUrl: url.
       url fragment: self identifier

4)MyRootComponent # renderContentOn: is simple

MyRootComponent>>renderContentOn: html
"model is an OrderedCollection"
self model do: [:eachItem | self renderEachItem: eachItem on: html]


5) #renderEachItem:on: is tweaked a bit to accomodate html anchor name: . I suppose this can also work with textInputs and submitButtons or any other form elements.


MyRootComponent>>renderEachItem: eachItem on: html

"I am going to have some temp variables to assign html nextId. Each Item has title, quantity"
| id1 id2 id3 |
id1 := id2 := id3 := nil.
html text: anItem title.
html text: anItem quantity.
html anchor name: (id1 := html nextId); callback: [self identifier: id1.self incrementQuantity: anItem]; with: '+'.
html anchor name: (id2 := html nextId); callback: [self identifier: id2.self decrementQuantity: anItem]; with: '-'.
html anchor name: (id3 := html nextId); callback: [self identifier: id3.self delete: anItem]; with: 'Delete'.



Thanks a lot again to all the experienced users who make our lives easier. What a way to start a New Year.


Thanks & Regards,
Rajeev


On Jan 1, 2008 10:51 PM, Randal L. Schwartz <[hidden email]> wrote:
>>>>> "Rajeev" == Rajeev Lochan <[hidden email]> writes:

Rajeev> I tried this and it works out of the box only with a particular predefined
Rajeev> Anchor. As I mentioned above, mine is going to be Dynamically built list
Rajeev> with a lot of items. Is there anyway to assign unique name to all anchors.
Rajeev> One of the solutions I can think of is

Rajeev> html anchor name: html nextId asString.

Rajeev> Then somehow pass this information to #updateUrl:

Just designing out loud, but I suspect your callback could update a state
variable (in the component) that defines the anchor tag to which to scroll,
and the #updateUrl: of that component would add that tag to the url.  Might
just work, since the callback pass is processed *before* the rendering pass.

--
Randal L. Schwartz - Stonehenge Consulting Services, Inc. - +1 503 777 0095
<[hidden email]> <URL:http://www.stonehenge.com/merlyn/>
Perl/Unix/security consulting, Technical writing, Comedy, etc. etc.
See PerlTraining.Stonehenge.com for onsite and open-enrollment Perl training!



--
Rajeev Lochan

Co-founder, AR-CAD.com

http://www.ar-cad.com
+91 9243468076 (Bangalore)
080 65355873
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Page Refresh back to same html element

Lukas Renggli
In reply to this post by Rajeev Lochan
> I was wondering if there is a way to get back to the html element
> that was last edited or clicked on.

3 lines of Scriptaculous-Smalltalk code:

For every form element you do something like (maybe you need a
different way to get unique IDs for your form elements):

  | id |
  html textInput
    value: text;
    callback: [ :v | text := v ];
    " now comes the extra suff "
    id: (id := html nextId);
    onChange: (html request callback: [ activeId := id ])

Then at the end of the page you do:

  self session addLoadScript: (html element id: id; scroll)

Also see the mailing-list archive, I am sure this question has been
asked several times already.

Lukas

--
Lukas Renggli
http://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: Page Refresh back to same html element

Lukas Renggli
>   self session addLoadScript: (html element id: id; scroll)

Of course you need to replace id with activeId. As usual this is all
untested code ...

Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside