jQuery loads entire page, need for multiple pages

I have a page generated by php specifically for use in jQuery. It has 3 divs with 3 different IDs.

I’ve been using .load() to get the contents of each div and put it within the page, but I’ve realized that if I use it multiple times within the page (ex: load the same page, get different div each time) it actually reloads the page every time it’s used.

I’m not very experienced with jQuery, so I don’t know how to get the html of the page just once and then manipulate it so I can get the contents of each div. I assume with .ajax right? But can someone point me in the direction of how exactly I’d do that–the jQuery docs don’t help me out too much with this.

Thanks!

Figured it out, took a while but I guess that;s how you learn

Instead of doing .load() twice, I used ajax to get the html of the page, then got the html within the individual divs by using filter. Turns out load() loads the page and all of the elements (ex: pics) on the entire page even if they’re not being displayed.

simplified version of my code:


$.ajax({
    url: 'http://example.com,
    dataType: 'html',
    success: function(data) {
        $('#destination1').html($(data).filter('#source1').html());
        $('#destination2').html($(data).filter('#source2').html());
    }
  }
});

Can you post your code so that I can see what you are seeing please.