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"
Related
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title\>Diktāta rezultāti\</title\>
<script type="text/javascript" th:src="#{/js/src/visualizer.bundle.js}"\>\</script\>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/\>
</head\>
<body\>
<div id='container'\>\</div\>
<button th:onclick="visualizer.renderCorrect('container', \[\[${obj}\]\])"\>test\</button\>
</body\>
</html\>
This is how my html template looks like. There is a button that calls function visualizer.renderCorrect(). This function accepts two parameters, one of them should be the id (in this case 'container') of the div container above and the other one should be String that comes from RequestController.
I tried multiple variations of function syntax, but every time i get this error - Uncaught TypeError: t is undefined. I guess there is a problem with passing arguments, since the function refuses to see passed parameters.html
I attached a picture that shows how it looks like after clicking the button. I expect this function not to throw an exception.
Please, if someone knows, help to find the solution
Thank you!
In a presentation, I would like to create a Twitter Timeline with a few selected tweets. In the best case it should look as natural as if someone went to Twitter on his own computer or saw it on his smartphone.
I am using LateX Beamer for the rest of the slides, but I am flexible if it is another software that allows to export a PDF/Image that I could include in LateX.
(There are a lot of tools on how to integrate live Tweets in PowerPoint / Keynote , but I want to do it for historical tweets and will be offline during the presentation.)
I was trying the following:
- Simply take screenshots of the tweet and arrange them within LateX or PowerPoint. Looks ok but not super nice, and quite cumbersome to do.
Since it is possible to extract an html of a tweet to embed on a homepage, I thought of doing this for the presentation. Unfortunately, I don't know much of html / reveal.js presentations.
Has anybody found a good solution for a similar problem?
EDIT:
I started reveal.js and found the following plugin: https://github.com/rajgoel/reveal.js-plugins/tree/master/embed-tweet
I was then trying to apply it and followed the intros to reveal.js and also saved the source code of the plugin into my plugin folder for reveal.js. However, it does not work (=Returning a blank page in the html). Can anybody point me to my error? (I am completely new to reveal.js / html so sorry if it is basic?)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reveal.js 3 Slide Demo</title>
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
<!--Add support for earlier versions of Internet Explorer -->
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- Wrap the entire slide show in a div using the "reveal" class. -->
<div class="reveal">
<!-- Wrap all slides in a single "slides" class -->
<div class="slides">
<!-- ALL SLIDES GO HERE -->
<!-- Each section element contains an individual slide -->
<section>
<div class="tweet" data-src="https://twitter.com/marcfbellemare/status/972558957645631488"></div>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Required, even if empty.
Reveal.initialize({
// ...
dependencies: [
// ...
{ src: 'plugin/embed-tweet/embed-tweet.js' },
// ...
]
});
</script>
</body>
</html>
I have a very strange behavior with a datepicker loaded with data-type="ajax" inside the fancybox.
It is not possible to change month and year in the datepicker.
If I open datepicker and close the fancybox not by using the close "x", the datepicker still remains, but then with working select boxes for month and year
Here's my code from the calling script:
<html>
<head>
<title>test fancybox with datepicker</title>
<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script></head>
<body>
<a data-fancybox data-type="ajax" href="testfancy-call.php">
Load Fancybox Content
</a>
</body>
</html>
And this is the very simple code from testfancy-call.php:
<html>
<head>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#date").datepicker({
changeMonth: true,
changeYear: true,
});
});
</script>
</head>
<body>
<h1>Datepicker</h1>
<input type="text" name="date" value="" id="date">
</body>
</html>
I tried to use data-type="iframe". Here I get the datepicker working, but I have to include all external script inside "testfancy-call.php". This is not a proper solution for me, because the used software's architecture doesn't allow this. So I need to find a way using data-type="ajax".
EDIT
The behavior is only when loading with data-type="ajax". If I place the code stuff from the ajax-loaded file testfancy-call.php directly inside the calling script like in https://codepen.io/fancyapps/pen/QqLXaz it works!
EDIT 2
After some research I found that it's a crossbrowser problem for issue 1. In Firefox the selectboxes for month and year so not work. Internet Explorer and Chrome work like exspected. Is there a way to get Firefox working?
All three testet browsers have the problem that is described in issue 2.
EDIT 3
I've uploaded a demo: http://marcox.square7.ch/testfancy.html
Try disabling touch events using touch: false, because fancyBox catches touch events by default to enable swiping gestures.
I'm evaluating brunch build system for my needs. I need to make simple HTML preprocessing. So basically I need to produce several files with common headers and footers:
file1.html:
<html>
<head>
<title>Title1</title>
</head>
<body>
<div id="content">
<div id="header">...</div>
Page1
<div id="footer">...</div>
</div>
</body>
</html>
file2.html:
<html>
<head>
<title>Title2</title>
</head>
<body>
<div id="content">
<div id="header">...</div>
Page2
<div id="footer">...</div>
</div>
</body>
</html>
So either a simple include functionality or (preferrable) some kind of extends functionality. Ideally syntax should hide in comments so my IDE won't complain about non-HTML characters. I liked preprocess javascript library, but that's not necessary, of course.
Unfortunately I didn't find anything suited for that task in brunch. There's support for many HTML template engines, but they seem to generate JS functions. I need simple static HTML as a result, not JavaScript SPA.
I'm not certain there's any built-in solution to this yet, but if I was to go in the direction of HTML templates / partials, I'd look into either "after-brunch" and "before-brunch" plugins on NPM.
I don't know what's your program-language of choice for FileSystem manipulation (read, merge, write, etc.), but in theory you could use something like "before-brunch" to execute a batch / shellscript / or command of somekind to collect your HTML partials together into your file1.html, file2.html, ... before Brunch compiles and copies it to the public/ folder.
In case you're familiar with Haxe, here's a Gist that I shared a while ago. It's a post-process script to merge other files on specific lines of documents.
https://gist.github.com/bigp/90e38deeccc94145b033
Here's what an HTML document could look like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DEMO</title>
<link rel="icon" href="data:;base64,=">
<style id="css" type="text/css" rel="stylesheet">
/* #MacroMerge: public/app.css */ //<--- Merges All CSS here..
</style>
</head>
<body>
<script type="text/javascript">
/* #MacroMerge: public/vendor.js, public/app.js */ //<--- And all JS here..
</script>
</body>
</html>
EDIT:
Almost forgot, here's how the brunch-config.coffee script would use the Haxe script with the after-brunch plugin:
plugins:
afterBrunch: [
"haxe -cp . --macro MacroMerge.html('app/index.template.html','public/index.html')"
]
Come to think of it... nothing stops you from taking this example and specifying HTML partials (or any file extension really, ex: *.txt, *.xml) wherever you need them. Again, might only be useful to you if you're familiar with Haxe. If not, it's open-sourced & free to download (http://haxe.org/download/).
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..