Uncaught TypeError: undefined is not a function in simplePagination.js

Question

I tried using the js file for including the pagination in my webpage but it is showing in browser console TypeError: $(...).pagination is not a function What can be the possible problem/issue with it? Note: I am using require.js to get the scripts loaded. Please replay, thanks in advance This is my require module named as testPagination.js

 define(['jquery','pagination'], function($,pagination) {
        /* GET DATASOURCE FROM HIDDEN FIELD */
        function Hello() {
            alert('helo...!!!');
        }

        function loadPagination(total)
        {
            alert("PAGINATION CALLED");
            $('#listing-paginationtest').pagination({
                items : total,
                    itemsOnPage : 10,
                    cssStyle : 'dark-theme',
                    onPageClick : function(pageNumber) {
                    }
            });
            alert("PAGINATION END");
        }

        return {
            Hello:Hello,
            loadPagination:loadPagination
        };
    });

and I am calling this module method like this in main.js

 require.config({

        baseUrl : "js",

        paths : {

            "text" : "libs/require/plugins/text",
            "jquery" : "libs/jquery/jquery",
            "blockUI" : "libs/jquery/plugins/jquery.blockUI",
            "pagination" : "libs/jquery/plugins/jquery.simplePagination",
            "cookie" : "libs/jquery/plugins/jquery.cookie",
            "backbone" : "libs/backbone/backbone",
            "underscore" : "libs/underscore/underscore",

            // BACKBONE MODELS
            "models" : "models/models",
            "templates" : "../templates",
            "plugins" : "libs/jquery/plugins",
            "pages" : "pages",
            "util" : "modules/store/util",
            "store" : "modules/store/main",

            // MODULES
            "datasourceModule" : "modules/datasourceModule",
            "cookieModule" : "modules/cookieModule",
            "testPagination":"modules/testPagination"
            "bootstrap" : "../design/js/bootstrap.min",
        },
        waitSeconds: 200,
        shim : {

            'jquery' : {

                exports : '$'
            },

            'backbone' : {

                deps : [ 'underscore', 'jquery' ],
                exports : 'Backbone'
            },

            'underscore' : {

                exports : '_'
            },

            'models' : {

                deps : [ 'backbone' ],
            },


            'datasourceModule' : {

                deps : [ 'jquery', 'backbone', 'models' ]
            },

            'store' : {

                deps : [ 'backbone' ],
            },

            'testPagination' : {

                deps : [ 'jquery' ]
            },
            // DESIGN
            'bootstrap' : {

                deps : [ 'jquery' ]
            },

        }
    });

        function loadPageNumbers() {
            alert("Hi hi");
            require([ "jquery", "testPaginationModule"],

            function($, testPaginationModule) {
                testPaginationModule.loadPagination(1000);
            });
        }

Does `#listing-paginationtest` exist at the time this is being called? — , Nov 21 '14 at 11:38
@torazaburo ,that is in div tag as id , but how do i check #listing-paginationtest exist at the time this is being called? — Juhan, Nov 21 '14 at 12:19
@torazaburo Element non-existence would have no impact on this. Given error is concerned with the method not existing on `jQuery.prototype` at all. — hon2a, Nov 24 '14 at 07:31

hon2a · Answer 1 · 2014-11-21T10:17:01.870

0

If you use libraries with "add globals" approach, you need to configure RequireJS to properly handle them. Otherwise they are loaded asynchronously in non-deterministic order.

requirejs.config({
    shim: {
        'jquery': {
            exports: 'jQuery'
        },
        'pagination': ['jquery']
    }
});

edited Nov 21 '14 at 10:17

answered Nov 21 '14 at 09:51

hon2a

7,006
5
41
55

https://github.com/flaviusmatis/simplePagination.js/blob/master/jquery.simplePagination.js I am using this js file for pagination – Juhan Nov 21 '14 at 09:59
Thanks, but I Already Configured that one and still getting the problem – Juhan Nov 21 '14 at 10:48
I've no experience with RequireJS, so I can't see anything obvious. Try either creating a live jsfiddle/codepen reproducing the problem or debugging it yourself (log to console from your `jQuery` and `pagination` libs and find out whether they're included at all and in which order). – hon2a Nov 24 '14 at 07:34

Uncaught TypeError: undefined is not a function in simplePagination.js

1 Answers1