(in a userscript for reddit.com) It only appends page 2 when having login

[darkred]

I've made this userscript in order to use jScroll it in reddit.com and any subreddit

// ==UserScript==
// @name        Reddit jScroll
// @namespace   
// @include     http://www.reddit.com/*
// @version     1
// @grant       none
// @require     https://raw.githubusercontent.com/pklauzinski/jscroll/master/jquery.jscroll.min.js
// ==/UserScript==

$('span.nextprev').jscroll({
  contentSelector: 'div.content'   
});

where span.nextprev is the selector for the Next button
and div.content is the selector for the links content of every next page.

If open eg. reddit.com without login, then it works ok (it appends every next page).
The problem is when I try my userscript having login:
it only appends page 2, not the next pages
(it just shows Loading... at the end of the appended page 2 )
for example in:

1. http://www.reddit.com (I've only subscribed to 2 subreddits)
2. eg. http://www.reddit.com/r/firefox/

Is my userscript wrong or it'is jScroll?

[pklauzinski]

@darkred - The element you call $().jscroll on should be the container into which the content will be loaded, not the selector for the next button. Your next button selector should be provided in the options as nextSelector: 'span.nextprev a' - Additionally, the nextSelector needs to be an anchor <a> tag so that jScroll has an href to use for the next set of content.

Based on looking at your site's code, I think what you want is something like this:

$('#siteTable').jscroll({
    nextSelector: 'span.nextprev a',
    contentSelector: '.thing'
});

I don't know what your ajax response looks like exactly, but if it is just like the original page content, then you will want your next page content to be filtered by inserting only the .thing elements, and not necessarily everything that is within div.content. Keep in mind that contentSelector includes the element(s) that you are filtering by, and not just what is within it, i.e. if you set contentSelector: '#siteTable' then the #siteTable element will be inserted into the existing #siteTable element, which you don't want!

Please let me know if this helps!

[pklauzinski]

@darkred - Also, make sure you are not linking to javascript from raw.github.com, as the headers will not be sent correctly and break the script in some browsers - see this post on stackoverflow: http://stackoverflow.com/questions/7180099/including-js-from-raw-github-com

Instead, I suggest you use something like https://rawgit.com/ or maintain the script on your server itself.

[darkred]

Thank you very much for the detailed and instructive replies!
(about your latter post:
I'll use this now: // @require https://cdn.rawgit.com/pklauzinski/jscroll/master/jquery.jscroll.min.js)

I just tried your code and it only appends page 2.
Also, before it appends page 2, it adds the entries from the "recently viewed links" table
(please check the red arrows in my screenshot to see what I mean)

Unfortunately I'm unable to make the script work.
Please, if you wish, login to reddit and help me with this.

[pklauzinski]

@darkred - Ok, I see the reason for both issues. As for the pagination, once you go to the second page, span.nextprev contains both "previous" and "next" links, but you only want jScroll to target the "next" link, so change your nextSelector to span.nextprev a:last.

Secondly, the "recently viewed links" section also uses the thing class, so you need a contentSelector that is more specific to the items within #siteTable. Try changing your code to this:

$('#siteTable').jscroll({
    nextSelector: 'span.nextprev a:last',
    contentSelector: '#siteTable .thing'
});

[darkred]

I tried it and, yes, the "recently viewed links" section is no longer appended.
But unfortunately it only appends page 2, as well.

[pklauzinski]

Ah.. sorry, you also need to include .nav-buttons in your contentSelector so that it is loaded into the content to find the nextHref. Corrected code:

$('#siteTable').jscroll({
    nextSelector: 'span.nextprev a:last',
    contentSelector: '#siteTable .thing, .nav-buttons'
});

I just tried this out on http://reddit.com and it works.

[darkred]

Now it works great!!
I've learnt a lot about your great plugin!
I now might be able to use it for other sites too.

Thanks a lot for all your help and for making this!

[pklauzinski]

@darkred - You may also want to add a callback option to hide or remove the nav-buttons div so that it does not disrupt the flow of content. For example:

callback: function() {
    $('.nav-buttons').remove();
}

[darkred]

Thanks! Now it's perfect!