CODEWITHSUNDEEP
androidcordovaphonegap-pluginsbarcode
Kandarp Vyas
Kandarp Vyas

Reputation: 430

PhoneGap Barcode Scanning Issue

I want to scan barcode from my android mobile,I am using PhoneGap for that,my Issue is I want to scan barcode on click event of button,below Code Work perfectly for me but when i use this on button click it want works 

<body>
    <div class="app">
        <h1>DevExpress DevExtreme JS HTML</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="barcodescanner.js"></script>
    <script type="text/javascript">
        var app = {
            initialize: function () {
                this.bindEvents();
            },
            bindEvents: function () {
                document.addEventListener('deviceready', this.onDeviceReady, false);
            },
            onDeviceReady: function () {
                app.receivedEvent('deviceready');

   var scanner = cordova.require("cordova/plugin/BarcodeScanner");
        scanner.scan(
      function (result) {
          alert("We got a barcode\n" +
                "Result: " + result.text + "\n" +
                "Format: " + result.format + "\n" +
                "Cancelled: " + result.cancelled);
      }, 
      function (error) {
          alert("Scanning failed: " + error);
      }
   );                
            },
            receivedEvent: function (id) {
                var parentElement = document.getElementById(id);
                var listeningElement = parentElement.querySelector('.listening');
                var receivedElement = parentElement.querySelector('.received');
                listeningElement.setAttribute('style', 'display:none;');
                receivedElement.setAttribute('style', 'display:block;');
                console.log('Received Event: ' + id);
            }
        };
    </script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

But This Code Don't Works 

<script type="text/javascript">
            function scanCode(){
                 var scanner = cordova.require("cordova/plugin/BarcodeScanner");

            scanner.scan(
                    function(result){
                        document.getElementById("data").value= result.text;
                    }, 
                    function(error){
                        alert("Scan failed: " + error);
                    }
                );
            }


        </script>
    </head>

    <body>
        <h3>Barcode/QR Code Scanner And Encoder</h3>

        <input type="button" value="Scan Code" onclick="scanCode();"/><br/><br/>

        Data : <br/>
        <input type="text" name="data" id="data" /><br/><br/>

    </body>

Plese Help

Upvotes: 0

Views: 1273

Answers (1)

Dawson Loudon
Dawson Loudon

Reputation: 6029

Create a globally scoped variable for scanner, then in document ready keep the line that assigns this to the cordova.require, then in your button event call scanner.scan

Example:

<body>
<div class="app">
    <h3>Barcode/QR Code Scanner And Encoder</h3>

    <input type="button" value="Scan Code" onclick="scanCode();"/><br/><br/>

    Data : <br/>
    <input type="text" name="data" id="data" /><br/><br/>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="barcodescanner.js"></script>
<script type="text/javascript">
    var scanner = null;
    var app = {
        initialize: function () {
            this.bindEvents();
        },
        bindEvents: function () {
            document.addEventListener('deviceready', this.onDeviceReady, false);
        },
        onDeviceReady: function () {
            app.receivedEvent('deviceready');

            scanner = cordova.require("cordova/plugin/BarcodeScanner");
            cordova.require("com.phonegap.plugins.barcodescanner.BarcodeScanner");
        },
        receivedEvent: function (id) {
            var parentElement = document.getElementById(id);
            var listeningElement = parentElement.querySelector('.listening');
            var receivedElement = parentElement.querySelector('.received');
            listeningElement.setAttribute('style', 'display:none;');
            receivedElement.setAttribute('style', 'display:block;');
            console.log('Received Event: ' + id);
        }
    };

    function scanCode(){
        scanner.scan(
                function(result){
                    document.getElementById("data").value= result.text;
                },
                function(error){
                    alert("Scan failed: " + error);
                }
        );
    }
</script>
<script type="text/javascript">
    app.initialize();
</script>
</body>

Upvotes: 1

Related Questions