Hello All,
I have the following code:
myAjax = new Ajax.PeriodicalUpdater("div",
"tickets.jsp", {
evalScripts: true,
parameters: queryString
});
Tickets.jsp displays rows of data obtained from a database. Each row
is color coded. For example, red for failed tickets, gray for
expired, etc. When the mouse hovers over a row, it gets hightlighted
in orange via onmouseover event in the tr element in tickets.jsp.
The problem is after each update, the browser doesn''t remember the
pointer position before the update and the highlight dissappears.
I''ve used javascript to keep track of the row id and change its color
after the update. However, when the page updates, the color has to
change from its original color to orange. As a result, the
highlighted row blinks with each update.
I don''t like the blinking. Creating a new ajax object upon each mouse
move (with the row id stored in a hidden field for example) will
likely solve the problem. But that''s not what I like either.
Ideally, I would like to pass the row id before the page is generated,
so that the original color of that row can be set to orange. The
question is: is there a way to pass it to the ajax so that it can be
used before each XMLhttpRequest is sent?
As a last resort, would modifying transport.response work?
Thanks a lot for your time.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Hi Debbie,
If you hook the onCreate handler, you can modify the parameters before
they''re sent to the request. So you could supply the ID of the
currently-highlighted row and send it to the server side, which could
assign whatever class does the highlighting or what have you. (Of
course, there''s no guarantee that the user won''t have moved
the mouse
before the request is completed.) By the time onCreate is called, the
parameters have been parsed into a Hash object, which makes it easy to
add to them:
onCreate: function(resp) {
resp.request.options.parameters.idToHighlight findHighlightedRowID();
}
I don''t know whether this is likely to change in future versions.
You can also change the responseText in the onComplete handler; this
is triggered before the update is done, so your changes will be used.
The downside there is that you have to parse through the text to find
the element, but at least you don''t have to worry that the highlighted
row ID is out of date.
So that answers the question you asked. But another approach you
might consider would be for the server side to return the ticket list
as an array of objects in JSON format rather than as HTML. Then you
could compare to the list you already have and only change the display
(insert rows, remove rows, or update row contents) as necessary,
rather than tearing down and rebuilding the display on every update,
which might make for less flicker overall -- and of course in the
process, if you do have to update the highlighted row, you can handle
the highlighting issue client-side and not have to worry about the
user moving the mouse during the request. (And the JSON for the
tickets is likely to be smaller than the HTML to represent the
tickets, making for less traffic.) For this you''d probably use a
PeriodicalExecuter: Create the request, send it off, handle the JSON
in the reply. FWIW.
Hope this helps,
--
T.J. Crowder
tj / crowder software / com
On May 21, 8:57 pm, Debbie
<liu9...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Hello All,
>
> I have the following code:
>
> myAjax = new Ajax.PeriodicalUpdater("div",
"tickets.jsp", {
> evalScripts: true,
> parameters: queryString
> });
>
> Tickets.jsp displays rows of data obtained from a database. Each row
> is color coded. For example, red for failed tickets, gray for
> expired, etc. When the mouse hovers over a row, it gets hightlighted
> in orange via onmouseover event in the tr element in tickets.jsp.
>
> The problem is after each update, the browser doesn''t remember the
> pointer position before the update and the highlight dissappears.
> I''ve used javascript to keep track of the row id and change its
color
> after the update. However, when the page updates, the color has to
> change from its original color to orange. As a result, the
> highlighted row blinks with each update.
>
> I don''t like the blinking. Creating a new ajax object upon each
mouse
> move (with the row id stored in a hidden field for example) will
> likely solve the problem. But that''s not what I like either.
>
> Ideally, I would like to pass the row id before the page is generated,
> so that the original color of that row can be set to orange. The
> question is: is there a way to pass it to the ajax so that it can be
> used before each XMLhttpRequest is sent?
>
> As a last resort, would modifying transport.response work?
>
> Thanks a lot for your time.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Hello T.J. I''d like to share that parameter was successfully passed through onCreate handler, before each update. Yet, as you envisioned, I now see double highlights when the mouse moves. The problem with the JSON approach is that, right now, the table layout is generated in the jsp page. If I use JSON, does that mean I have to re-write tickets.jsp (to output the raw data of the tickets in JSON format) and put all the formatting logic in javascript? Many thanks for you help, and the time you spent. Debbie On May 22, 3:41 am, "T.J. Crowder" <tjcrow...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Hi Debbie, > > If you hook the onCreate handler, you can modify the parameters before > they''re sent to the request. So you could supply the ID of the > currently-highlighted row and send it to the server side, which could > assign whatever class does the highlighting or what have you. (Of > course, there''s no guarantee that the user won''t have moved the mouse > before the request is completed.) By the time onCreate is called, the > parameters have been parsed into a Hash object, which makes it easy to > add to them: > > onCreate: function(resp) { > resp.request.options.parameters.idToHighlight > findHighlightedRowID(); > > } > > I don''t know whether this is likely to change in future versions. > > You can also change the responseText in the onComplete handler; this > is triggered before the update is done, so your changes will be used. > The downside there is that you have to parse through the text to find > the element, but at least you don''t have to worry that the highlighted > row ID is out of date. > > So that answers the question you asked. But another approach you > might consider would be for the server side to return the ticket list > as an array of objects in JSON format rather than as HTML. Then you > could compare to the list you already have and only change the display > (insert rows, remove rows, or update row contents) as necessary, > rather than tearing down and rebuilding the display on every update, > which might make for less flicker overall -- and of course in the > process, if you do have to update the highlighted row, you can handle > the highlighting issue client-side and not have to worry about the > user moving the mouse during the request. (And the JSON for the > tickets is likely to be smaller than the HTML to represent the > tickets, making for less traffic.) For this you''d probably use a > PeriodicalExecuter: Create the request, send it off, handle the JSON > in the reply. FWIW. > > Hope this helps, > -- > T.J. Crowder > tj / crowder software / com > > On May 21, 8:57 pm, Debbie <liu9...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > > Hello All, > > > I have the following code: > > > myAjax = new Ajax.PeriodicalUpdater("div", "tickets.jsp", { > > evalScripts: true, > > parameters: queryString > > }); > > > Tickets.jsp displays rows of data obtained from a database. Each row > > is color coded. For example, red for failed tickets, gray for > > expired, etc. When the mouse hovers over a row, it gets hightlighted > > in orange via onmouseover event in the tr element in tickets.jsp. > > > The problem is after each update, the browser doesn''t remember the > > pointer position before the update and the highlight dissappears. > > I''ve used javascript to keep track of the row id and change its color > > after the update. However, when the page updates, the color has to > > change from its original color to orange. As a result, the > > highlighted row blinks with each update. > > > I don''t like the blinking. Creating a new ajax object upon each mouse > > move (with the row id stored in a hidden field for example) will > > likely solve the problem. But that''s not what I like either. > > > Ideally, I would like to pass the row id before the page is generated, > > so that the original color of that row can be set to orange. The > > question is: is there a way to pass it to the ajax so that it can be > > used before each XMLhttpRequest is sent? > > > As a last resort, would modifying transport.response work? > > > Thanks a lot for your time.- Hide quoted text - > > - Show quoted text ---~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Hi Debbie,
Yes, that''s right. You''d create a JSP (perhaps
"ticketdata.jsp")
returning JSON (mime type "application/json") rather than HTML. The
output might look something like this:
{
"tickets": [
{
"id": "1111",
"subject": "Some weird problem",
"owner": "JoeBloggs",
"created": "2008-05-23 12:47:14"
// (etc.)
},
{
"id": "2222",
"subject": "Some other weird problem",
"owner": "NitinPeshar",
"created": "2008-05-21 14:23:50"
// (etc.)
}
// (etc.)
]
}
Your code would load that via Ajax.Request; the success handler would
load the data into the tbody of the table. Here''s a functional
barebones page demonstrating the basics:
* * * *
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>Very Simple Table Load</title>
<style>
</style>
<script type="text/javascript"
src=''prototype.js''></script>
<script type="text/javascript">
function init()
{
$(''cmdLoad'').observe(''click'',
function(evt) {
evt.stop();
loadTickets();
});
}
function loadTickets()
{
new Ajax.Request(''ticketdata.jsp'', {
onSuccess: processTicketData
});
}
function processTicketData(resp)
{
var tickets;
var ticket;
var l;
var n;
var disp;
var row;
if (resp && resp.responseJSON && resp.responseJSON.tickets)
{
tickets = resp.responseJSON.tickets;
// Get the tbody element for the rows (not the table)
disp = $(''ticketdisplay'');
// Clear out any old rows or progress message, etc.
while (disp.childNodes.length > 0)
{
disp.removeChild(disp.childNodes[0]);
}
// Show the row data
l = tickets.length;
for (n = 0; n < l; ++n)
{
ticket = tickets[n];
row = new Element("tr");
row.id = "ticket" + ticket.id;
row.appendChild((new Element("td")).update(ticket.id));
row.appendChild((new
Element("td")).update(ticket.subject));
row.appendChild((new
Element("td")).update(ticket.created));
row.appendChild((new Element("td")).update(ticket.owner));
disp.appendChild(row);
}
}
}
document.observe(''dom:loaded'', init);
</script>
</head>
<body>
<a href=''#'' id=''cmdLoad''>Click here to
load tickets</a>
<table border=''1''>
<thead>
<tr>
<th>Ticket #</th>
<th>Subject</th>
<th>Created</th>
<th>Owner</th>
</tr>
</thead>
<tbody id=''ticketdisplay''></tbody>
</table>
</body>
</html>
* * * *
Of course, rather than tearing everything down and rebuilding it on
every refresh, your code would want to process only the *changes* in
the ticket list; note that I''ve marked each row displaying a ticket
with an ID derived from the ticket ID, so you can easily grab just
that row and update its contents if the ticket details change. This
barebones example doesn''t have style, sorting, error handling, user
feedback, comments, etc., but you get the idea.
The tbody thing is important. All tables have tbody elements once
they''re loaded into the DOM, whether you do it explicitly or not, and
it''s best to do it explicitly as it makes a great container for the
data (as opposed to the headers).
The JSON I showed above is fine for small numbers of tickets, but
boring old JSON is rich and flexible -- and for large arrays of
tabular data, verbose. :-) There are straightforward ways of
reformatting it into arrays to keep the size down (e.g., to avoid
repeating the column names), such as this one:
http://peter.michaux.ca/article/2652
Hope this helps,
--
T.J. Crowder
tj / crowder software / com
On May 22, 7:56 pm, Debbie
<liu9...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Hello T.J.
>
> I''d like to share that parameter was successfully passed through
> onCreate handler, before each update. Yet, as you envisioned, I now
> see double highlights when the mouse moves.
>
> The problem with the JSON approach is that, right now, the table
> layout is generated in the jsp page. If I use JSON, does that mean I
> have to re-write tickets.jsp (to output the raw data of the tickets in
> JSON format) and put all the formatting logic in javascript?
>
> Many thanks for you help, and the time you spent.
> Debbie
>
> On May 22, 3:41 am, "T.J. Crowder"
<tjcrow...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > Hi Debbie,
>
> > If you hook the onCreate handler, you can modify the parameters before
> > they''re sent to the request. So you could supply the ID of
the
> > currently-highlighted row and send it to the server side, which could
> > assign whatever class does the highlighting or what have you. (Of
> > course, there''s no guarantee that the user won''t
have moved the mouse
> > before the request is completed.) By the time onCreate is called, the
> > parameters have been parsed into a Hash object, which makes it easy to
> > add to them:
>
> > onCreate: function(resp) {
> > resp.request.options.parameters.idToHighlight > >
findHighlightedRowID();
>
> > }
>
> > I don''t know whether this is likely to change in future
versions.
>
> > You can also change the responseText in the onComplete handler; this
> > is triggered before the update is done, so your changes will be used.
> > The downside there is that you have to parse through the text to find
> > the element, but at least you don''t have to worry that the
highlighted
> > row ID is out of date.
>
> > So that answers the question you asked. But another approach you
> > might consider would be for the server side to return the ticket list
> > as an array of objects in JSON format rather than as HTML. Then you
> > could compare to the list you already have and only change the display
> > (insert rows, remove rows, or update row contents) as necessary,
> > rather than tearing down and rebuilding the display on every update,
> > which might make for less flicker overall -- and of course in the
> > process, if you do have to update the highlighted row, you can handle
> > the highlighting issue client-side and not have to worry about the
> > user moving the mouse during the request. (And the JSON for the
> > tickets is likely to be smaller than the HTML to represent the
> > tickets, making for less traffic.) For this you''d probably
use a
> > PeriodicalExecuter: Create the request, send it off, handle the JSON
> > in the reply. FWIW.
>
> > Hope this helps,
> > --
> > T.J. Crowder
> > tj / crowder software / com
>
> > On May 21, 8:57 pm, Debbie
<liu9...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > Hello All,
>
> > > I have the following code:
>
> > > myAjax = new Ajax.PeriodicalUpdater("div",
"tickets.jsp", {
> > > evalScripts: true,
> > > parameters: queryString
> > > });
>
> > > Tickets.jsp displays rows of data obtained from a database. Each
row
> > > is color coded. For example, red for failed tickets, gray for
> > > expired, etc. When the mouse hovers over a row, it gets
hightlighted
> > > in orange via onmouseover event in the tr element in tickets.jsp.
>
> > > The problem is after each update, the browser doesn''t
remember the
> > > pointer position before the update and the highlight dissappears.
> > > I''ve used javascript to keep track of the row id and
change its color
> > > after the update. However, when the page updates, the color has
to
> > > change from its original color to orange. As a result, the
> > > highlighted row blinks with each update.
>
> > > I don''t like the blinking. Creating a new ajax object
upon each mouse
> > > move (with the row id stored in a hidden field for example) will
> > > likely solve the problem. But that''s not what I like
either.
>
> > > Ideally, I would like to pass the row id before the page is
generated,
> > > so that the original color of that row can be set to orange. The
> > > question is: is there a way to pass it to the ajax so that it can
be
> > > used before each XMLhttpRequest is sent?
>
> > > As a last resort, would modifying transport.response work?
>
> > > Thanks a lot for your time.- Hide quoted text -
>
> > - Show quoted text -
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Thank you very much, T.J. I''m very interested in being able to process only the changes in the ticket list. Suppose I can transform responseText to JSON array of tickets, can you show me how to keep track of the previous and current JSON array, identify the row that''s changed, and update only the changed content in the tr? Thanks, Debbie> Of course, rather than tearing everything down and rebuilding it on > every refresh, your code would want to process only the *changes* in > the ticket list; note that I''ve marked each row displaying a ticket > with an ID derived from the ticket ID, so you can easily grab just > that row and update its contents if the ticket details change.--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Hi Debbie, At that point we''re really just into application logic. Keep your displayed list of tickets then ideally have ticketdata return only changes (e.g., "give me modified tickets since X" where X is the date/ time of your previous request), which you then apply, or in the worst case you compare the data for your currently-displayed tickets vs. the latest from the server and apply any changes to the display. Good luck with it, -- T.J. Crowder tj / crowder software / com On May 23, 4:36 pm, Debbie <liu9...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Thank you very much, T.J. I''m very interested in being able to > process only the changes in the ticket list. Suppose I can transform > responseText to JSON array of tickets, can you show me how to keep > track of the previous and current JSON array, identify the row that''s > changed, and update only the changed content in the tr? > Thanks, > Debbie > > > Of course, rather than tearing everything down and rebuilding it on > > every refresh, your code would want to process only the *changes* in > > the ticket list; note that I''ve marked each row displaying a ticket > > with an ID derived from the ticket ID, so you can easily grab just > > that row and update its contents if the ticket details change.--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---