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 <[EMAIL PROTECTED]> 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" <[EMAIL PROTECTED]> 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 <[EMAIL PROTECTED]> 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@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
