Hi all,

I'm not an expert in javascript/prototype too, but i think u can see the
template class...
It seams to be perfect for what u mean.

http://www.prototypejs.org/api/template

On Thu, Sep 11, 2008 at 11:17 PM, cyiam <[EMAIL PROTECTED]>wrote:

>
> I'm not a javascript expert, so prototype handles AJAX and JSON
> easily. And I am a newbie on prototype! You can use use the dot
> notation to get the result from JSON. For example, if your JSON object
> is named "customerName",  then in your onSuccess or onComplete
> function, you can access the object value by:
> jsonResponse.customerName
>
> On Sep 11, 2:25 pm, Justin <[EMAIL PROTECTED]> wrote:
> > Hi folks,
> > I'm not an expert on front-end development and if this is the wrong
> > group to post, please point me in the correct direction.
> >
> > I'm looking at ways to separate the HTML layout of a page in
> > javascript from JSON data that I receive from the server. What are the
> > ways to render the JSON on the client?
> >
> > Most of the code samples I've seen involve displaying the received
> > JSON seem to have an intimate knowledge of how the html is laid out
> > and which elements and types used to display the data. Typically what
> > I see is something similar to:
> >
> > function makeHttpRequest()
> > {
> >         httpRequest.open("GET", url, true)
> >         httpRequest.onreadystatechange = updatePage;
> >         httpRequest.send();
> >
> > }
> >
> > function updatePage() {
> >    if (xmlHttp.readyState == 4) {
> >                 eval("var response = ("+request.responseText+")");
> >
> >                 for(var i in response.data.row.items)
> >                 {
> >                     document.getElementById("body").innerHTML += "<div
> > id='icon'><img src='"+response.data.row.items[i].icon +"'/></div>";
> >
> >                     for(var j in response.data.row.items[i].item)
> >                     {
> >                         document.getElementById("body").innerHTML +=
> "<div id='item'
> > onclick=\""+ response.data.row.items[i].action +"\">"+
> > response.data.row.items[i].item[j] +"</div>";
> >                     }
> >                 }
> >         }
> >
> > }
> >
> > Assuming that our view consists simple HTML with separate javascript &
> > CSS files, this approach seems to intrinsically cause coupling of the
> > markup with javascript. Following this approach, every section of a
> > page that needs to fetch data from the server would have a different
> > 'updatePage' to handle the response. In addition, if the layout of the
> > page changed from a 'div' to some other type of tag, you have to
> > remember to go and modify the javascript.
> >
> > I've read about the 'Template' object under prototype  and I suppose
> > one thing you could do is have the server send back template string
> > and with the id of the element to update along with rest of the JSON
> > data and then use it after deserializing the data.
> >
> > Is there a better way to achieve this separation using prototype/
> > scriptaculous?
> >
> > Thanks,
> > Justin
> >
>
-- 
Thanks,

Diogo Neves
Web Developer @ SAPO.pt by PrimeIT.pt

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to