GET data from server via JQuery call and load into DIV without refreshing page

Question

I've spent the best part of 90 minutes sifting through the many tutorials relating to this problem.

Instead of using the rather long winded way of creating a XHR object , sending the request, getting the data back, doing a getElementById to find the div then loading the response into the div. I'm looking for a far more simpler - easier on the eye way of doing it and so have found myself looking at JQuery.

However none of the tuts seem to do what i want unless i'm overlooking something. I just want to pass in a url, perform the request - data is passed back as html, then i want to inject it into a specific div.

Can someone please show me a simple solution to this problem, or link me to a straightforward tutorial if one is known?

Thanks in advance.

Answer 1

$('#divID').load('yourURL');

edit just noticed that you want to "inject" it. The previous line will replace the contents of the div. If you want to append it, you'd do the following:

$.get('yourURL', function(data) {
    $('#divID').append(data);
});

Answer 2

This should do what you need, it loads the response of the url into the div.

<div id="example"></div>
<script type="text/javascript">
    $("#example").load("http://mysite/ajaxpage");
</script>

jQuery "load" documentation:

http://api.jquery.com/load/

You can also add a callback function...

<div id="example"></div>
<script type="text/javascript">
    $("#example").load("http://mysite/ajaxpage", function () { alert("Done"); });
</script>

Answer 3

Take a look at http://api.jquery.com/load/ should be as simple as:

$('#result').load('ajax/test.html');