CODEWITHSUNDEEP
iphoneobjective-ciospluginscordova
Objc55
Objc55

Reputation: 156

Incorrectly Linking Javascript File?

I'm working on installing a PhoneGap plugin on an iPhone. The page for the plugin I am attempting to install can be seen here: https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/MessageBox.

I believe I have narrowed down my problem to incorrectly working with the JavaScript file. I am including it on my HTML page like so: 

<script language="javascript" type="text/javascript" src="MessageBox.js"></script>

The rest of my HTML page is this:

<script type="text/javascript">
alert("test1");
var messageBox = window.plugins.messageBox;
alert("test2");
messageBox.alert('Title', 'Message', function(button) { console.warn('alert', [this, arguments]); });
</script>

I see an alert saying test1, but not the second alert. This makes me think that the error is on the line:

var messageBox = window.plugins.messageBox;

However, I'm not quite sure what I should be doing differently. From what I can tell, I've done all the necessary steps as described on the plugin's documentation page, seen here: https://github.com/phonegap/phonegap-plugins/blob/master/iPhone/MessageBox/README.md

(As expected, I also do not see the output of the messageBox.alert... line when viewing this through the iOS simulator.)

I would appreciate any help with this issue, thanks!

NOTE: my initial thread regarding this topic can be seen here: Trouble Installing PhoneGap Plugin

EDIT: I should also add that I have the exact same problem when trying to install a different (but similar) plugin, known as "Prompt"

EDIT2: Here's my index.html:

    <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
    <script type="text/javascript" src="MessageBox.js"></script>
    <script type="text/javascript">

    function onBodyLoad()
    {       
        document.addEventListener("deviceready", onDeviceReady, false);
    }


    function onDeviceReady()
    {
        navigator.notification.alert("PhoneGap is working");
        window.location.href="otherpage.html";
    } 
    </script>

Upvotes: 0

Views: 322

Answers (1)

Titouan de Bailleul
Titouan de Bailleul

Reputation: 12949

The problem is that when you try to create your MessageBox, PhoneGap is not ready yet.

You just need to wait for PhoneGap to be ready before you execute your code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

    <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
    <script type="text/javascript" charset="utf-8">
        document.addEventListener("deviceready", onDeviceReady, false);

        function onDeviceReady() {
            window.location="otherpage.html";
        }
    </script>
</head>
<body>
</body>
</html>

Then, on otherpage.html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
    <script type="text/javascript" charset="utf-8" src="MessageBox.js"></script>

</head>
<body onload="onLoad()">
    <script type="text/javascript" charset="utf-8">

        function onLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }

        // PhoneGap is loaded and it is now safe to make calls PhoneGap methods
        //
        function onDeviceReady() {
            console.log("onLoad");
            var messageBox = window.plugins.messageBox;
            messageBox.alert('Title', 'Message', function(button) { console.warn('alert', [this, arguments]); });
        }  
    </script>
</body>
</html>

I tested it on PhoneGap 1.4.1

Upvotes: 1

Related Questions