jQuery Mobile e PhoneGap deviceReady() non attivato

sto provando a creare un nuovo progetto Android con PhoneGap 1.3.0. e JqueryMobile. Ma il problema è che, se uso il codice di prova Only Phone Gap, Phone Gap funziona! La funzione DeviceReady è attivata. Si prega di guardare gli esamijQuery Mobile e PhoneGap deviceReady() non attivato

<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>

Ma voglio usare la funzionalità di paging di jQuery. E il risultato: Deviceready non licenziato. Qual è il problema. Com'è possibile utilizzare sia i codici javascript di PhoneGap che la libreria jQuery.

<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>

Grazie,

fonte

2012-01-11 Erhan H.

È collocato all'interno document.addEventListener("deviceready", onDeviceReady, true);init ma mai effettivamente lo chiamano per fare l'inizializzazione. Quindi l'ascoltatore per deviceready non è collegato. Prova a passare a:

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

fonte

2012-01-11 07:30:07 dfsq

o modificare il tag del corpo in –

Grazie amico. Funziona sto lavorando su questo problema per 2-3 giorni :) –

Questo è l'equivalente;

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

fonte

2012-01-18 08:45:41

Equivalente di/per cosa? –

$ (function() {}); <==> $ (documento) .ready (funzione()) {}); –

Quando ho convertito il mio progetto per includere iPhone ho dovuto cambiare a document.addEventListener.

fonte

2012-04-29 12:52:01

jQuery Mobile e PhoneGap deviceReady() non attivato

risposta

Problemi correlati