Question

I am using jQuery to load a new page inside the div “example-placeholder”

<script>
function example_ajax_request() {
  var parameters = "ajax.html?";
  $('example-placeholder').load(parameters);
}
<script>

<div id="example-placeholder">
<p>Start typing text here and it will be replaced by the results list</p>
</div>

This loads the file ajax.html into the div as expected (I’ve left off the parameters after the ‘?’ for clarity but they work fine)

What I want to do is reload ajax.html into the same div using a link generated within ajax.html, but with different parameters.

For example, I have a list of results generated by ajax.html which display a bunch of paging links. I want to load, say, ajax.html?page=2 into the div “example-placeholder” without reloading the whole page again.

Answer 1

$('#example-placeholder a').live('click', function(e) {
   e.preventDefault(); 
   $('#example-placeholder').load($(this).attr('href'));
});

This script should bind the function to all links within example-placeholder after they have been created as the live() promises to bind the event handler to all matching elements now and in the future.

The preventDefault prevents the links from changing the window.location.

And the last line tries to update the example-placeholder with the contents of the page found using the link url.