Maintaining a Multi-page template in PhoneGap: Best practices

I'm a beginner in Hybrid app development, currently using PhoneGap and Jquery Mobile. In my app, I have around 10 separate pages such as login.html, index.html, search.html, etc. My query is whether I should include all JS and CSS files on each individual page, or just on the first page of the app?

I've observed that all inner pages seem to be pulling their JS and CSS from the first page. Is this correct?

Answer №1

When performing an ajax load to bring in a separate page, there is no need to include js and css references in multiple pages.

For instance:

<a href="multipage.html" rel="external" data-ajax='true'>Multi-page link</a>

Or using dynamic loading

$.mobile.changePage( "multipage.html", { transition: "slideup", changeHash: false });

In this scenario, you only need to include the references in multipage.html which will contain the body content.

However, if you opt for a complete page load, such as

window.location='multipage.html';

Then you will have to re-add the js and css references in the multipage.html file.

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

Combining multiple models in a single view using Ruby on Rails with ajax

Currently, I am in the process of developing a Ruby-on-Rails web application that serves as a tool for tracking product technical specifications. This marks my initial attempt at creating a RoR app after completing Michael Hartl's Rails Tutorial. Desp ...

Mockjax causes interference with X-editable's AJAX update functionality

$(function(){ //enable / disable $('#enable').click(function() { $('#user .editable').editable('http://domain.com/update.php'); }); //modify buttons style ...

Custom AngularJS directive for ensuring the selection of a required HTML element

Today brings another question as I continue working on my web application. I've encountered an issue with the 'required' attribute not being widely supported in major browsers. The attribute only works if the first option value is empty, whi ...

Is there a way to make the header reach the full width of the page?

Is there a way to make my header extend across the entire page? I attempted using margin-left and right, but it didn't yield the desired outcome. Header.css .header{ background: green; height: 70px; width: 100%; display: flex; ju ...

Is there a way to send a Python list to Django?

I'm in the process of setting up a website where I can retrieve a JSON list from my PRTG. Currently, I have successfully implemented code in the console that filters out sensors with a status of DOWN. However, I am facing difficulties in posting this ...

Best practice for showcasing an MVC Form with the use of Bootstrap

I am facing an issue with my form layout while trying to capture user input. The use of Bootstrap is creating two columns for text boxes and their labels, but the alignment goes off track with the last EditorFor element. I'm questioning if I am misusi ...

Convert to cshtml and retrieve the logged-in user's identification

I'm completely new to using AngularJS. I recently developed a demo login app, but I'm facing an issue where the page doesn't render even when the login id and password are correct. Code: app.controller('MainCtrl', ['$scope&ap ...

Struggling to incorporate JSON data and javascript functions into an HTML file

I've been struggling to create a feed from a json link and display it in separate divs within an html document. Despite multiple attempts with different approaches for three different newspaper sources, I have not been successful. I'm hoping som ...

I am currently facing an issue with validating forms in JavaScript Document Object Model (DOM)

Whenever I click on a field and move to another one, the span tag turns red. Then, after pressing the submit button, an alert message pops up. However, if I turn the span red, fill in the field, and press the submit button, it shows success even if other f ...

Strategies for successfully passing and showcasing the result of a calculation on a fresh view or component within Angular

I have developed a basic calculator application with two main components: Calculator and Result. The Angular router is used to navigate between these components. Now, I am looking for a way to dynamically display the calculation result from the Calculator ...

What is the best way to send parameters to a callback function in a jQuery $.getJSON method?

Currently, I am attempting to utilize jQuery to access a custom API using Ajax/$.getJSON. In my code, I am trying to send a specific value to the Ajax callback method, but I am encountering an issue where this value is not being properly passed and instea ...

Contrasting WebSQL and SQLite in terms of their utility in mobile applications and web browsers

Could you confirm if WebSQL and SQLite are the same? Are both WebSQL and SQLite available in PhoneGap? Will the JavaScript code used for WebSQL in a web browser be the same for a mobile app, or will we need different code? What advantages does WebSQL ha ...

Finding the correct closing tag in HTML can be accomplished using an algorithm

Currently working on my custom HTML parser in JAVA and have completed the lexer. Now diving into coding the parser to create a DOM tree and ensure the proper construction of my HTML. For example, understanding that an img tag is considered a void tag as p ...

jquery combobox with overlapping autocomplete suggestions

Encountering an issue with the jquery autocomplete combobox where they overlap when positioned side by side. Referencing this link for guidance: http://jqueryui.com/autocomplete/#combobox <!doctype html> <html lang="en"> <head> <me ...

How to adjust the vertical spacing between divs in a 960 grid using CSS?

I'm currently experimenting with the 960 grid css framework. How can I eliminate the space between two divs stacked on top of each other? [referring to the gap between the blue lines in the image] I created my CSS using the CSS generator found at . ...

Populate a Dropdown Menu with Directory Content for User Selection of d3.js JSON Data

I have a d3 forced-directed graph that is currently using a static JSON file for data: d3.json("../Data/sample.json", function(error, graph) { //do stuff }); However, I would like to give the user the ability to select the data file from a drop-down ...

accessing PHP array elements within JSON

How can I access an array of arrays returned from PHP in JSON format? This is the PHP array: $cities = array(); while($row = mysql_fetch_array($result)){ $cityRow= array('cityNo'=>$row['city_no'], 'cityName'=>$row[ ...

Ways to insert additional panels prior to and after a selected panel

A button is provided in the report designer detail band that, when clicked, should add new panels immediately before and after the detail panel. $parentpanel = $this.parents(".designer-panel:first"); This code snippet is used to locate the parent panel u ...

"Spin an image using Javascript when it is shown on the

I've got a script that shows an image when we are attacked by a monster. The image is initially set to display="none", but switches to display="" when a monster appears. What I'm looking to do is make the image rotate 360° when it changes from ...

Is there a way to create a footer similar to this one?

I need to create a footer, but I'm struggling with placing a circle at the top half of the footer like this. Even though I can create a footer, I still encounter some issues. This is the code I have right now: .Footer { position: fixed; left: ...