Clever Geek Handbook

Capture scanned barcode from any web page in web application

The webapp I inherited has some jquery code that captures a barcode scan (simple 1-D barcode like fitness clubs and grocery stores - no QR codes, nothing exotic, etc.) ... But the way this is implemented requires a modal box to come up with a counter on it, then you scan and it works. Our clients don't like this. They want to be able to scan a barcode from any web page in the application, and don't have to go to a specific page and have a modal window up, blocking everything else before scanning.

I looked at this with interest: https://github.com/julien-maurel/jQuery-Scanner-Detection (I just can't get it to work.) I tried this in the webpage:

<script type="text/javascript" src="Scripts/barcode/jquery.scannerdetection.js"></script>
<script>
    $(window).bind('scannerDetectionComplete', function (e, data) {
        alert(e);
        alert(data);
    })
</script>

I also tried $(document).bind(...)

instead

The actual source documents just say to do $(selector).scannerDetection();

They do not provide examples of actual use.

I really don't care if I'm using this jquery plugin, some other jquery plugin, custom jquery, or some piece of javascript code. I just need something that detects the scan of a barcode from any web page without resorting to a modal listener. If anyone knows how to get the "jQuery-Scanner-Detection" plugin (mentioned above) to work, I'd like to try that too. Thank.

+3


source to share


2 answers


The document is ready;)



jQuery(document).ready(function($) {

    $(window).scannerDetection();
    $(window).bind('scannerDetectionComplete',function(e,data){
            alert('complete '+data.string);
        })
        .bind('scannerDetectionError',function(e,data){
            console.log('detection error '+data.string);
        })
        .bind('scannerDetectionReceive',function(e,data){
            console.log(data);
        })

    $(window).scannerDetection('success');

});
+7


source


This is how I use it and it works great:

$(selector).scannerDetection(function(data) {

onComplete:

//whatever you want

});


I don't find it necessary to bind it to your window or document, which you can work with with your selector.

0


source






More articles:


All Articles