Phonegap experiencing issues with executing JavaScript code

My attempt to utilize phonegap is encountering an issue where my javascript is not running. Here's what I've tried so far:

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>

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

        function onDeviceReady() {
            alert('hey');
            document.addEventListener("online", onOnline, false);
            document.addEventListener("offline", onOffline, false);
        }

        function onOnline() {
            alert('device is online');
        }

        function onOffline() {
            alert('device is offline');
        }
    </script>
</head>
<body>
    <div class="app">
        <h1>PhoneGap</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
</body>

However, despite these efforts, I am still unable to receive an alert. My setup involves using phonegap 2.9.0 on IOS 7.

In addition, I also attempted the following:

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>

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

// PhoneGap is ready
//
function onDeviceReady() {
    // Empty
}

// alert dialog dismissed
function alertDismissed() {
    // do something
}

// Show a custom alert
//
function showAlert() {
    navigator.notification.alert(
        'You are the winner!',  // message
        alertDismissed,         // callback
        'Game Over',            // title
        'Done'                  // buttonName
    );
}
    </script>
</head>
<body>
    <div class="app">
        <h1>PhoneGap</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
            <p><a href="#" onclick="showAlert(); return false;">Show Alert</a></p>
        </div>
    </div>
</body>

Answer №1

        document.addEventListener("online", onOnline, false);
        document.addEventListener("offline", onOffline, false);

These functions are designed to establish a new internet connection and disable network connections.

They will not trigger when you open the app. Instead, the event listeners 'online' and 'offline' are primarily used to check for an available internet connection.

Furthermore, it is recommended not to use the alert function as it may not be supported in iOS 7. Instead, utilize the notification class in PhoneGap for displaying alerts.

Answer №2

Give this a try, it's working on my side. Make sure you include cordova.js in your project.

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
       <script type="text/javascript" src="cordova.js"></script>
    <title>Hello World</title>
    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript" charset="utf-8">
        document.addEventListener("deviceready", onDeviceReady, false);

        // PhoneGap is ready
        function onDeviceReady() {
            // Empty
        }

    // alert dialog dismissed
    function alertDismissed() {
        // do something
    }

    // Show a custom alert
     function showAlert() {
        navigator.notification.alert(
                                     'You are the winner!',  // message
                                     alertDismissed,         // callback
                                     'Game Over',            // title
                                     'Done'                  // buttonName
                                     );
    }
    </script>
</head>
<body>
    <div class="app">
        <h1>PhoneGap</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
            <p><a href="#" onclick="showAlert();">Show Alert</a></p>
        </div>
    </div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript - Modifying several object properties within an array of objects

I am attempting to update the values of multiple objects within an array of objects. // Using a for..of loop with variable i to access the second array and retrieve values const AntraegeListe = new Array(); for (let i = 0; i < MESRForm.MitarbeiterL ...

Passing the value of a radio button to a component in React: a comprehensive guide

I've been struggling to figure out how to pass the value of a selected radio button to another component in React. Currently, I'm exploring the Star Wars API and attempting to create a basic search interface where users can retrieve information a ...

jQuery AJAX event handlers failing to trigger

It's driving me crazy! I've been using jquery's ajax for years, and I can't seem to figure out why the success, error, and complete events won't fire. The syntax is correct, the service it's calling works fine, but nothing hap ...

Exploration of frontend utilization of web API resources

I've come across this issue multiple times. Whenever I modify a resource's result or parameters and search for where it's utilized, I always end up overlooking some hidden part of the application. Do you have any effective techniques to loc ...

Is it possible to implement a modal within my API services?

Hello, I am in need of assistance. I am looking to display a modal every time my API returns an error. Can someone please help me figure out how to achieve this? I am currently using React hooks. const restService = (path, responseType = 'json') ...

Transmitting a jQuery array from the client to the server using AJAX in

I've looked at so many posts about this issue, but I still can't get my code to work. My goal is to retrieve a PHP array of values from the checkboxes that are checked. Here is my code snippet: <!doctype html> <html> <head> & ...

Exploring the power of UISearchBar and NavigationBar in Swift 4

I am attempting to dynamically add a UISearchBar within a UINavigationBar. In my storyboard, I drag and drop a UINavigationBar and a UITableView. The issue arises when I run the application and pull down the tableview, the SearchBar fails to appear. Her ...

Detecting the presence of a file on a local PC using JavaScript

In the process of creating a Django web application, I am exploring methods to determine if a particular application is installed on the user's local machine. One idea I have considered is checking for the existence of a specific folder, such as C:&bs ...

Significant lag experienced when using $rootscope.$on with a large object

In my AngularJS project, I am working with a JavaScript object (factory) that contains numerous functions spanning 4000 lines. Creating the object from data fetched from PHP happens pretty quickly. $http.get('pivots/list.php') .succe ...

Trouble Arising from the Lack of Coordination Between CSS Transition and JavaScript Update Triggered by Element

I'm currently working on a web development project that involves a list of clickable elements. When one of these elements is clicked, it should become active and trigger a CSS transition (such as a transform) with a duration of 200ms. Additionally, I ...

Issue with Android date input field not resetting the value

When testing in Android Tablet (version 4.1.2), I encountered a strange issue with an input date field that looks like this: <input type="date" value="2013-06-10"/>. Upon clicking on the field and trying to set a new date, instead of replacing the o ...

Error connecting Node.js, express, and socket.io application

My app is a simple one that utilizes the socket.io module for node.js. Everything runs smoothly when I start my server with the command node express_server.js. However, when I try to open my page at http://localhost:8080 in the browser, Node.js throws an e ...

The success:function() is not being triggered in the Ajax response with jQuery version 1.8.3

My code is not calling success:function() in the Ajax response when using jQuery 1.8.3, but it works perfectly with jQuery 1.4.2. Here is the code snippet: <script type="text/javascript"> $(document).ready(function(){ $("#usn").on('keyup&a ...

Pass KeyEventArgs object to JavaScript function

Is it possible to pass keydown events as parameters to a JavaScript function in Silverlight4? ...

Having trouble converting from JavaScript to TypeScript, encountered an error in the process

Seeking assistance with transitioning JavaScript code to TypeScript. const profiles = [{ name: "kamal", age: "20", designation: "developer", grade: "A", }, { name: "arun", age: "25", designation: "developer", grade: ...

Switch between two tabs with the convenient toggle button

I have implemented 2 tabs using Bootstrap as shown below: <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">CLient</a></li> <li role="presentatio ...

Show the React component upon clicking the Add button

I recently developed a React component that reveals a new section whenever the user clicks the "New Section" button. However, I have encountered an issue - I would like the component to display multiple sections based on how many times the button is clic ...

Tips for regularly retrieving information from a psql table

I have a scenario where I am retrieving data from a psql table and converting it into a JSON array to be used for displaying a time series chart using JavaScript. The data that is passed needs to be in the form of an array. Since the data in the table get ...

Stopping a JavaScript promise.all() based on a certain condition

Here's a snippet of code I'm working with: let promiseList = [] for (let i in data) { let promise = checkIfMember(data[i].tg_id, chatId).then(res => { if (res) { //if the user has a undefined username ...

Using jQuery to swap out text

Here's what I'm trying to achieve: var newValue = $('.TwitterSpot').text().replace('#', 'Blah Blah'); $('.TwitterSpot').text(newValue); I believe this code should replace all instances of "#" with "Blah ...