Menu
While using Firefox (23.0.1) and jQuery Mobile (1.3.2), I get the following warning from my code: Empty string passed to getElementById(). The message appears in the console (Tools > Web Developer > Web Console). I would like to eliminate this warning.
I have seen a number of people ask similar questions, most notably: Best way to locate source of Warning: Empty string passed to getElementById() The answers seems to fairly consistently point to the use of '#', implying the user is at fault.
I have tried to produce what I feel is the bare minimum of valid code, and I've found this warning is still exhibited. I assume, from the other posts, that it is my code that is at fault. Can anyone show me how to fix this issue?
As per other users' comments, this warning does not appear in Chrome (version 29.0.1547.57)
Thanks in advance!
Minimum valid code that reproduces this issue:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page" id="TestPage">
<div data-role="content" id="TestContent">
<p>This is a test</p>
</div>
</div>
</body>
</html>
604
In my case it was caused because I forgot to specify a value for the 'for' attribute of a label:
Missing id
<label for="">Stuff:</label>
fixed
<label for="someID">Stuff:</label>
EDIT: Removing the for attribute also prevents that warning
<label>Stuff:</label>
As indicated in a deleted answer and in the comments, this was a bug in Mobile jQuery and it's now fixed. Compare the behavior of 1.3.2 vs 1.4.5 (the current version):
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /-->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<!--script src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script-->
</head>
<body>
<div data-role="page" id="TestPage">
<div data-role="content" id="TestContent">
<p>This is a test</p>
</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
