jquery .load() function does not work under phonegap

Question

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.

What happens when you try to use it? Got any sample code to share? — Jason Dean, Sep 24 '11 at 16:54
I'll admit, I am confused by this call to load(). I have never seen a call to load() that takes a function as the first and only argument. Also, is this.image_container a jQuery object? How does it get created? And where are the response, status, and xhr values coming from? Is this wrapped in a $.ajax() success handler? — Jason Dean, Sep 25 '11 at 14:54
this.image_container is a jquery object and response, status, and xhr are wrapped in $.ajax failure handler. — ducktyped, Sep 26 '11 at 04:28
Since you are already using $.ajax with success() and failure() there is no reason to use load(). Load is simply an abstraction of $.ajax(). Instead use html() or text() on the DOM element that you want to put the data into. As for why it works in mobile safari, I cannot tell you. I don't think it should. If it really does I would say it is a quirk, not the way that it should work. — Jason Dean, Sep 26 '11 at 12:58

score 1 · Accepted Answer · answered Sep 27 '11 at 05:28

1

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.

answered Sep 27 '11 at 05:28

robocat

5,293
48
65

Jason Dean · Answer 2 · 2011-09-24T22:26:41.007

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.

jquery .load() function does not work under phonegap

2 Answers2

Linked