How to make something load at an event rather than on page-load

Question

So the situation is for comments on a blog in progress, each commenter will have the ability to reply to any comment. To do this, I have a link that, when clicked, will reveal (with jQuery) a special reply form right there as opposed to the normal one at the bottom of the page. So instead of loading a form on every single comment when the page loads, I'd like to load only the forms that are needed by the user and only when they click on the link.

Now, I don't simply want to hide them, I know how to do that. I want them to not be there at all until that link is clicked. So can this be done? You don't need to tell me exactly how to do it (all though I may be back here later for something specific) If you just give me a search term, or a brief overview that would be awesome! Thanks!!

Answer 1

The easiest way to inject HTML is using jQuery's load function.

From the example - loads a page, and add a selection from the page:

$("#links").load("/Main_Page #jq-p-Getting-Started li");

For more advanced options, should you need them, you can also use ajax :

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

Answer 2

On link click create the form dynamically. e.g:

$('a.link').click(function()
{
   $('body').append("div id='dynamicdiv' class='y'><input type='text class='xyz' />" +
                    ".........................");
   $('#dynamicdiv').css({'position': 'absolute', 'top': '100px', 'left': '200px'});
});

Answer 3

I would add the form once, hide it, clone and append it when needed. The link would contain an id (or other identifier) which references the comment. Use javascript to manipulate the action attr of the form or the url option (if using the jQuery.form plugin).