jScroll doesn't seem to work ok with a page displaying results in a table about jscroll HOT 9 CLOSED

I managed to get this working by using the callback. Basically, it grabs the new rows and new pagination from the last 'jscroll-added' div, replaces the old pagination, and appends the new rows to the table's tbody. Overly commented code below:

callback: function () {
    var newRows = $('.jscroll-added:last table tbody').html(),  // Get new rows
        newPage = $('.jscroll-added:last .pagination').html();  // Get new pagination
    $('.jscroll-added:last').remove();      // Remove the newly added 'jscroll-added' div
    $('.pagination').html(newPage);         // Replace existing pagination with newPage
    $('table > tbody').append(newRows);     // Append the new rows to the table's tbody
}

from jscroll.

@darkred - For nextSelector you can use the following string instead of creating a jQuery object:

nextSelector: 'a:has(img[src="https://piratebay.org/img/next.gif"])'

Let me take a look into the other issues and I will get back to you.

from jscroll.

@darkred - Unfortunately, jScroll isn't currently designed to work within tables. It will add <div> elements within your table elements, creating invalid HTML. I would say your best option at this time is to call jScroll on #main-content and load each subsequent <table> from the jScroll payload underneath one another.

I do see the utility in having jScroll work within tables, however; so I will mark this as an enhancement.

from jscroll.

Thanks a lot for your replies.

For nextSelector you can use the following string instead of creating a jQuery object:

nextSelector: 'a:has(img[src="https://piratebay.org/img/next.gif"])'

Unfortunately the relational pseudo-class :has() (a Level 4 selector) is still not supported by FIrefox 39 (nor in Chrome 43).
Browser CSS-Selector-Test

Your other suggestion (about calling jScroll on #main-content and using table as contentSelector) is indeed the best current option. Thanks!

from jscroll.

:has() is not supported natively by all browsers, but it is a jQuery selector and is normalized for unsupported browsers.

See: http://api.jquery.com/has-selector/

from jscroll.

Sorry for the misunderstanding, but I thought that it wasn't a jQuery selector but a CSS one,
because you wrote it without a $ in front
i.e. not nextSelector: $('a:has(img[src="https://piratebay.org/img/next.gif"])')

But, unfortunately it doesn't work either way: it only appends page 2.
Please try it yourself:

// ==UserScript==
// @name        thepiratebay jScroll
// @include     https://thepiratebay.*/browse/*
// @version     1
// @grant       none
// @require     http://code.jquery.com/jquery-2.1.4.min.js
// @require     https://cdn.rawgit.com/pklauzinski/jscroll/master/jquery.jscroll.min.js
// ==/UserScript==

$('#main-content').jscroll({    
    nextSelector: 'a:has(img[src="https://piratebay.org/img/next.gif"])',
    contentSelector: 'table'
});

The problem:
in the end of the table (i.e. appended page 2) the last row (which contains the "Next" link) is missing
(though it's contained inside the table element)
therefore jScroll cannot continue with page 3.

from jscroll.

is this going to be solved anytime soon?

from jscroll.

That's it! Thank you, @kmkroski

from jscroll.

I tried kmkroski's solution, but found two problems.
First, the next button only worked once - probably has something to do with copying html instead of dom objects with attached events. Solution: Replace pagination element.
Second, on the last page, there would be an additional table which was not merged. Solution: Use a selector for the table and use :first and :last.
Working solution, assuming table class="my-list":

callback: function () {
    // Append new results to existing table
    $('.my-list:last > tbody tr').detach().appendTo($('.my-list:first > tbody'));
    // Replace existing pagination with new while keeping attached events
    $('.pagination:first').replaceWith($('.pagination:last'));
    // Remove the newly added 'jscroll-added' div, as well as the remaining unwrapped table on the last page
    $('.jscroll-added,.my-list:nth(1)').remove();
}

from jscroll.