0

I am using phonegap with jquery mobile in my app.

I am stuck in one strange problem and tried with solutions got from so many ques on StackOverflow but nothing seems to be working so asking here.

The problem is:

When i call a page like:

window.location.href="page1.html"//it works

it fires onDeviceReady but when i call it from jQueryMobile nav bar li tag using anchor tag it just loads the body but doesn't call any of the event no matter whatever i do.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8">

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
        <script type="text/javascript">


            function onBodyLoad()
            {
                document.addEventListener("deviceready", onDeviceReady, false);
            }

            function onDeviceReady()
            {
                alert("testing");
                //my things
            }

            </script>

        </head>

<body onload="onBodyLoad()">
    <div data-role="header" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>

                <li><a href="Page1.html" data-theme="a">page1</a></li>
                <li><a href="Page2.html" data-theme="a" class="ui-btn-active ui-state-persist">page2</a></li> <!-- these two pages get called but doesn't fires onDeviceReady or onBodyLoad -->

            </ul>
        </div><!-- /navbar -->
    </div>
</body>
</html>

Tried with this one also but didn't work:

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

Any suggestion how to resolve this?Thanks.

N.B: These answers(may be duplicate) didn't work.

jQuery Mobile & PhoneGap deviceReady() not fired

Community
  • 1
  • 1
Mayukh Raaj
  • 403
  • 2
  • 7
  • 19

1 Answers1

3

It is because jquery Mobile intercepted the anchor tag use ajax to get the HTML instead of changing page directly. In your case, it is getting Page1.html by using ajax and it won't execute the javascript in your Page1.html.
You would specify data-ajax="false" in the anchor tag to refresh the page 

<a href="Page1.html" data-theme="a" rel="external" data-ajax="false">page1</a>

To more understand abour jquery Mobile: http://jquerymobile.com/demos/1.0a3/docs/pages/docs-pages.html

Moreover, it is better to follow this structure as recommended in jquery Mobile

<div data-role="page" id="Page1"> 
    <div data-role="header">...</div> 
    <div data-role="content">...</div> 
    <div data-role="footer">...</div> 
</div>

If you would like to execute something on page create, you bind an event to your page

$( '#Page1' ).live('pagecreate',function(event){
  alert("Hello world");
});
Derek
  • 2,695
  • 1
  • 16
  • 17
  • Awesome man!!thanks.It worked.I appreciate the time taken by you to answer this!! – Mayukh Raaj Feb 26 '13 at 10:13
  • So do you Mean to say if i want to fire onDeviceReady event of phonegap i should call it like $( '#Page1' ).live('pagecreate',function(event){ onDeviceReady(); }); ?? – Mayukh Raaj Feb 26 '13 at 10:31
  • Nope, they are different. onDeviceReady is an event from Phonegap. If you use Phonegap API, such as Storage, notification, you have to make sure phonegap is loaded completely. http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html For `pagecreate` event, it is from jquery Mobile http://api.jquerymobile.com/pagecreate/ – Derek Feb 26 '13 at 11:24