Question

I’m trying to do a simple $.get() request on a local file in my (XCode) iPhone simulator (using PhoneGap), but the result keeps returning as “[object Document]” (via alert), instead of the actual content of the file.

However, when I test it in Google Chrome, I have no issues at all. The odd thing is that I can $.load() the local page with no problem (in the iPhone simulator), but when I try to $.get() it, it wont work.

Here is my index.html code:

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

<div class="load"></div>

<script>

    $.get('content/view/images.html', function(data) {

        alert(data); // returns "[object Document]"

    });

    $('.load').load('content/view/images.html'); // returns actual file content

</script>

Here is my content/view/images.html code:

<img src="http://static.example.com/images/{$file_key}.{$file_type}" style="max-width: 100%; max-height: 200px;" />

However, when I change the content of content/view/images.html to a something like LOL, it will properly $.get() it.

Any ideas as to what in the world is going on?

Answer 1

Unless you tell jQuery otherwise, it will guess what to do with the data coming back on the basis of the MIME type sent back with the data. If you’re getting back a document, the MIME type coming back must be XML (so presumably your HTML page is XHTML, or at least that’s what the server’s saying). (See the $.ajax documentation on the dataType option; the only time jQuery creates a document is when dealing with XML.)

You can tell jQuery you always want it as text by giving it a dataType, which is the argument just after the success handler in $.get:

$.get('content/view/images.html', function(data) {

    alert(data);

}, "text");
// ^--- new bit

…or you can specify it on an options object with $.ajax:

$.ajax({
    url: 'content/view/images.html',
    dataType: "text",        // <=== new bit
    success: function(data) {

        alert(data);

    }
});