Best way to locate source of Warning: Empty string passed to getElementById()
JavascriptJqueryJavascript Problem Overview
>Warning: Empty string passed to getElementById().
>Source File: chrome://browser/content/browser.xul
>Line: 0
Some days ago I started getting the above message while developing my site. Things are working as they should (or at least I think they are), but I want to find out where this is coming from. I use jQuery so do not use getElementById() directly. Plus I have Firebug and the Web Developer extension for Firefox running.
I could laboriously put in code to check for an empty string being given to a jQuery selection or maybe look into jQuery itself, but my skills are minimal, so I'm asking here if anyone has offhand a good idea for quickly locating the source of the warning messages.
Javascript Solutions
Solution 1 - Javascript
Source File: chrome://browser/content/browser.xul
This means that the error is in a Firefox extension, not in your code.
Solution 2 - Javascript
Was receiving this warning in Firefox.
I just came across this warning and found that there were labels for input fields but the labels for attribute was not set/empty so just completing the for attribute fixed this issue for me.
// Label's for attribute not set which caused the warning in FF
e.g. <label for=''>Text</label><input type="text" name="text" id="text" value="" />
Solution 3 - Javascript
If you are querying by '#' selector -- ensure the selector is unique (as it should be) or you will end up with this error in ff
Solution 4 - Javascript
In my case this was caused by Firefox performing HTML5 checks on the input fields on my form. Once the "required" property was removed from the form elements everything seemed to work fine again.
This was something brought about by the MVC framework I use which generates these properties based on the model validation rules that require a field to be non-empty.
Solution 5 - Javascript
This answer was really helpful to me in finding why it was happening so I decided to share.
I've placed the following code OUTSIDE document.ready and got this error.
// Enable Line Items ONLY AFTER general info is filled out!
$( "#client_estimate_continue_next" ).click(function(e) {
//e.preventDefault();
console.log(this.id + ' click event fired.');
// DO SOMETHING...
});
I was able to fix the error by simply placing it INSIDE document.ready
Additional info:
I got the error but in my case it was coming from my own script according to FireFox.
I believe I got the error because I made a reference to the id of an element that was not yet fully rendered eg. NOT ready.
> Warning: Empty string passed to getElementById().