Q:

jQuery mobile apps ajax call giving error

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.

A:

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

