All geek questions in one place

JQuery Mobile & PhoneGapReady () device not starting

I am trying to create a new Android project using PhoneGap 1.3.0. and jquerymobile. But the problem is that if I use only the test code, Phone Phone Gap works! The DeviceReady function starts. See examples

<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Test Page</title> <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.css" /> <link rel="stylesheet" href="docs/assets/css/jqm-docs.css" /> <link rel="stylesheet" href="docsdemos-style-override.css" /> <script type="text/javascript" src="jquery.mobile/jquery-1.6.4.min"></script> <script type="text/javascript" src="jquery.mobile/jquery.mobile-1.0.js"></script> <script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script> <script type="text/javascript" charset="utf-8"> var onDeviceReady = function() { document.getElementById("devready").innerHTML = "OnDeviceReady fired."; }; function init() { document.addEventListener("deviceready", onDeviceReady, true); } </script> </head> <body > <div data-role="page" id="konum" data-theme="a"> <div data-role="header"> <h1>Position</h1> </div> <div data-role="content"> <p>APP will go here.</p> <p> <span id="devready">DeviceReady() Not Fired.</span> </p> </div>

But I want to use the jQuery paging function. And the result: Deviceready did not fire. What is the problem. How can I use both javascript PhoneGap code and jQuery library.

  <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Test Page</title> <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.css" /> <link rel="stylesheet" href="docs/assets/css/jqm-docs.css" /> <link rel="stylesheet" href="docsdemos-style-override.css" /> <script type="text/javascript" src="jquery.mobile/jquery-1.6.4.min"></script> <script type="text/javascript" src="jquery.mobile/jquery.mobile-1.0.js"></script> <script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script> <script type="text/javascript" charset="utf-8"> var onDeviceReady = function() { document.getElementById("devready").innerHTML = "OnDeviceReady fired."; }; function init() { document.addEventListener("deviceready", onDeviceReady, true); } </script> </head> <body > <div data-role="page" id="home" data-theme="a"> <div data-role="header"> <h1>Home</h1> </div> <div data-role="content"> <div data-role="content" id="twitList" > something will go here </div> </div> <div data-role="footer" data-id="foo1" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#home" id="home" data-icon="custom">Home</a></li> <li><a href="#about" id="about" data-icon="custom">About</a></li> <li><a href="#konum" id="konum" data-icon="custom">Position</a></li> <li><a href="#contact" id="contact" data-icon="custom">Contact</a></li> </ul> </div> </div> </div> <!------page seperator --------> <div data-role="page" id="about" data-theme="a"> <div data-role="header"> <h1>About</h1> </div> <div data-role="content"> <p>Hoopp! <a href="#home">Back</a></p> </div> <div data-role="footer" data-id="foo1" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#home" id="home" data-icon="custom">Home</a></li> <li><a href="#about" id="about" data-icon="custom">About</a></li> <li><a href="#konum" id="konum" data-icon="custom">Position</a></li> <li><a href="#contact" id="contact" data-icon="custom">Contact</a></li> </ul> </div> </div> </div> <!------page seperator --------> <div data-role="page" id="konum" data-theme="a"> <div data-role="header"> <h1>Position</h1> </div> <div data-role="content"> <p>APP will go here.</p> <p> <span id="devready">DeviceReady() Not Fired.</span> </p> </div> <div data-role="footer" data-id="foo1" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#home" id="home" data-icon="custom">Home</a></li> <li><a href="#about" id="about" data-icon="custom">About</a></li> <li><a href="#konum" id="konum" data-icon="custom">Position</a></li> <li><a href="#contact" id="contact" data-icon="custom">Contact</a></li> </ul> </div> </div> </div> </body>

Thanks,

+6
source share
3 answers

You posted document.addEventListener("deviceready", onDeviceReady, true); inside init , but don't really call it to initialize. Thus, the listener for deviceready not connected. Try changing to:

 $(function() { document.addEventListener("deviceready", onDeviceReady, true); });
+4
source

This is the equivalent;

 $(document).ready(function() { // Handler for .ready() called. document.addEventListener("deviceready", onDeviceReady, true); });
+6
source

When I converted my project to iPhone, I had to change it to document.addEventListener .

0
source

Source: https://habr.com/ru/post/905685/

More articles:


All Articles