Is it possible to have numerous HTML files and directories in Phonegap/Cordova along with plugins?

As I transform my web app from HTML to Cordova for enhanced device functionality, including background audio and other features, I'm encountering some challenges. Due to the original structure of my application, which consists of multiple HTML files, I am unable to consolidate them into a single file as recommended for Cordova development.

My main hurdle is integrating various Cordova plugins across these pages. While I have successfully referenced the cordova.js file in the root directory using 

<script src="cordova.js"></script>
, I am facing issues when trying to link to it in subdirectories using ../cordova.js, resulting in a 404 error and failure of the plugins to work properly.

If anyone has insight on how to effectively utilize the cordova.js file in subdirectories, allowing me to leverage plugins throughout all pages, I would greatly appreciate your help. Thank you!

javascriptcordova

Answer №1

If you are finding it difficult to access the cordova file from your HTML pages, it is likely a path issue rather than a problem with cordova itself.

It is crucial that you listen for the cordova deviceready event on all of your individual HTML pages in order for your plugins to function correctly.

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    // You can now safely utilize device APIs
}

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

Using jQuery to adjust the length of a string to fit within a specific width

I am working with a table and need to input strings in each cell, but they are wider than the cell width. I want to shorten the strings without breaking lines, and add '...' at the end to show that the string is long. The table consists of aroun ...

javascriptjquerystring

Automated browsing: identifying the difference between AJAX and iframes

During my automated requests (scheduled at specific times, without user involvement), I have noticed that xmlHttpRequest includes extra http headers. In order for the server not to be able to distinguish these requests as automated (they should appear exa ...

javascriptajaxiframehttp-headersgoogle-chrome-extension

When using State.go(), the url in the address bar will update, but the HTML view will not be refreshed

Encountering an issue while working on Ionic with AngularJS, specifically with the routing system when attempting to create a login page. In the controller section of the code, I am trying to navigate to a welcome page called 'dash' using state.g ...

javascripthtmlangularjsionic-framework

Troubleshooting problem with Electron and sqlite3 post application packaging

I've been facing various challenges with Node and databases lately, hence the numerous questions I've posted here recently. Here's some background: I have an Electron app with an AngularJS frontend. On the electron side, I run an express s ...

javascriptangularjsnode.jssqliteelectron

Exploring techniques to maintain search functionality on altered display columns in DataTables.js

How can I ensure that the search functionality works properly on the modified render column in DataTables.js? In the code snippet provided below, my attempts to search data within the render columns are not yielding any results. $('#release-table& ...

javascriptjquery

Unable to stop submission as a result of ajax verification

As someone new to java and jquery, I am facing a challenge with the code below: $(document).ready(function() { //Prevent SUBMIT if Session setting = On (Ajax) $('#formID').submit(function(e) { var prevent = false; $.ajax({ type: ...

javascriptjqueryajaxpreventdefault

Strange issue encountered when utilizing Worklight along with XSL transformation on a JSON response

I'm facing an unusual issue that I can't seem to resolve. Here is an example of a JSON response that I am dealing with. "values": [ { "time": "2014-02-26T09:01:00+01:00", "data": [ "A", "B" ] }, // additional objec ...

javascriptjsonxsltxpathibm-mobilefirst

Page showing without banner

As I scroll down through my website, I want a specific banner to appear when I reach the contact page. The banner will show a goodbye message and give users the option to close it or keep it open. For example: (function() { requestAnimationFrame(fu ...

javascripthtmlcssweb-deployment

Creating a vertical stacked barchart using React and Svg without relying on any external libraries

I have been working on a piece of code that utilizes React and SVG to create bar charts without the use of any third-party libraries. Currently, my charts are displayed horizontally, but I would like them to be displayed vertically instead. Despite trying ...

javascripthtmlreactjssvgcharts

Accessing external content within our webpage

Previously, I utilized iframes to display an external page within our asp.net page. However, I have now decided to explore alternative methods that do not involve iframes. My goal is to open an external page within our page using only a simple aspx page wi ...

c#javascriptasp.netajaxasp.net-ajax

Tips for choosing an image using jQuery from an external HTML page

I'm attempting to embed an HTML page within a div and then individually select all the img tags within that page to display an overlay div on top of the images. Currently, I can insert the HTML into a div named "asd" and it seems like the jQuery is f ...

javascriptjqueryhtml

Binding Data in Vue Multiselect

After extensive searching, I stumbled upon an amazing searchable select Vue component that has caught my eye: https://github.com/monterail/vue-multiselect. However, there seems to be a small issue when it comes to feeding it an array of objects as options ...

javascriptbindingautocompletevue.jsmulti-select

Data binding in Vue.js seems to be malfunctioning

I'm having trouble with my Vue component creation. I've been using v-show to hide certain elements, but it doesn't seem to be working as intended. The goal is to hide an element when clicked from a list by setting element.visible to false i ...

javascriptvue.jsvuejs2vue-component

The scope of a JS array is being lost in Firebase

The Firebase data structure looks like this: -users --demo1 ---conid:1 -election --election1 ---conRegex:1 --election2 ---conRegex:1 Here is the code to retrieve election1 and election2: var conid; var conRegex; var electionArr = []; if(uidA ...

javascriptfirebasefirebase-realtime-database

Error: Encountering difficulty locating the necessary stylesheet for import during the construction of an Angular15 build, while also utilizing Kendo UI

Following the update to Angular 15, I encountered an error while using Kendo UI for the UI controls. It appears that the use of the tilde key is now deprecated. ./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): S ...

javascriptangulartypescriptsasskendo-ui

The function exclusively examines the final element within the array

When validating user-submitted emails in my function, I compare each email to a list of valid email domains. The user emails are stored in an array, as well as the valid email domains. However, the issue arises when using the function as it only checks if ...

javascriptreactjs

Having trouble organizing a list of objects based on changing keys

Below is the implementation of a custom pipe designed to sort records: import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'sortpipe' }) export class SortPipe implements PipeTransform { transfor ...

javascriptangular

The timing of jQuery's .load function appears to be off, catching us by surprise

My current challenge involves loading returned html from an .aspx page through AJAX, but facing a timing issue with a click event that needs to occur before executing some essential tasks. Specifically, the process begins when a user types in a text field ...

c#asp.netjavascriptjqueryajax

When attempting to display the details of each restaurant on my detail page, I encountered the error "Cannot read property 'name_restaurant' of undefined."

I have set up dynamic routing for a ProductDetail page, where each restaurant has its own details that should be displayed. The routing is functional, but I am facing difficulty in retrieving data from Firestore using the restaurant's ID. PS: Althoug ...

javascriptreactjsfirebasegoogle-cloud-firestore

The components declared in the index file are rendered on every route throughout the React application

I'm a beginner with React and I'm using react-router version 6.0.2. My issue is that I created a component for the router and then called this component in the index file. However, when I add another component to the index file, it gets rendered ...

javascriptreactjs