Can jQuery .load append instead of replace?

Question

I have a WordPress install and I'm trying to use jQuery to create a Load More effect. I'm having some trouble using the basic .load feature for page fragments. I don't mind using .get as I saw some threads here regarding that as a better solution.

Here's my page URL structure and the contents:

First Page: http://example.com/page/1/

The HTML:

<div id="articles">
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
</div>

Second Page: http://example.com/page/2/

The HTML:

<div id="articles">
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
  <div class="story">blah blah blah</div>
</div>

I have a link at the bottom of the page and I've tried doing the following:

jQuery(#articles).load('http://example.com/page/2/ #articles');

Sadly, there are 2 issues. First the .load function grabs the #articles div and its contents from the second page and places it into the existing #articles div. That means, even if this were to work, there would be recursive divs within divs resulting from each click. It's just messy.

Could someone help me with the command to simply append the .story classes from the second page into the #articles div on the first page? I can figure out the logistics of automating it with variables, loops, and PHP for WordPress after. Just need some assitance with the proper jQuery script.

P.S. Bonus Question: If anyone knows whether jQuery .load/.get will harm pageviews, which is important for those with advertising-based revenue, please let me know! If each .load/.get counts as another hit for Google Analytics, we're good!

Thanks!

Sprag

I don't think $.load() will effect google analytics. In order for google to register a pageview the actual page needs to load in such a way that the google analytics JavaScript gets executed. The google JavaScript gets executed when a page is loaded into a browser window but not when you're just retrieving the file's contents as you are with $.load(). – Maltese

Answer 1

You can't append content using the jQuery.load() method, but you can do what you want using jQuery.get():

$.get('/page/2/', function(data){ 
  $(data).find("#articles .story").appendTo("#articles");
});

Donnadonnamarie

Gabriel, thanks! Your code was very easy to understand and worked right off the bat. I'm using your code along with Znarkus's concept for importing containers to jump to the right spot. Just trying to figure out how to rewrite links temporarily, any help would be awesome. The issue is described under Znarkus's comment above. – Sprag

if you want to filter the loaded content get() won't do the job. $.load('/page/2/ .posts'); for example – Jules

I just had a similar problem, and this seems to be working but gives me an empty Object when I log it to the console for debugging. Nothing comes up on the page either. :( – Autonomous

Answer 2

I'd probably do it like this.

$('#articles').append($('<div/>', { id: '#articles-page2' });
$('#articles-page2').load('http://example.com/page/2/ #articles > *');

#articles > * fetches all immediate children to #article.

Bringingup

Hey Znarkus, could you clarify the code a bit more? Will I need to have the PHP generate DIVs named #articles-page2, #articles-page3, etc.? – Sprag

Yes. That would also make it easier to separate the pages, useful for properly handling history (user pressing the back button in the browser). You could then just load the page http://example.com/page#articles-page3 and the browser would scroll down to that result set – Bringingup

I got it working with your idea and the code from Gabriel below! One more question slightly-related though. I have <a class="loadmore" href="http://example.com/page/2/">Load More</a> I'm using .attr to read the value of that link to grab the next page for .load. I still want it to be a link in case JS is disable / not working / SEO. But how can I have jQuery rewrite it to scroll to the #articles-page2 DIV that would be generated inline for instance? Thanks again! – Sprag

You shouldn't change the link, but change the current URL hash with something like location.hash = '#articles-page2'. Or better, use some jQuery plugin, look at plugins.jquery.com/plugin-tags/hash – Bringingup

Answer 3

For appending data, I don't think you would want to use $.load(). Instead, you might want to look into using $.ajax().

$.ajax({
  url: 'yourlocation/test.html',
  success: function(data) {
    $('.result').html(data);
    $("#yourdiv").append(data);
  }
});

Maltese

Answer 4

Try this it worked for me.

$('#articles').append( $('<div/>').load('http://example.com/page/2/ #articles') );

Mehitable

Answer 5

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

Baileybailie