Question

I am bringing in a particular div (.source_div) from one part of my website into another div (.destination_div) on another part of my website using the following code:

<script type="text/javascript">
$(document).ready(function(){
$('.destination_div').load('http://myurl.mypage.com/something.aspx .source_div');
});
</script>

However, the .source_div contains links that go to other parts of my website. When I click on these links, I would like for those pages to continue displaying within my same .destination_div that I am on, and not taking me away to another page (which is what it currently does). On another slightly related note, I also have a form within my .source_div that that performs a postback which also appends the html. This does not work within my .load either. I have looked around and cannot figure out how to do either one of these things correctly. Could someone please help with one or both of these issues?

Answer 1

Implementation could be something like this.

$(document).ready(function(){
   $('.destination_div').load('http://myurl.mypage.com/something.aspx .source_div'); // your page is loaded first
   $('.destination_div').on('click','a',function() {
       var url = $(this).attr("href");
       $('.destination_div').load(url);
       return false;
   });
});​

EDIT: added your previous code