How to store a global value (not necessarily a global variable) in jQuery?

JavascriptJqueryGlobal Variables

Javascript Problem Overview


Currently I am working on a legacy web page that uses a ton of JavaScript, jQuery, Microsoft client JavaScript, and other libraries. The bottom line - I cannot rewrite the entire page from scratch as the business cannot justify it. So... it is what it is. Anyway, I need to pollute (I really tried not too) the global namespace with a variable. There are the three options I was thinking about -

  1. Just store/retrieve it using a normal JavaScript declaration - var x = 0;

  2. Use jQuery to store/retrieve the value in a DOM tag - $("body").data("x", 0);

  3. Use a hidden form field, and set/retrieve the value with jQuery - $("whatever").data("x", 0);

Is there a better way? I looked at the existing pile of code, and I do not believe the variable can be scoped in a function.

Javascript Solutions


Solution 1 - Javascript

You can create a namespace inside the jQuery object, like so:

$.mynamespace = { 
    myVar : "something", 
    myVar2 : "somethingElse" 
}; 

or:

$.mynamespace = {};
$.mynamespace.myVar = "something";
$.mynamespace.myVar2 = "somethingElse";

Bear in mind, any plugin method named 'mynamespace' will be overwritten so be sure to use a sensible name.

Solution 2 - Javascript

For me the best way to handle this situation is to define an object in the window object:

window.my_config =
{
	my_var1 : 1,
	my_var1 : 2,
	my_var1 : 3
};

This would keep your scope neat and clean. And whenever you would access the global using window.my_config anyone looking at the code would know that a global is being accessed.

Solution 3 - Javascript

You can create a hash in the global scope and use it as a namespace:

MyNamepace={}
MyNamespace.newvar = 'value'
// MyNamespace.newvar => 'value'

Solution 4 - Javascript

Just sharing my practice with you, I would make a global object/var in the required JavaScript file with a sensible prefix, as in if I am working on a page where this object will be a text box then I would name it:

g_TxtMyValue = 'value';    // g_ specifies it to be a global variable, it is one
                           // of the many conventions used

If you have more than one global variable, you can also have a namespace such as:

my_txt = {};  // For a real site I would use a prefix relative to the project
              // name instead of "my".

my_txt.testValueOne = 'Value one';
my_txt.testValueOne = 'Value two';

These variables will be available to you throughout the website, after they have been initialized.

I hope this helps.

Solution 5 - Javascript

Just a short notice:

Is the fancybox doing AJAX (meaning: if it loads within an iFrame, you should add "parent" to the close method), like this:

parent.$.fancybox.close();

Solution 6 - Javascript

Use underscore isEmpty().

_.isEmpty('') will return true.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionKris KrauseView Question on Stackoverflow
Solution 1 - Javascriptkarim79View Answer on Stackoverflow
Solution 2 - Javascriptovais.tariqView Answer on Stackoverflow
Solution 3 - JavascriptPedro RoloView Answer on Stackoverflow
Solution 4 - JavascriptUmair JabbarView Answer on Stackoverflow
Solution 5 - JavascriptMorizView Answer on Stackoverflow
Solution 6 - JavascriptEldadView Answer on Stackoverflow