Databases
StackOverflow2013
Postsdbo
POCordova (PhoneGap) reinitializing on every page of jQuery Mobile app
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCordova (PhoneGap) reinitializing on every page of jQuery Mobile app
    primarykey
    data
    text
    <p>I've been writing a simple four-screen Android application using Cordova and jQuery Mobile. The different screens are arranged inside a single page of HTML as DIVs with the data-role="page" attribute. I basically copied the multi-page sample template from the jQuery Mobile documentation.</p> <p><a href="http://jquerymobile.com/test/docs/pages/page-anatomy.html" rel="nofollow">http://jquerymobile.com/test/docs/pages/page-anatomy.html</a></p> <p>Navigation between the pages happens via a persistent navbar stuck to the bottom of each page. Again, I used the code suggested in the jQuery Mobile docs with little modification.</p> <pre><code>&lt;div data-role="footer" data-id="appNavBar" data-position="fixed"&gt; &lt;div data-role="navbar"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#homePage" data-icon="home" data-transition="none" class="ui-btn-active ui-state-persist"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#historyPage" data-icon="grid" data-transition="none"&gt;History&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#settingsPage" data-icon="gear" data-transition="none"&gt;Settings&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#aboutPage" data-icon="info" data-transition="none"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The various Javascript libraries are included in the head section of the HTML page, as follows (application.js contains the logic of the app).</p> <pre><code>&lt;head&gt; &lt;title&gt;Redacted&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;link rel="stylesheet" href="jquery/RedactedTheme.min.css" /&gt; &lt;link rel="stylesheet" href="jquery/jquery.mobile.structure-1.1.0.min.css" /&gt; &lt;link rel="stylesheet" href="application.css" /&gt; &lt;script type="text/javascript" src="jquery/jquery-1.6.4.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery/jquery.mobile-1.1.0.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="flot/jquery.flot.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" charset="utf-8" src="statusbarnotification.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" charset="utf-8" src="application.js"&gt;&lt;/script&gt; &lt;/head&gt; </code></pre> <p>When Cordova is finished loading and is ready for use, it emits the "deviceready" signal. the Cordova docs recommend binding all setup code to an event listener tied to that signal. I have done it like this in application.js:</p> <pre><code>function onDeviceReady() { console.debug("Cordova initialized."); setup(); } document.addEventListener("deviceready", onDeviceReady); </code></pre> <p>setup() is a function that reads information from the browser Web SQL database and storage (using the Cordova API defined <a href="http://docs.phonegap.com/en/1.7.0/cordova_storage_storage.md.html#Storage" rel="nofollow">here</a>) in order to maintain user preferences and usage information between application launches.</p> <p>Now for the problem: I was under the impression that jQuery Mobile would use the jQuery ajax method to load any subsequent pages after the first page, and that in doing so it would strip out the head section and skip straight to the DIV with the data-role="page" attribute and the appropriate ID. What I am observing instead is that the scripts in the head section appear to be reloaded whenever I visit a new page of the application. This happens the first time the page is visited in the session and then stops happening. </p> <p>It appears that Cordova is being reinitialized and that it is emitting the deviceready signal again. Using LogCat in Eclipse, I can see the debug message I placed in the onDeviceReady function. the setup() function is also being called again. This slows things down considerably.</p> <p>Does anybody know where I'm going wrong? Is there a way to ensure that Cordova only loads once?</p> <p>Thanks, Evan</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USevandempsey
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCordova (PhoneGap) reinitializing on every page of jQuery Mobile app
      1. USuser1737140
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload