How would I use jQuery to grab the contents of a page and render it within a div?

Question

This is a question in response to thise: http://stackoverflow.com/questions/760628/javascript-function-not-working-in-ie

I need jQuery to do something like this:

function render_message(id)
{
var xmlHttp;
  xmlHttp=new XMLHttpRequest();  
  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
        document.getElementById('message').innerHTML=xmlHttp.responseText;
        document.getElementById('message').style.display='';
        }
    }
    var url="include/javascript/message.php";
    url=url+"?q="+id;
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
}

Can someone write the function for me quickly?

Answer 1

See $.ajax() to retrieve pages and access the content. Documentation here.

Then use e.g. $("#yourElementId").html( myHtmlContent ) to replace the HTML. More doc here.

Answer 2

You can use the handy load() function for this:

$('#message').load("include/javascript/message.php", {q: id}, function() {
    $(this).show();
});

The callback function is assuming the message div is hidden and you only want it show once the request is complete.

Answer 3

Use JQuery's $.load() function (http://docs.jquery.com/Ajax/load):

$("#mydiv").load("a/url/here.html");