How to Handle Multiple Javascript Files

Question

I have a PhoneGap HTML5 file as follows (only showing part of the head),

<head>
    <script type="text/javascript" src="Javascript/phonegap-1.3.0.js"></script>
    <!--<script type="text/javascript" src="Javascript/photo.js"></script>-->
    <script>
        function takePhoto()
        {
            alert("Take Photo");

            navigator.camera.getPicture(onSuccess, onFail, { 
                quality: 50, 
                destinationType: Camera.DestinationType.FILE_URI, 
                sourceType: Camera.PictureSourceType.CAMERA});
        }

        function onSuccess(imageData)
        {
            var image = document.getElementById('photoImg');
            image.src = "data:image/jpeg;base64," + imageData;
        }

        function onFail(message)
        {
            alert('Failed because: ' + message);
        }
    </script>
</head>

In the body I have this markup,

<button onclick='takePhoto()'>Take Photo</button>

Having it defined like above works fine. The problem is that I don't want to define the javascript in my html document. I want it to look like this,

<script type="text/javascript" src="Javascript/phonegap-1.3.0.js"></script>
<script type="text/javascript" src="Javascript/photo.js"></script>

And have photo.js contain the takePhoto method. I cannot get it to work like that. In my javascript console I get the error,

Uncaught ReferenceError: takePhoto is not defined at file:///android_asset/www/index.html:81

Are you sure the JS file exists in the Javascript folder? It sounds like the file just isn't being loaded if you have defined the function there. — SoWeLie
– SoWeLie, Commented Jan 23, 2012 at 1:54
Is your photo.js loaded? Check it with a console. Can you run the command with the console? — buschtoens
– buschtoens, Commented Jan 23, 2012 at 1:55
Can't run the command with the console, so it doesn't look like it is being loaded. But why not? The file is definitely there. — peter
– peter, Commented Jan 23, 2012 at 2:05
Quite right. I think there is a syntax error with the photo.js file. — peter
– peter, Commented Jan 23, 2012 at 2:06

peter · Accepted Answer · 2012-01-23 02:25:07Z

1

OK, so the main problem I was having there was that my photo.js file had an error in it. Fixing the error got me to a place where it was working.

I thought there was more to this issue though which is why I asked a question here. Before when I had the script inline it wasn't working either, making me think that the script there was not able to call the code in phonegap.cs.

Turns out that it doesn't work in a browser on my PC, but on an actual android and in the android simulator it is working.

answered Jan 23, 2012 at 2:25

peter

13.6k24 gold badges88 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Simon MacDonald Over a year ago

It wouldn't work for you on a desktop browser as the native code needed for the camera is not loaded. PhoneGap maps JavaScript methods to native code on Android, iOS, BB, WP7, etc.

mu_sa Over a year ago

i am having the same problem. Can you please elobrate more on how you solved it ...

ThePrimeagen · Accepted Answer · 2012-01-23 01:55:12Z

0

Check it : Here is your file.js your importing

// I changed it for the purposes of not intersecting any other library.
(function() {
    MyLibrary = {
        takePhoto: function() {
            // your code here
        }
    }
})()

Then your html document can do something like

<button onclick='MyLibrary.takePhoto()'>Take Photo</button>

answered Jan 23, 2012 at 1:55

ThePrimeagen

4,5824 gold badges35 silver badges45 bronze badges

Collectives™ on Stack Overflow

How to Handle Multiple Javascript Files

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related