CODEWITHSUNDEEP
javascriptcordovaphonegap-build
The Duke Of Marshall שלום
The Duke Of Marshall שלום

Reputation: 1659

Reference Error With Local Files In Phonegap

I am having issues, it would seem, with using local files with my phonegap application. I am trying get a simple app up and running to scan a qr code and just display the text that was scanned. However, it is not working for some reason. I can run any JavaScript I want as long as it is in the index.html file. For some reason, whenever I try to call a function from an included js file, I get a reference error. In this code I am getting 'ReferenceError: scan_qr_code is not defined' and 'ReferenceError: onDeviceReady is not defined'. Both of these functions are from the main.js file which is supposed to be included from the index.html file. I downloaded and inspected the apk file and these files are being included in the build but for some reason are not working. Anyone have any suggestions or advice? This is driving me nuts. Seems like this should be a rather straight forward thing. Also, I'm building with the PhoneGap version as 3.7.0

I am using PhoneGap build for compiling and my folder structure is setup as thus.

/www
  /scripts
    main.js
    jquery-1.11.3.min.js
  /styles
    main.css
  index.html
  config.xml

index.html

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="scripts/main.js"></script>

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="childbrowser.js"></script>
<script type="text/javascript" src="scripts/barcode.js"></script>

<link href="styles/main.css" rel="stylesheet" />

<title> </title>

<script>
$(function(){
    alert('here');
     try{
        $("#scan_button").click(function(){
            alert('Button Clicked 2');
            try{
                onDeviceReady();
                scan_qr_code();
            }catch(e){
                alert(e);
            }
        });
    }catch(e){
        alert(e);
    }
});

document.addEventListener("deviceready", function(){
     try{
        $("#scan_button").click(function(){
            alert('Button Clicked');
            try{
                scan_qr_code();
            }catch(e){
                alert(e);
            }
        });
        scan_qr_code();
    }catch(e){
        alert(e);
    }
}, false);
</script>

</head>
<body>

<button id="scan_button">Scan QR Code</button>

</body>
</html>

main.js

$(function(){
});

function onDeviceReady(){
   alert('Device Ready Fired');
}

function scan_qr_code(){
    try{    
        alert('Scanning');
        // Scan the QR code
        barcode_app.scan(function(result){
            code = result.text;
            // Just grab the text from the scanned code
            alert(code);
            scan_qr_code(){
        });
    }catch(e){
        alert(e);
    }
}

config.xml

<preference name="phonegap-version"            value="3.7.0" />
<access origin="*"/>

Upvotes: 0

Views: 69

Answers (1)

Alin Pandichi
Alin Pandichi

Reputation: 955

This is going to be a very wild guess, but it look like your main.js file has an extra { that shouldn't be there.

scan_qr_code(){

This could be breaking your code, and that's why your functions from main.js are undefined.

Here's a plunker showing that the code would run just fine if you remove the extra {. Well... barcode_app is now showing as undefined, I assume it's part of the scripts/barcode.js file, which by the way, is not included in your project structure either.

Upvotes: 1

Related Questions