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>
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>
After going through your jsfiddle I still didn't get where the the function document.getElementById() is being called. I used to also face this problem, but since you are using jquery-mobile its better to use $(#id) as selector just check whether this reference document.getElementById() or $('#id') is being called before the DOM is ready..
Related
We have a browser-based solution that we want to integrate with Datalogic scanners.
We will be using the locked down browser as our primary interface.
We've got as far as configuring the scanner and can confirm that it is decoding our Code 39 barcodes.
We've set up a test page that is supposed to take the scanned code and dump it in a text area.
The test page is
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<meta http-equiv="DL_Code_39" content="Enable">
<meta http-equiv="DL_Scan" content="Javascript:ValidateInput()">
<script language="javascript" type="text/javascript">
function ValidateInput(n){
document.getElementById("sku").value+=";"+n;
};
</script>
</head>
<body>
<form method="post" name="fTest">
<textarea rows="5" cols="15" name="sku" id="sku"></textarea><br>
<input type="submit" value="go">
</form>
</body>
</html>
When we scan, the javascript call is firing, but returning undefined.
If we give the javascript function call a variable (something not done in the documentation) it does not fire
We must be missing something simple but there is no sample code in the DL documentation and google can find nothing else either.
Any help would be greatly appreciated.
I have always found javascript support to be flaky on Windows CE. I assume this is what the data logic scanner is running on?
I would normally configure the scanner to act as a keyboard, that way you can use standard html forms and handle the logic server side. I haven't got a Scorpio to test with but the Falcons have this ability under encoding options.
You can also set a prefix and suffix that the scanner will append to the scanned barcode. In your case it looks like this might be ';\n'
I have solved this on my own
The problem in this case is one of the reasons why developers drink too much.
The problem is the name of the example javascript function described in the documentation
This code works perfectly
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<meta http-equiv="DL_Triggers" content="Enable">
<meta http-equiv="DL_Code_39" content="Enable">
<meta http-equiv="DL_Scan" content="Javascript:PassSKU">
<script type="text/javascript">
function PassSKU(n){
if (n === undefined) {
n = 0;
}
document.getElementById("sku").value+=";"+n;
};
</script>
</head>
<body>
<form method="post" name="fTest">
<textarea rows="5" cols="20" name="sku" id="sku"></textarea><br>
<input type="submit" value="go">
</form>
</body>
</html>
The only thing I changed was to rename my function call from ValidateInput() (the function name given in the documentation which I copied and pasted) to PassSKU
So
<meta http-equiv="DL_Scan" content="Javascript:ValidateInput">
This does not work
<meta http-equiv="DL_Scan" content="Javascript:AnyOtherFunctionName">
This works fine
WHY this fixed the problem is a topic for another time.
In case someone comes across this question while searching for information on getting a Datalogic scanner to work with a web form, I've posted a working solution here: stackoverflow: "Datalogic Falcon X3 - Barcode Scanner"
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I dont know exactly how is it called, but I saw on some youtube tutorials that there is a way to sort code by family. I mean, if u have some code written in sublime text 2 ignoring family order, you can just select it and press some hotkey to sort it. Im really new to coding and i dont know how to make it clearer.
I googled it but I havent found anything.
Like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body>
<script src="js/main.js"></script>
</body>
</html>
To this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body>
<script src="js/main.js"></script>
</body>
</html>
So, what you're trying to do is probably called "auto-indenting" or "auto-formatting".
You might find this question and answer helpful: How do I reformat HTML code using Sublime Text 2?. According to it, Edit > Line > Reindent should do what you're looking for.
The word you are looking for is formatting code :).
In sublime text go to Tools->Command Palette(or press Ctrl+Shift+P) and then type Reindent Lines and press enter.
I'm building a webpage in Notepad. I'm using html5 for the first time. I believe I did the correct coding to insert these images but they don't show up on the page. Here is the code: I could use some help, please. Thank you.
<html>
<head>
<title>My practice website</title>
<meta charset="utf-8">
<html lang="en">
<meta name="keywords" content="html, css, javascript, history, poems, poetry"/>
<meta name="description" content="This site is about my personal life, poems, poetry, images of family, myself"/>
<meta name="author" content="schweidel tyson">
<meta http-equiv="refresh" content="30" />
<link rel="stylesheet" type="text/css" href="mainstyesheet.css"/>
<body style="background-color: #ccffff;">
</head>
<body/>
<h1>Welcome to my website</h1>
<img src="http://www.html.net/logo.png"/>
<p>This is basically a personal website build to showcase my fledging talent in webdesign to put up pictures of my family and friends. I also like poetry, so there will be some poems.</p><b/>
This is a link to a good html tutorial<br/><br/>
This is another great tutorial link<br/><br/>
A tutorial for styles link
<img src=My practice website/My Website/images/high yellow.jpg" width="192 height="256"/><alt="African Amereican light-skined woman"><br/><br/>
<img src="http://www.zimbio.com/My website/images/trendy.jpg" width="352" width="400"/><alt="African American Woman">
<img src="My practice website/My website/my new pic.jpg" width="104" height="104"/> <alt="me at the domiciliary">
</body>
</html>
Your HTML is a bit off:
<img src="..." width="104" height="104"/> <alt="me at the domiciliary">
alt is just the alternate text for the image. It's an attribute just like width, src and height:
<img src="..." width="104" height="104" alt="me at the domiciliary" />
Also, make sure your URLs are correct.
Also, without a DOCTYPE, your markup is invalid. Include a DOCTYPE (here's a HTML5 one):
<!DOCTYPE html>
<html>
...
I seem to have an obscure issue with a razor template forcing browsers into quirks mode. It is a simple razor template in umbraco 5. The following code makes chrome, firefox, IE all go into quirks mode:
#inherits RenderViewPage
#using System.Web.Mvc.Html;
#using Umbraco.Cms.Web;
#{
Layout = "";
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
</head>
<body>
</body>
</html>
If I move the razor syntax completely or move it down so it is not before the doctype it goes into standards compliance mode. I've tried adding various X-UA-Compatible meta tags to no effect.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
</head>
<body>
#inherits RenderViewPage
#using System.Web.Mvc.Html;
#using Umbraco.Cms.Web;
#{
Layout = "";
}
</body>
</html>
Anyone any ideas what could be the cause? It's as though the browsers think it is rendering something before the doctype but there is nothing I can see.
Thanks
You don't need a semi-colon on your #using statements, perhaps this is what the browser is seeing?
So e.g.
#using Umbraco.Cms.Web;
can just be
#using Umbraco.Cms.Web
Same here
It looks like that it places extra chars (whitespace) right before opening tag < of doctype. I think that it is an editor bug.
Try to remove the opening "<" and insert it back and save after that. also doctype should be 1st line of the file.
The # statements are translated to whitespace. The doctype is expected to be the first line of the document. In this case, the first line is blank, so the doctype is defined as an empty line, which triggers quirksmode.
I've got a site coded in XHTML 1.0 Strict. I want to use the new Microdata to add breadcrumbs to my site (so Google will understand them).
My old non-microdata marked-up breadcrumbs look like this:
<ul>
<li>Level 1</li>
<li>Level 2</li>
<li>Level 3</li>
</ul>
According to Google, to markup breadcrumbs using Microdata, you extend the above code like this:
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="..." itemprop="url">
<span itemprop="title">Level 1</span>
</a>
</li>
...
</ul>
But this is not valid XHTML 1.0 Strict.
What should I do?
Should I ignore the validation conflicts?
Should I write itemscope="itemscope" instead of just itemscope (this would be valid XML, but still not valid XHTML)?
Should I change the Doctype to be HTML5 instead of XHTML 1.0 Strict?
I want this to work all the way back to IE6!
Please advice :)
Yes, if you wanted to use itemscope in XHTML, you would need to write itemscope="itemscope" and use XHTML5 (same DOCTYPE as HTML5, but XML syntax).
itemscope is not included in W3 HTML5, but present in WHATWG's version, so validation may continue to be a difficulty. There seems to be quite some political argument on this issue, which I haven't been following as it looks fairly tedious.
For the moment, if you want to use breadcrumb annotations in a finalised, validatable document format, you could use RDFa instead: the alternative (but older) proposal, which the argument is all about, and use the existing doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
Since the major search engines have decided on schema.org last June (2011) as the way to do rich snippets, this question has become much more important seeing XHTML5 does not yet have a working DTD (BTW, http://www.html5dtd.org/ is working on a XHTML5 DTD and may well be ready when you read this, if so disregard what I'm about to say). And what I am about to say summarises a page I placed at http://www.nedprod.com/programs/portable/XHTMLwithHTML5microdata/ a few weeks ago, and there has more detail including a rich snippets demo if you want it.
I had need of extending XHTML 1.x Strict with schema.org/HTML5 microdata and getting it all to validate properly for updating nedprod, and Microsoft Expression Web has the occasional tendency to eat bits of HTML it edits, so validation is handy for catching when it borks. Hence I have created these DTDs which extend the standard XHTML 1.0 ones:
http://www.nedprod.com/xhtml1-strict-with-html5-microdata.dtd
http://www.nedprod.com/xhtml1-transitional-with-html5-microdata.dtd
To use, take a copy of your desired DTD (don't use the original from nedprod, I can't afford the bandwidth) and use as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict with HTML5 microdata//EN" "xhtml1-strict-with-html5-microdata.dtd">
or ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional with HTML5 microdata//EN" "xhtml1-transitional-with-html5-microdata.dtd">
... or more likely, override the DTD used for validation by your particular XML validating setup.
BTW, here's something interesting, and I only include this as it's useful to know when answering the question. I honest to God thought that using the above doctypes would invoke quirks mode when rendering. Turns out, much to my great surprise, that IE8, Chrome 14, Firefox 5 and Opera 11.50 all render such a doctype in Standards mode. Who would have thought! So you could, if you wanted to, upload your XHTML pages onto the public internet with the custom doctype and the newer browsers at least would do the right thing.
Hope this helps someone,
Niall
Valid HTML 5 example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example page</title>
</head>
<body>
<div itemscope="" itemtype="http://schema.org/MediaObject">
<div itemprop="video" itemscope="" itemtype="http://schema.org/VideoObject">
<meta itemprop="name" content="Breast Augmentation Video Diary">
<meta itemprop="duration" content="PT12M54S">
<meta itemprop="thumbnailUrl" content="http://www.plastic-surgery-estonia.com/new-assets/images/thumbnails/breast-augmentation.jpg">
<meta itemprop="contentURL" content="http://www.youtube.com/watch?v=BwPN6eCpxTk">
<meta itemprop="embedURL" content="http://www.youtube.com/watch?feature=player_embedded&v=BwPN6eCpxTk">
<meta itemprop="uploadDate" content="2010-11-09">
<iframe src="http://www.youtube.com/embed/BwPN6eCpxTk?rel=0&autohide=1&modestbranding=1&showinfo=0"></iframe>
<span itemprop="description">Video Diary</span>
</div>
</div>
</body>
</html>
Found these links helpful:
- http://support.google.com/webmasters/bin/answer.py?hl=en&answer=2413309&topic=1088474&ctx=topic
- http://www.reelseo.com/embedded-youtube-indexed-google/
Use the application/ld+json MIME type and a microdata generator to transform the markup into data:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>microdata.xhtml</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
</head>
<body>
<div>
<script type="application/ld+json">
{"items": [{
"type": ["https://schema.org/breadcrumb"],
"properties":{
"url": ["..."],
"title": ["Level 1"]
}
}]
}
</script>
</div>
</body>
</html>
or a data:uri in an object tag:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>microdata.xhtml</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
</head>
<body>
<div>
<object data="data:text/html;charset=utf-8;base64,PHVsPiA8bGkgaXRlbXNjb3BlIGl0ZW10eXBlPSJodHRwOi8vZGF0YS12b2NhYnVsYXJ5Lm9yZy9CcmVhZGNydW1iIj4gICAgICAgICA8YSBocmVmPSIuLi4iIGl0ZW1wcm9wPSJ1cmwiPiAgICAgICAgICAgPHNwYW4gaXRlbXByb3A9InRpdGxlIj5MZXZlbCAxPC9zcGFuPiAgICAgICAgIDwvYT4gICAgICAgICA8L2xpPiAgICAgICA8L3VsPg==">
<?microdata
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="..." itemprop="url">
<span itemprop="title">Level 1</span>
</a>
</li>
</ul>
?>
</object>
<!--[if lt IE 8]>
<object data="mhtml://#foo">
<?microdata
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="..." itemprop="url">
<span itemprop="title">Level 1</span>
</a>
</li>
</ul>
?>
<div id="foo">
PHVsPiA8bGkgaXRlbXNjb3BlIGl0ZW10eXBlPSJodHRwOi8vZGF0YS12b2NhYnVsYXJ5Lm9yZy9CcmVhZGNydW1iIj4gICAgICAgICA8YSBocmVmPSIuLi4iIGl0ZW1wcm9wPSJ1cmwiPiAgICAgICAgICAgPHNwYW4gaXRlbXByb3A9InRpdGxlIj5MZXZlbCAxPC9zcGFuPiAgICAgICAgIDwvYT4gICAgICAgICA8L2xpPiAgICAgICA8L3VsPg==
</div>
</object>
<![endif]-->
</div>
</body>
</html>
I want this to work all the way back to IE6!
Use the application/xhtml+xml XSLT shim to support IE6 and extend it to get a copy of the markup.
References
MDN: Base64 Encoding and Decoding
Images in a Web Page
MIME E-mail Encapsulation of Aggregate Documents, such as HTML (MHTML)
Mapping Microdata to RDF
data:URI Tests
Examining, implementing and testing of RFC2557 (MHTML)
MHTML URIs
HTML5: Differences from HTML4
try and validate some of google's pages...they don't validate.
validation is a tool, an awesome one, but nothing more, although i do applaud your determination. if you're that worried about validation i would switch to HTML5 .