How can I make a function defined in jQuery.ready available globally?

Question

I have a function that strips the youtube id off a url. I then want to use this function 10 time per page (in the wordpress loop).

The function works great when I fe

Answer 1

Yet another option is to hang the function off the jQuery object itself. That way you avoid polluting the global name space any further:

jQuery.getlist = function getlist(url, gkey) {
  // ...
}

Then you can get at it with "$.getlist(url, key)"

Answer 2

declare getList() outside the ready() function..

var getList = function(url, gkey){
        var returned = null;
        if (url.indexOf("?") != 
....
....
...
};

Now the getList will work anywhere in the code:

$(document).ready( function() {
alert(getList('http://www.youtube.com/watch?v=dm4J5dAUnR4', "v"));
});

The problem was, scope of the getList(.) function.

Answer 3

To declare it as a global function, just get rid of all the jQuery specific bits. Something like this:

function getList(url, gkey) {
    var returned = null;
    if (url.indexOf("?") != -1){
    var list = url.split("?")[1].split("&"), gets = [];
    for (var ind in list){
        var kv = list[ind].split("=");
        if (kv.length>0) {
            gets[kv[0]] = kv[1];
        }
    }

    returned = gets;

    if (typeof gkey != "undefined") {
        if (typeof gets[gkey] != "undefined") {
            returned = gets[gkey];
        }
    }

    return returned;
}

And then you should be able to call it from anywhere.

Answer 4

You can simply add your function in the $.fn variable:

(function ($) {

   $.fn.getList = function() {
       // ...
   };

}(jQuery));

Example usage:

$().getList();

This is what you would typically do while creating a Basic Plugin for jQuery.

Answer 5

Just define it as a regular function at the top of your script:

<script type="text/javascript">
    function getlist(url, gkey){  
        ...
    }
</script>

Answer 6

You have two options, add it to the window object to make it global:

window.getList = function(url, gkey){ 
    // etc...
}

or move it from inside the document ready event handler into the global scope:

$(document).ready(function() {  
    alert(getList('http://www.youtube.com/watch?v=dm4J5dAUnR4', "v"));
});  
var getList = function(url, gkey){  

    var returned = null;  
    if (url.indexOf("?") != -1){  
      var list = url.split("?")[1].split("&"),  
              gets = [];  

      for (var ind in list){  
        var kv = list[ind].split("=");  
        if (kv.length>0)  
            gets[kv[0]] = kv[1];  
    }  

    returned = gets;  

    if (typeof gkey != "undefined")  
        if (typeof gets[gkey] != "undefined")  
            returned = gets[gkey];  

    }  

        return returned;  

};  

You might also want to read this question about using var functionName = function () {} vs function functionName() {}, and this article about variable scope.