My Javascript Ajax request works in Phonegap index.html but not in any other pages, how can I fix this?

Question

The request I have made works in the index.html file but not in any others which is greatly frustrating. I think it is to do with the onDeviceReady function but I am not sure how to change or fix this?

Here is the separate page (not index.html) code:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
    <script src="cordova-1.8.1.js"></script>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/load-whites.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>

<body>


    <div data-role="page" id="whites">

        <div data-role="header" data-position="fixed">
            <h1>White Wines</h1>
        </div>

        <div data-role="content">

            <div data-role="collapsible-set" data-theme="c" data-content-theme="d">
                <div id="whites"></div>
            </div>

        </div>
    </div>

</body>

Here is the request that works for the index.html file but not for any other .html files in my phonegap project (Cordova 1.8.1). How could I change it so that it does work? the file below is load-whites.js:

$(document).ready(function(){
              $(document).bind('deviceready', function(){
                               onDeviceReady();
                               });

              function yourCallback(button) {
              if (button == 2) {
              dataRequest();
              }
              }

              function dataRequest() {
              var output = $('#whites').text('Loading white wines and their deta1ils, please wait...');

              $.ajax({
                     url: 'http://localhost/whites.php',
                    dataType: 'jsonp',
                     jsonp: 'jsoncallback',
                     timeout: 5000,
                     success: function(data, status){
                     output.empty();

                $.each(data, function(i,item){

                       var whites =  '<div data-role="collapsible"><h3>'+item.Name+'</h3>'
                                    +'<b>Price:</b> £'+item.Price+'<br />'
                                    +'<b>Vintage:</b> '+item.Vintage+'<br />'
                                    +'<b>Country:</b> '+item.Country+'<br />'
                                    +'<b>Grape:</b> '+item.Grape+'<br />'
                                    +'<b>Alcohol:</b> '+item.Alcohol+'%<br /><br />'
                                    +item.Description+'</p></div>';



                       output.append(whites);

                  $('#whites').trigger('create');


                       });
                     },
                     error: function(){
                     output.text('The Wines could not be loaded at this time.');
                     navigator.notification.confirm(
                                'Please check your internet connection. Would you like to retry?',
                                yourCallback,
                                'Something went wrong',
                                'No,Yes'
                                    );
                     }
                     });
              }


              dataRequest();
              });

Any help would be greatly appreciated. Thanks again.

Answer 1

I see you are using JQuery mobile. Its possible it could be similar to a problem I had today and JQuery mobile was the culprit. http://jquerymobile.com/demos/1.1.1/docs/pages/page-scripting.html

If you are declaring the Javascript file in the header another page other than the index, it will ignore it. If this is your problem, declare the JS file load-whites.js in the index then..

$( document ).delegate("#PAGENAME", "pageinit", function() {
    //do work here
});

Not sure if this is your problem, but could be!

My Javascript Ajax request works in Phonegap index.html but not in any other pages, how can I fix this?

Question

1 answers

solution1
0 2012-08-23 16:11:14

My Javascript Ajax request works in Phonegap index.html but not in any other pages, how can I fix this?

Question

1 answers

solution1 0 2012-08-23 16:11:14

solution1
0 2012-08-23 16:11:14