Wednesday, 15 February 2012

jquery - AJAX - First Time Refresh using Handlebars -



jquery - AJAX - First Time Refresh using Handlebars -

the code below attempting first display previous comments, , on submit button click, refresh showing newer comment.

the sec ajax phone call works fine. first ajax phone call nil ('/show' valid request - , first phone call '/comment' calls '/show')

here code snippet:

<script> $(document).ready(function() { var source = $("#login_template"); var srchtml =source.html(); var login_template = handlebars.compile(srchtml); source = $("#comment_template"); srchtml =source.html(); var comment_template = handlebars.compile(srchtml); // first time phone call server comments $.ajax({ // ajax phone call starts type: "post", url: "/show", contenttype: 'application/json', success: function(data,textstatus,jqxhr) { info = json.parse(data); var html = login_template(data); $("#login_content").html(html); html = comment_template(data); $("#comment_content").html(html); } }); $("#comment_button").click(function(event) { $.ajax({ // ajax phone call send comment server , refresh newer comment type: "post", url: "/comment", contenttype: 'application/json', data: json.stringify( { 'source' : source.value, 'comment': comment.value, }), success: function(data,textstatus,jqxhr) { info = json.parse(data); var html = login_template(data); $("#login_content").html(html); html = comment_template(data); $("#comment_content").html(html); } }); }); }); </script>

thanks in advance

yes, did console.log/alert within success block , not seem there. can see above, both ajax functions pretty much same. first 1 makes server phone call 'show' , sec 1 makes server phone call 'comment' in turn redirects server phone call 'show' after processing 'comment'. sec ajax phone call works fine.

here handlebar template code:

<script id="login_template" type="text/x-handlebars-template"> logout={{logout}} login={{login}} {{#if user}} {{user.nickname}}! [<a href="{{logout}}"><b>sign out</b></a>] {{else}} invitee [<a href="{{login}}"><b>sign in</b></a>] {{/if}} </script> <script id ="comment_template" type="text/x-handlebars-template"> <h2>top 10 recent guestbook entries</h2> no of greetings {{greetings.length}} {{#each greetings}} greetings! <br> <small>[<i>{{date.ctime}}</i>]</small> <b> {{#if author }} <code>{{author.nickname}}</code> {{else}} <i>anonymous</i> {{/if}} </b> wrote: {{comment}} {{/each}} </script>

here dom elements within html body:

<div id="login_content"></div> <div id="comment_content"></div>

and here server code:

class showcomment(webapp2.requesthandler): def get(self): user = users.get_current_user() greetings = greeting.all().order('-date').fetch(10) results = { 'user': user, 'greetings': greetings, 'login': users.create_login_url(self.request.uri), 'logout': users.create_logout_url(self.request.uri), } self.response.headers['content-type'] = 'application/json' self.response.out.write( jsonutils.gqlencoder().encode(results) ) class guestbook(webapp2.requesthandler): def post(self): jguest_data = json.loads(self.request.body) greeting = greeting() gb_name,gb_comment in jguest_data.iteritems(): user = users.get_current_user() if user: greeting.author = user greeting.content = gb_comment greeting.put() self.redirect('/show') app = webapp2.wsgiapplication([('/', mainpage), ('/comment', guestbook), ('/show',showcomment) ], debug=true)

thanks mil.

jquery handlebars.js

No comments:

Post a Comment