CODEWITHSUNDEEP
javascriptjqueryyui
Bilal
Bilal

Reputation: 2740

jQuery and YUI load

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.

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

Upvotes: 0

Views: 625

Answers (1)

ludo
ludo

Reputation: 374

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();

    });    
});

Upvotes: 2

Related Questions