1

I have a working project with jquery, jquery mobile and requireJS (2.0). Now I have a problem with integrating jquery.mobile.iscrollview into the requireJS world.

My requirejs configuration looks like this:

(function (require) {
    "use strict";
    require.config({
        paths:{
            'angular':'../external-libs/angular-1.0.3',
            'jquery':'../external-libs/jquery-1.7.2',
            'jquery.mobile':'../external-libs/jquery.mobile-1.2.0',
            'adapter': '../external-libs/jquery-mobile-angular-adapter-1.2.0',
            'moment': '../external-libs/moment-1.6.2.min',
            'iscroll': '../external-libs/iscroll',
            'iscrollview': '../external-libs/jquery.mobile.iscrollview'
        },
        shim:{
            'angular':{ deps:['jquery'], exports:'angular' },
            'iscroll':{ deps:['jquery'], exports:'iscroll' },
            'iscrollview':{ deps:['jquery.mobile', 'iscroll'], exports:'iscrollview' }
        }
    });

    require([
        "jquery",
        "jquery.mobile",
        "adapter",
        "moment",
        "iscroll",
        "iscrollview",
        "myApp"
    ], function () {
    //
    });
  }(require));

That is working very well, as long as the requireJS optimizer hasn't run for production mode where only one big JS file should be served to clients. Even when setting the optimizer to don't optimize anything (optimize: none) so its only concatinating all js files together, its not working.

The error message when loading the site is

Uncaught TypeError: Cannot read property 'ignoreContentEnabled' of undefined

It happens in the file "jquery.mobile.iscrollview.js" and its obvious from the code that the $.mobile object is not yet available at the time of parsing the file, as that is created only after the jquery ready event (I think).

Any idea how to fix this?

Thanks!

Marco

2 Answers 2

2

Have solved it by myself now by converting jquery.mobile.iscrollview to a AMD module. Like so:

 define(function () {


    function iScrollView($) {
        //here comes the iscrollview code, but without event handler to pagecreate
    }

    jQuery(document).bind("pagecreate", function (e) {
        "use strict";
        iScrollView(jQuery); //this is doing the init stuff that normally happens
                             //when script is loaded, lines after this are the 
                             //original event handler

        var elements = jQuery(e.target).find(":jqmData(iscroll)");
        elements.iscrollview();
    });

    return iScrollView;

});
0

Chances are the issue here is timing of loading vs running of jQuery core. (That's why I personally prefer CurlJS. Never had a timing problem with it)

Still, if the nuttiness of the configuration system is letting you down, take control into your own hands and declare the order explicitly:

require.config({
    paths:{
        'angular':'../external-libs/angular-1.0.3',
        'jquery':'../external-libs/jquery-1.7.2',
        'jquery.mobile':'../external-libs/jquery.mobile-1.2.0',
        'adapter': '../external-libs/jquery-mobile-angular-adapter-1.2.0',
        'moment': '../external-libs/moment-1.6.2.min',
        'iscroll': '../external-libs/iscroll',
        'iscrollview': '../external-libs/jquery.mobile.iscrollview'
    }
});

require(["jquery"], function($){
    require(["angular", "jquery.mobile"], function(angular){
        require(["adapter","iscroll"], function(){
            require(["myApp","moment","iscrollview"], function(myApp){
                // do something with
                myApp, $, angular
            })
        })
    })
})

I don't know what 'moment' is, so put it last, as, based on your shim structure, it does not depend on anything.

1
  • Interesting solution, haven't tried it. But I ended up with converting jquery.mobile.iscrollview to an requireJS module by myself and doing its initialization stuff in the pagecreate event that it was already binding to for some late init stuff. So now ALL of its initialization stuff is done in the event handler. Works. Downside is of course that I have to re-do that after the next update. But we'll see. Thanks for your help! Commented Feb 1, 2013 at 7:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.