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.
Source File: chrome://browser/content/browser.xul
This means that the error is in a Firefox extension, not in your code.
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="" />
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
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.
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().
Related
I am changing the javascript in my project to jquery. This is the first time im using Jquery and expect me to be making silly mistakes please.
I placed a simple JQ alert function in a .js file which looks like below.
$(document).ready(function(){
$("#stt").change(function(){
alert("hi");
});
});
So the aim is to throw an alert msg when the value of a td element with id="stt" is changed.
<tr id="stttr">
<td id="stt"> <html:text property="stt" size="20" maxlength="20" style="height:12px; width: 180px;" /></td></tr>
and this is how im referencing jquery between the head tags of the jsp.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9/jquery.min.js"></script>
<script src="javascript/SearchPanelJQ.js"></script>
<script src="javascript/CalendarPopup.js"></script>
The Calendarpop.js is an older javascript file which i dont want to replace (it works fine on all browsers).
Now when i visit this page in a browser with script debugging enabled in IE, i get the following error .
HTML1201: localhost is a website you've added to Compatibility View.
ReportingTemplate.jsp
SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.
ReportingTemplate.jsp
SCRIPT5007: The value of the property '$' is null or undefined, not a Function object
SearchPanelJQ.js, line 1 character 1
The last line tells me something is not right with the setup. Can you tell me what?
I installed the jsdt jquery plugin and am using JQ v1.9.
The project is a struts project.
Edit:
1) It works when the JQ function is included in the jsp. it dosent work when its in a different .js file.
2) even if i include http:in the reference, it only works when the document.ready function is in the same JSP and not when it is in a different .js file. This beats the purpose as the same validations will be used in multiple pages in my project.
for future reference:
Run in Chrome (or any browser as other users have pointed out)
Right click > Inspect Element > Console
Read error logs (Console can provide js, php, and other errors to help pinpoint specific lines where the malfunction is happening)
Your
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9/jquery.min.js"></script>
should be
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9/jquery.min.js"></script>
The reason, provided by user2736012 is:
OP is using a "protocol relative" url, which automatically uses the protocol that was used for fetching the page. In this case, if the protocol is file://home/User/Desktop/foo.html, the protocol relative url becomes file://ajax.googlapis..., which of course won't work. But it'll work when fetching the page using http, because it'll then be http://ajax.googleapis...
I found the issue. I am referencing JQ version 1.9 because i read in a tutorial that it should automatically pick the latest version in the 1.9 series. It works if i change it to 1.9.0 or 1.9.1. However, i still dont understand why 1.9 didnt work. it should have picked the latest 1.9.* version.
But atleast by making it 1.9.1/0 it works from a .js file.
the link for library is right, check it here!
look at this line
SCRIPT5007: The value of the property '$' is null or undefined, not a Function object
SearchPanelJQ.js, line 1 character 1
Something wrong with this library or conflict occurred.
I am experiencing a very strange issue i am hoping someone can answer (its kind of broad, but i will explain it my best), code works on local page when opened, but as soon as the same page is uploaded it throws an error. Two others have also looked at this, resulting in more confusion.
I downloaded FancyBox to use the inline feature to pop up a user form via href link, instead of taking the user to an additional page.
You can see the "stock" fancy box here:
1 fancyapps.com/fancybox/demo
Under various options, Inline is what i am using.
I didnt need all of the other features that came with FancyBox so i stripped the page to the following, which works just fine:
2 *Fancy Box Demo Stripped to Inline Feature only*
So then, i applied this code to our sandbox copy of the page to implement:
3 *Sandbox Copy with Fancy Box inline feature added to "make offer" link*
It stops working! There are no conflicts with other javascript on the page, and the only difference is that it has a couple of color .css changes, all .fancybox was named to .ptroffer and that the css code is not inline on the page (which wouldn't cause this error anyway).
This same page, opened locally works beautifully - upload and it throws error.
SCRIPT5007: Unable to get value of the property 'ptroffer': object is null or undefined
<script type="text/javascript">
$(document).ready(function() {
$('.ptroffer').ptroffer();
});
</script>
Works fine with link #2, and with link #3 locally, but with #3 uploaded it throws error.
Please!
Something in your code somewhere is overriding $. If you change that "ready" handler to call
jQuery('.ptroffer').ptroffer();
you won't get that error. However, things may not work; I think that an older version of jQuery is being imported by something (1.3!), which is bad.
edit oh I see, something's pulling in Prototype. You've got a regular script soup going on there, and things are going to be unpredictable and bizarre until you get that straightened out. Probably somewhere in there something's calling jQuery.noConflict(), but that "ready" handler you're adding isn't written to expect that. Whatever code that's expecting jQuery 1.3 may be in for a surprise also.
I've seen several threads about reading contents, but nothing on writing to noscript.
$('body').append('<noscript><div></div></noscript>');
In Chrome and IE9 I get a noscript-element with a empty div inside like I expect, but in IE7 and IE8 I just get a empty noscript-element without the div inside.
Example: http://jsfiddle.net/cEMNS/
Is there a way to add HTML inside the noscript-tag that works in all browsers? What I need is to add some tracking code into a noscript-element at the end of the page, but the info I need isn't available until after document ready.
Edit: I'm getting a lot of comments on "why". It's some poorly done tracking library that requires this. We don't have access to the code to change it. Regardless, I find it interesting that it works in some browsers and not in others since jQuery was supposed to work equally in all browsers. Is it simply a bug?
Edit2: (2 years later) Adding a noscript on the browser doesn't make sense, I know. My only excuse not the question the task I had was because of lack of sleep, like everyone else in the project. But my rationale was that jQuery should behave the same on all browsers and someone might want to do this on the server.
Regardless of the tracking code, what you are doing (or are required to do) makes no sense!
Why? There are two cases possible here:
user has JavaScript enabled in which case the NOSCRIPT get's inserted into the DOM but is ignored by the browser (does nothing)
user does not have JavaScript enabled, NOSCRIPT does not get inserted and does not "execute"
The end result of both cases is that nothing actually happens.
Just an idea: You could try giving your noscript tag an ID, and then try to use native js.
for example:
$('body').append('<noscript id="myTestNoScript"></noscript>');
document.getElementById('myTestNoScript').innerHTML = '<div></div>';
I would claim that if it does not work with native js, it will not work with any library (feel free to correct me on this one).
I tried following simple HTML code:
<html>
<body>
<noscript>I'm a noscript tag.</noscript>
</body>
</html>
Then I did analyse this with IE8 (in IE7 mode) and his integrated code insprector. Apparently the IE7 checks are script allowed. If so he declared it as empty. And empty tags will be ignored. Unfortunatly I could not try that with disabled script option, because only the Systemadministrator can change the settings (here at my work).
What I can assure you, the noscript does exists. If you add
alert($('noscript').size());
after the creation, the result will be 1.
I want to figure out how a website reloads it's content using AJAX. Therefore i would like to see what JS functions are called in real time because I can't figure out what function is responsible for reloading the page dynamically. How to see all executed functions JS in real time in FF, Chrome, Opera or IE?
Maybe using the 'profile' button in the firebug console tab can give you an indication of the function(s) that are fired. Furthermore you can tell firebug's console to show xmlhttp requests (expand 'console' at the top of the firebug screen. After that, If an ajax request fires, it should be visible in the console. In the 'post' tab in such a request you may be able to infer the function triggering the request, looking at the parameters.
I think what you want is a feature in Chrome:
find the element that is being reloaded and right click,
choose inspect from context menu,
then right click the html of the element (in the bottom firebugish pane),
in the context menu there are options to:
break on subtree modifications
break on attributes modifications
break on node removal
in your case maybe set "break on subtree modifications" on the body tag would do it?
Article on awesome new dev features in chrome: http://www.elijahmanor.com/2011/08/7-chrome-tips-developers-designers-may.html
Install firebug in FF. Visit this link: http://getfirebug.com/
I would do a big search and replace on all the file using a regular expression that matches the function names (something like "function (.*)\((.*)\){") and use that to insert a console.log(functionName) at the beginning the function.
So you search for function (.*)\(.*\){ and replace it with function \1 (\2){ console.log("\1"); (Note: Regular expressions are most likely wrong as I didn't check them - you'll need some testing to get it right).
It seems a bit crazy but it should work. I've used that method to debug a Director Lingo project.
Obviously, make sure you backup the whole project before doing the replacement.
Following on the answer given in case you have access to the source code. With this regular expression you can do a console.log of all function calls:
search for:
function (.*){
replace with:
function \1 { console.log\(("\1")\);
I often using Firefox add-on JavaScript Deobfuscator
https://addons.mozilla.org/en-us/firefox/addon/javascript-deobfuscator/
With valid HTML the following finds the object as expected in all browsers but gets NULL in IE (6 & 7).
$(document).ready(function() {
alert( '$(.rollover):\n' + $('.rollover'));
});
I've tried by switching it to something simpler like $('a') but I always get NULL in IE.
Update:
After running the page through the W3C validator (and ignoring what my Firefox validator plugin was telling me) it appears there are actually quite a lot of validation errors (even with HTML 4 Transitional defined), which I can't easily fix, so my guess is that is the cause of my issues. As trying on a very simple document works as expected in IE.
If you're having $ conflicts there are many way to avoid this as documented here.
It seems that it is AjaxCFC's JavaScript includes that are causing a problem, more specifically the ajaxCFC util.js which seems to define it's own $.
Moving those includes before that of the JQuery lib fixed the above issues I was having.
I think we'd have to see the HTML. I've never had a problem with class selection in jQuery/IE. You should get [object Object] for the jQuery object in the alert. Also, are you using an old version of jQuery?