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 feed it the url within my function script tags, but when I start a new set of script tags within the loop, it does not work.

I need to know how I can use my function without declaring it all first.

So this is the code I have in the header:

 <script type="text/javascript">  $(document).ready(function() { 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;      };           // THIS WORKS      alert(getList('http://www.youtube.com/watch?v=dm4J5dAUnR4', "v"));         }); 

But when I try use this somewhere else on the page, it doesnt work.

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

Firebug gives me getList is not defined which makes sense, because its not. Am I able to 'globally' declare this function?

Answer 1

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.

Answer 2

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)"