Question

I am using jQuery and YUI-3.6.0 in my application. I am using YUI history module. I trie to create a wrapper on YUI history as below. (This is saved in “history-wrapper.js”)

var MyHistory;

(function() {
    YUI().use('history', function (Y) {
        var history = null;

        MyHistory = function() {
            history = new Y.History();
        };

        MyHistory.prototype.save= function() {
            history.add({
                data : "some data"
            });
        };

        MyHistory.prototype.load= function() {
            var data = (history.get("data");
            //process data
        };
    });
})();

I am using this wrapper with following lines of code

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="yui/yui/yui-min.js"></script>
<script type="text/javascript" src="js/history-wrapper.js"></script>
<script type="text/javascript">
    var jQ = jQuery.noConflict();

    jQ(document).ready(function() {
        var history = new MyHistory();
        history.save();
    });
</script>

I am using same code in two different application.

• In one application, everything works fine as Wrapper is loaded first.
• In other application it throws “MyHistory is not defined” as “jQ(document).ready” function is called before wrapper is loaded.

I have no idea what causes this behavior. Can anyone help me?

Answer 1

The callback function “function(Y){… where you define MyHistory…}” in the YUI.use() is only executed when the dependendies (history) are loaded.

Then, you have no assurance MyHistory is defined when you try to use your wrapper.

The solution may be you put your JQuery code in the the YUI.use() too. You can make the YUI loader load jquery and the history module, you the no longer need to wrap the Histroy plugin.

I’m not sure it is exactly like this (cannot check it now).

<script type="text/javascript" src="yui/yui/yui-min.js"></script>
YUI({
    modules: {
        'jquery': {
            path: 'js/jquery.js'
        }
    }
}).use('history', 'jquery' , function (Y) {
 var jQ = Y.jQuery.noConflict(); //or juste jQuery.noConflict();

    jQ(document).ready(function() {  //it is likely the document will already be ready
        var history = new Y.History();
        history.save();

    });    
});