jScroll.js with Laravel 5: nextSelector not found - destroying

Question

I am using a combination of jscroll.js, jquery.upvote.js and Laravel's paginate() method. It all works except for this little thing, the last post in the pagination page always has unclickable voting buttons.

No errors in the developer's console either.

At the moment, I'm using paginate(2) because I only have 3 posts in the category.

EDIT: I just added a few more posts and noticed that the voting buttons only work on the first page, the rest of the pages are rendering the vote buttons unclickable.

EDIT 2: I turned on debug: true in jscroll.js and I'm getting this new error

jScroll: nextSelector not found - destroying

The "next" selector markup looks like this

<a href="24?page=2" rel="next">»</a>

If I remove paginate(2) and jscroll.js all voting buttons start functioning properly.

SubredditController

$subreddit = Subreddit::with('posts.votes')->with('moderators.user')->where('id', $subreddit->id)->first();
$posts = $subreddit->posts()->paginate(2);

The view

<link rel="stylesheet" href="{{ URL::asset('assets/css/jquery.upvote.css') }}">
    <script src="{{ URL::asset('assets/js/jquery.upvote.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/jquery.jscroll.min.js') }}"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.topic').upvote();

            $('.vote').on('click', function (e) {
                e.preventDefault();
                var $button = $(this);
                var postId = $button.data('post-id');
                var value = $button.data('value');
                $.post('http://localhost/reddit/public/votes', {postId:postId, value:value}, function(data) {
                    if (data.status == 'success')
                    {
                        // Do something if you want..
                    }
                }, 'json');
            });

            $('.scroll').jscroll({
                autoTrigger: true,
                nextSelector: '.pagination li.active + li a',
                contentSelector: 'div.scroll',
                callback: function() {
                    $('ul.pagination:visible:first').hide();
                }
            });
        });
    </script>

<div class="scroll">
   @foreach($posts as $post)
        @include('partials/post')
   @endforeach
   {!! $posts->render() !!}
</div>

Lance Pioch · Accepted Answer · 2015-10-14 21:46:24Z

2

+50

Any new elements being created after the initial page will need to have the click events assigned to them also.

// transform anonymous function to real and reusable one
function voteClick(e) {
    e.preventDefault();
    var $button = $(this);
    var postId = $button.data('post-id');
    var value = $button.data('value');
    $.post('http://localhost/reddit/public/votes', {postId:postId, value:value}, function(data) {
        if (data.status == 'success')
        {
            // Do something if you want..
        }
    }, 'json');
}

$('.vote').on('click', 'voteClick'); // use new function here

$('.scroll').jscroll({
    autoTrigger: true,
    nextSelector: '.pagination li.active + li a',
    contentSelector: 'div.scroll',
    callback: function() {
        $('ul.pagination:visible:first').hide();
        $('.vote').on('click', voteClick); // add this to apply the event to all of your .vote elements again.
    }
});

edited Oct 14, 2015 at 21:46

answered Oct 14, 2015 at 20:53

Lance Pioch

1,1676 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Halnex Over a year ago

I do not understand, I already have an on.click event, where else should I have it? Should I put the $('.scroll').jscroll() inside the on.click even?

Lance Pioch Over a year ago

Your on click event is only applied to the initial elements on the page (load). For every new element that is added by the jscroll, you'll need to add the click event ($('.vote').on('click')) to it.

Halnex Over a year ago

I don't understand how's that gonna work. A small code example maybe?

Lance Pioch Over a year ago

I added some example code. In the example I simply reapply the on click event to all elements. You'll probably want to only apply it to the newly created ones.

Halnex Over a year ago

I tried putting that in the callback function of $('.scroll') but that didn't change anything.

|

Collectives™ on Stack Overflow

jScroll.js with Laravel 5: nextSelector not found - destroying

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related