jquery .load() function does not work under phonegap_问答_开发者

jquery .load() function does not work under phonegap

开发者 https://www.devze.com 2023-04-07 22:19 出处：网络

jquery .load() function is not working under phonegap on iPad. it works in mobile safari very well. But it\'s not working in Phonegap app. Any help would be appreciated.

jquery .load() function is not working under phonegap on iPad. it works in mobile safari very well. But it's not working in Phonegap app. Any help would be appreciated.

UPDATE: Here is what the code looks like:

开发者_高级运维this.image_container.load( function(response, status, xhr) {
    var dis = this;
    var imgWidth = dis.image_container.width();
    var imgHeight = dis.image_container.height();

    dis.containerEl.css({
        //some css addition
    }).animate( { "opacity": "1" }, 400, "linear" );
});

While debugging server response is

{"responseText":"","status":404,"statusText":"error"}

But I only get this in iPad phonegap. In mobile safari it just works fine.

Thanks in advance.

It still is not working. Here is code snippet:

this.image_container.load( function(response, status, xhr) {
  var dis = this;
  var imgWidth = dis.image_container.width();
  var imgHeight = dis.image_container.height();
  dis.containerEl.css({
    //some css addition
  }).animate( { "opacity": "1" }, 400, "linear" );
});

While debugging server response is

{"responseText":"","status":404,"statusText":"error"}

But I only get this in iPad phonegap. In mobile safari it just works fine.

Thanks in advance.

Try using a full URL.

AFAIK PhoneGap is actually served as local files. If you want to access external assets or Ajax, then include the protocol, domain and port (if necessary) in the URL.

I tried this and it worked fine in both the Android emulator and the iOS simulator.

<!DOCTYPE html> 
<html>
    <head>
    <meta charset="UTF-8">
    <title>jQuery Remote</title>
    <link href="jquery-mobile/jquery.mobile-1.0b3.min.css" rel="stylesheet" type="text/css"/>
    <script src="jquery-mobile/jquery.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.0b3.min.js" type="text/javascript"></script>

    <script src="phonegap.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function(){           
            $('#test1').load('index2.html');  // Local Call - This is just a file in the same project called index2.html with the word "Test" in it
            $('#test2').load('http://www.twitter.com/help/test.json');  // Remote call
            $('#test3').load('http://www.12robots.com/index.cfm .body');  // Another remote call
        });



    </script>
    </head> 
    <body> 

        <div data-role="page" id="page">
            <div data-role="header">
                <h1>Page One</h1>
            </div>
            <div data-role="content">
                <div id="test1"></div>
                <div id="test2"></div>
                <div id="test3"></div>
            </div>
        </div>
    </body>
</html>

I did notice that when I tried to load an entire HTML document (including head, body, html tags) that I only got a white screen. But when I only try to load part of a document (like just a div within the body, like my third example below) it works fine. I suspect that the browser just does not like the structure:

<html>
    <head>
    </head>

    <body>
        <div>
            <html>
                <head>
                </head>

                <body>
                </body>
            </html>
        </div>
    </body>
</html>

I don't blame it, I don't like it either.