librelist archives

« back to archive

handling templates via ajax

handling templates via ajax

From:
alice ni
Date:
2010-11-13 @ 02:29
Hi, I normally render templates doing something like the below:-

@app.route('/home')
def userhome():
    data=go get user details from the database
    return render_template("home.html",userdata=data)

and a template would look something like
<h1>{{userdata.name}}</h1>
{%for hobby in userdata.hobbies%}
<li>{{hobby}}</li>
{%endfor%}

However I am working on an application in which navigation is via ajax
and no fall back if javascript is not available(basically the app does
not work for ppl without javascript). The navigation menu has say few
tabs on the left ,(home,youroffers,yourlastreads). The right column is
supposed to dynamically change based on what the user clicks.

I am unable to understand how I handle templating here. Based on what
the user clicks I can send him the required data from the db via a
json through an xhrGET or xhrPOST.
Does the entire templating have to be handled at the server end and
then transfer the entire template via an ajax call?Somthing like
below:-

@app.route('/home')
def userhome():
    data=go get user details from the database
    template_string="<h1>%s</h1>"%data.name
    return jsonify(template=template_string)

 I actually dont like that idea much and it looks like I am doing
something terribly wrong here. Would be great if someone could point
me in the right direction here.

Re: handling templates via ajax

From:
alice ni
Date:
2010-11-13 @ 05:27
I solved it .. it was trivial, just that I am doing it for the first time..

On Sat, Nov 13, 2010 at 7:59 AM, alice ni <alice.ni19@gmail.com> wrote:
> Hi, I normally render templates doing something like the below:-
>
> @app.route('/home')
> def userhome():
>    data=go get user details from the database
>    return render_template("home.html",userdata=data)
>
> and a template would look something like
> <h1>{{userdata.name}}</h1>
> {%for hobby in userdata.hobbies%}
> <li>{{hobby}}</li>
> {%endfor%}
>
> However I am working on an application in which navigation is via ajax
> and no fall back if javascript is not available(basically the app does
> not work for ppl without javascript). The navigation menu has say few
> tabs on the left ,(home,youroffers,yourlastreads). The right column is
> supposed to dynamically change based on what the user clicks.
>
> I am unable to understand how I handle templating here. Based on what
> the user clicks I can send him the required data from the db via a
> json through an xhrGET or xhrPOST.
> Does the entire templating have to be handled at the server end and
> then transfer the entire template via an ajax call?Somthing like
> below:-
>
> @app.route('/home')
> def userhome():
>    data=go get user details from the database
>    template_string="<h1>%s</h1>"%data.name
>    return jsonify(template=template_string)
>
>  I actually dont like that idea much and it looks like I am doing
> something terribly wrong here. Would be great if someone could point
> me in the right direction here.
>

Re: [flask] Re: handling templates via ajax

From:
bruce bushby
Date:
2010-11-13 @ 09:39
Hi Alice

Any chance you could post your solution?

Thanks!

On Sat, Nov 13, 2010 at 5:27 AM, alice ni <alice.ni19@gmail.com> wrote:

> I solved it .. it was trivial, just that I am doing it for the first time..
>
> On Sat, Nov 13, 2010 at 7:59 AM, alice ni <alice.ni19@gmail.com> wrote:
> > Hi, I normally render templates doing something like the below:-
> >
> > @app.route('/home')
> > def userhome():
> >    data=go get user details from the database
> >    return render_template("home.html",userdata=data)
> >
> > and a template would look something like
> > <h1>{{userdata.name}}</h1>
> > {%for hobby in userdata.hobbies%}
> > <li>{{hobby}}</li>
> > {%endfor%}
> >
> > However I am working on an application in which navigation is via ajax
> > and no fall back if javascript is not available(basically the app does
> > not work for ppl without javascript). The navigation menu has say few
> > tabs on the left ,(home,youroffers,yourlastreads). The right column is
> > supposed to dynamically change based on what the user clicks.
> >
> > I am unable to understand how I handle templating here. Based on what
> > the user clicks I can send him the required data from the db via a
> > json through an xhrGET or xhrPOST.
> > Does the entire templating have to be handled at the server end and
> > then transfer the entire template via an ajax call?Somthing like
> > below:-
> >
> > @app.route('/home')
> > def userhome():
> >    data=go get user details from the database
> >    template_string="<h1>%s</h1>"%data.name
> >    return jsonify(template=template_string)
> >
> >  I actually dont like that idea much and it looks like I am doing
> > something terribly wrong here. Would be great if someone could point
> > me in the right direction here.
> >
>

Re: [flask] Re: handling templates via ajax

From:
alice ni
Date:
2010-11-13 @ 10:10
Hi Bruce & Jonas,
Thanks for replying . Sorry I forgot to post my solution in that
eureka moment :-). But this is how I did it.
1. I created a base template which had a header, a body and a footer.
2. The body was made to have two cols(b1 &b2)
3. In b1 I created a normal css navigation menu and in b2 I just
placed a div named content
4.I created 4 other templates named
"aboutme.html","Mypurchases.html","Mybooks.html" & "Thissite.html"
5. Now these navigation menu is supposed to have links which look like this:-
<a href="/?to=aboutme">AboutMe</a>
6. Now when the user clicks on the link, I pass the clicked node to a
dojo xhrGet function
(I  use Dojo), which does a xhrGet call on the server function which
looks like this:-

@app.route('/_show_content")
def sendcontent()
     pagerequested=request.args.get("to")
     """based on the page requested decide which template has to be
sent out and retrive the necessary data from the db"""
     return render_template("aboutme.html",data=dataretrivedfromdb)

Of course you check for things like request.xhr to check if it is an
ajax request.

7. This template is sent asynchronously to the calling javascript
function, which on successful receipt of data, adds this to the node
named content.
I am doing it something like dojo.byId("thecontent).innerHTML=datareceived
Because I am treating the received data as text, rather than xml or
json. However I am sure it can be done something like
dojo.place(datareceivednode,contentnode,"after")

Have to try that and see. Moreover I feel that handling the received
data as text is not a right idea, because I am using some dojo widgets
in the rendered templates, which are not getting parsed. Apart from
that, I dont see much of an issue. Am working on it as of now, but
could definitely look for some help here.
Thanks


On Sat, Nov 13, 2010 at 3:09 PM, bruce bushby
<bruce.bushby@googlemail.com> wrote:
> Hi Alice
> Any chance you could post your solution?
> Thanks!
>
> On Sat, Nov 13, 2010 at 5:27 AM, alice ni <alice.ni19@gmail.com> wrote:
>>
>> I solved it .. it was trivial, just that I am doing it for the first
>> time..
>>
>> On Sat, Nov 13, 2010 at 7:59 AM, alice ni <alice.ni19@gmail.com> wrote:
>> > Hi, I normally render templates doing something like the below:-
>> >
>> > @app.route('/home')
>> > def userhome():
>> >    data=go get user details from the database
>> >    return render_template("home.html",userdata=data)
>> >
>> > and a template would look something like
>> > <h1>{{userdata.name}}</h1>
>> > {%for hobby in userdata.hobbies%}
>> > <li>{{hobby}}</li>
>> > {%endfor%}
>> >
>> > However I am working on an application in which navigation is via ajax
>> > and no fall back if javascript is not available(basically the app does
>> > not work for ppl without javascript). The navigation menu has say few
>> > tabs on the left ,(home,youroffers,yourlastreads). The right column is
>> > supposed to dynamically change based on what the user clicks.
>> >
>> > I am unable to understand how I handle templating here. Based on what
>> > the user clicks I can send him the required data from the db via a
>> > json through an xhrGET or xhrPOST.
>> > Does the entire templating have to be handled at the server end and
>> > then transfer the entire template via an ajax call?Somthing like
>> > below:-
>> >
>> > @app.route('/home')
>> > def userhome():
>> >    data=go get user details from the database
>> >    template_string="<h1>%s</h1>"%data.name
>> >    return jsonify(template=template_string)
>> >
>> >  I actually dont like that idea much and it looks like I am doing
>> > something terribly wrong here. Would be great if someone could point
>> > me in the right direction here.
>> >
>
>

Re: [flask] Re: handling templates via ajax

From:
Jonas Galvez
Date:
2010-11-13 @ 07:48
I use jQuery for that. Make the handler return just data.

Then in the JS code do something like:

template = $('<div class="search-result"><h2></h2><p><a></a></p></div>');
$.get('/search', {q: 'foo'}, function(data) {
  var results = $('#search-results');
  var result;
  for(var i = 0; i < data.length; i++) {
    result = template.clone();
    $('h2', result).text(data[i].title);
    $('a', result).attr('href', data[i].url).text(data[i].url);
    results.append(result);
  }
}, 'json');

-- Jonas

On Sat, Nov 13, 2010 at 3:27 AM, alice ni <alice.ni19@gmail.com> wrote:
> I solved it .. it was trivial, just that I am doing it for the first time..
>
> On Sat, Nov 13, 2010 at 7:59 AM, alice ni <alice.ni19@gmail.com> wrote:
>> Hi, I normally render templates doing something like the below:-
>>
>> @app.route('/home')
>> def userhome():
>>    data=go get user details from the database
>>    return render_template("home.html",userdata=data)
>>
>> and a template would look something like
>> <h1>{{userdata.name}}</h1>
>> {%for hobby in userdata.hobbies%}
>> <li>{{hobby}}</li>
>> {%endfor%}
>>
>> However I am working on an application in which navigation is via ajax
>> and no fall back if javascript is not available(basically the app does
>> not work for ppl without javascript). The navigation menu has say few
>> tabs on the left ,(home,youroffers,yourlastreads). The right column is
>> supposed to dynamically change based on what the user clicks.
>>
>> I am unable to understand how I handle templating here. Based on what
>> the user clicks I can send him the required data from the db via a
>> json through an xhrGET or xhrPOST.
>> Does the entire templating have to be handled at the server end and
>> then transfer the entire template via an ajax call?Somthing like
>> below:-
>>
>> @app.route('/home')
>> def userhome():
>>    data=go get user details from the database
>>    template_string="<h1>%s</h1>"%data.name
>>    return jsonify(template=template_string)
>>
>>  I actually dont like that idea much and it looks like I am doing
>> something terribly wrong here. Would be great if someone could point
>> me in the right direction here.
>>
>