jQuery mobile apps ajax call giving error

Question

I am developing an application using phonegap android. when I m running this piece of code it giving following error

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <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>
        <title>Insert title here</title>

        <script>
            (function($) {

                $.fn.getPageData = function() {
                    var finalData = "";

                    $.ajax({
                        url : "Demo url.com",
                        type : "GET",
                        success : function(data) {

                            finalData = '<div id="index" data-role="page" data-url="index" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 386px;"><div data-role="header" class="ui-header ui-bar-a" role="banner"><h3 class="ui-title" role="heading" aria-level="1">First Page</h3></div></div>';

                        },
                        fail : function() {
                            finalData = '<div id="index" data-role="page" data-url="index" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 386px;"><div data-role="header" class="ui-header ui-bar-a" role="banner"><h3 class="ui-title" role="heading" aria-level="1">Error Page</h3></div></div>';

                        }
                    });
                    this.append(finalData);

                };

            })(jQuery);
            $(document).ready(function() {

                $('body').getPageData();
                //$(a).appendTo("body");
            });
        </script>

    </head>
    <body>

    </body>
</html>

It is giving following error.

Origin null is not allowed by Access-Control-Allow-Origin.

You may check the: http://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin since this is a duplicate question. Moreover please note that the $(document).ready() function should not be used in jQuery Mobile. The reason is that Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. jQuery Mobile recommends binding to the pageinit event: http://api.jquerymobile.com/pageinit/ — Apostolos Emmanouilidis, Mar 02 '13 at 11:09

score 0 · Accepted Answer · answered Mar 02 '13 at 10:26

If you do Ajax Calls an OPTIONS call is sent to the server first in order to detect if it allows a Cross-origin resource sharing. If the header coming back doesnt allow this you get an error like this.

Can you try to use localhost (or the server itself) for your demo url?

Inspect your network tab.

You can read more about CORS at: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/

And about the Same Origin Policy at: http://en.wikipedia.org/wiki/Same_origin_policy

score 0 · Answer 2 · answered Mar 02 '13 at 10:29

0

Try adding http://localhost (or whatever your localhost URL is) to your phonegap.plist file under "external hosts". It will probably live in your supporting files directory.

answered Mar 02 '13 at 10:29

hollsk

3,124
24
34

jQuery mobile apps ajax call giving error

2 Answers2