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

Question

I have a function that removes youtube id from url. Then I want to use this function 10 times per page (in the wordpress chain).

This function works fine when I feed it with the URL in a script function tag, but when I run a new set of script tags in a loop, it does not work.

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

So this is the code that 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 to use it somewhere else on the page, it does not work.

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

Firebug gives me getList not defined , which makes sense because it doesn't exist. Can I declare this function globally?

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 the document's event handler to 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 can also read this question about using var functionName = function () {} vs function functionName() {} and in this article about scope variable.

Answer 2

Another option is to hang the function directly from the jQuery object. This way you avoid polluting the global namespace:

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

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

Answer 3

declare getList () outside the ready () function.

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

Now getList will work anywhere in the code:

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

The problem was the getList (.) Function.

Answer 4

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

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

Answer 5

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

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

Usage example:

 $.getList(); 

This is what you usually do when creating the Core jQuery plugin .

Answer 6

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

 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 can call him from anywhere.