I have a BlogPost resources, where in BlogPost 'show' screen, I want a "new comment" button to be displayed and only on clicking that button I want the new Comment template to be rendered into the same page. I would like to use ajax concept to do this. How do I do this?
NOTE: I have BlogPost and Comment as seperate resources(plural) Resources I've defined in my routes looks like this:
map.resources :blog_posts, :has_many => :comments
EDIT: For a better idea, the 'add comment' link just below a question in stackoverflow
I think all you need to do is render the comment box (the HTML markup) on page load but give it a CSS rule to be hidden ( <div id='comment' style="display:none"> ... comment markup ... </div>
). Then add a link just above or below that div to show the div and hide the "add comment" link using js (like jquery).
Something like this:
<script type='text/javascript'>
function fade_some_stuff(){
$('#comment_link').click( function(){ $('#comment').fadeIn(); $('#comment_link').fadeOut(); });
}
</script>
<a href="#" id='comment_link'>add comment</a>
<div id='comment' style="display:none;">
...
</div>