CODEWITHSUNDEEP
javascriptjquerypagination
Narc0t1CYM
Narc0t1CYM

Reputation: 632

pagination called to multiple elements not working, only calls it for the last one

I've got a pagination script which is when called multiple times, only fires for the last element that has been called. Any ideas why is this happening?

<script>
$('.calendar-nagyhaz').scrollPagination();
$('.calendar-felso').scrollPagination();
</script>

If I try to call it like this only ".calendar-felso" will be affected. The pagination script looks like this:

(function($) {

$.fn.scrollPagination = function(options) {

    var settings = { 
        nop     : 1, // The number of posts per scroll to be loaded
        offset  : 0, // Initial offset, begins at 0 in this case
        error   : '', // When the user reaches the end this is the message that is
                                    // displayed. You can change this if you want.
        delay   : 500, // When you scroll down the posts will load after a delayed amount of time.
                       // This is mainly for usability concerns. You can alter this as you see fit
        scroll  : false // The main bit, if set to false posts will not load as the user scrolls. 
                       // but will still load if the user clicks.
    }

    // Extend the options so they work with the plugin
    if(options) {
        $.extend(settings, options);
    }

    // Some variables 
    $this = $(this);
    $settings = settings;
    var offset = $settings.offset;
    var busy = false; // Checks if the scroll action is happening 
                      // so we don't run it multiple times

    function getData(add) {

            if (add == true) {offAdd = offset+$settings.nop; } else { offAdd = offset-$settings.nop; }
            offset = offAdd;
            lakas = $this.attr("data-lakas");
            alert(lakas);

            // Post data to ajax.php
            $.post('ajax.php', {

                action        : 'scrollpagination',
                number        : $settings.nop,
                offset        : offset,
                lakas         : lakas

            }, function(data) {

                    // Append the data to the content div
                    $this.find(".calendar").empty().append(data);

                    // No longer busy!  
                    busy = false;

            });

            $.post('month.php', {

                action        : 'scrollpagination',
                number        : $settings.nop,
                offset        : offset

            }, function(data) {

                    offset = offAdd;

                    // Append the data to the content div
                    $this.find('.cal-month').empty().append(data);

                    // No longer busy!  
                    busy = false;

            });

        }   

        //Run it for the first time
        getData();

        // Also content can be loaded by clicking the loading bar/
        $this.find('.cal-prev').click(function() {

            if(busy == false) {
                busy = true;
                getData(false);
            }

        });

        $this.find('.cal-next').click(function() {

            if(busy == false) {
                busy = true;
                getData(true);
            }

        });
}

})(jQuery);

Upvotes: 0

Views: 68

Answers (1)

gregn3
gregn3

Reputation: 1774

You are setting global variables here:

$this = $(this);
$settings = settings;

It really means: 

window.$this = $(this);
window.$settings = settings;

What you probably intended is:

var $this = $(this);
var $settings = settings;

That's just one bug, bug there may be more.

Here too, these are all globals:

        if (add == true) {offAdd = offset+$settings.nop; } else { offAdd = offset-$settings.nop; }
        offset = offAdd;
        lakas = $this.attr("data-lakas");

offAdd, offset, lakas, these need a var in front of them to make them local variables.

When you have 2 instances of that function, they overwrite each other's variables. (Because they are globals)

Upvotes: 1

Related Questions