我的Javascript Ajax请求在Phonegap index.html中有效但在任何其他页面中都没有,我该如何解决这个问题?

时间:2012-08-22 15:06:38

标签: javascript jquery jquery-mobile cordova

我所提出的请求在index.html文件中起作用,但在其他任何令人沮丧的请求中都没有。我认为这与onDeviceReady函数有关,但我不确定如何更改或修复它?

以下是单独的页面(不是index.html)代码:

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

以下是适用于index.html文件的请求,但不适用于我的phonegap项目(Cordova 1.8.1)中的任何其他.html文件。我怎么能改变它以使它工作?下面的文件是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();
              });

非常感谢任何帮助。再次感谢。

1 个答案:

答案 0 :(得分:0)

我看到你正在使用JQuery mobile。可能它可能类似于我今天遇到的问题而JQuery mobile是罪魁祸首。 http://jquerymobile.com/demos/1.1.1/docs/pages/page-scripting.html

如果您在标题中声明Javascript文件而不是索引,则会忽略它。如果这是你的问题,请在索引中声明JS文件load-whites.js ..

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

不确定这是不是你的问题,但可能是!