views:

49

answers:

3

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!

+3  A: 

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");
});
gabriel
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.
Sahas Katta
+3  A: 

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.

Znarkus
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.?
Sahas Katta
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
Znarkus
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!
Sahas Katta
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 http://plugins.jquery.com/plugin-tags/hash
Znarkus
A: 

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);
  }
});
quakkels