CODEWITHSUNDEEP
htmlmobile
atekul
atekul

Reputation: 139

jquery mobile load new page return error

I make a test.html file like below:

<body>
<div data-role="page">
    <!--Head of the main web-->
    <div data-role="header" data-position="fixed">
        <h2><img src="pic/jquery-logo.png" alt="1"></h2>
    </div>


    <div role="main" class="ui-content">

        <div data-role="tabs" id="tabs">
            <!--3 row navbar--!>
            <div data-role="navbar">
                <ul>
                <li><a href="#one" data-ajax="false">first</a></li>
                <li><a href="#two" data-ajax="false">second</a></li>
                <li><a href="#three" data-ajax="false">third</a></li>
                </ul>
            </div>

            <!--first nav bar of the 3-->
            <div id="one" class="ui-body-d ui-content">
                <ul data-role="listview" data-inset="true">
                    <li><a href="order.html"><img src="pic/business_standard_room.png"></a></li>        
                </ul>
            </div>

            <div id="two">
                <ul data-role="listview" data-inset="true" class="ui-alt-icon">
                </ul>
            </div>

            <div id="three">
                <ul data-role="listview" data-inset="true" data-divider-theme="a">  
                </ul>
            </div>
    </div>

    <!--footer of the page-->
    <div data-role="footer" data-position="fixed">
        <h5>Powered by Atek</h5>
    </div>

</div>

I put the order.html and the test.html in the same folder.but when I click the link in the first tab.it returns me error.here is the error the chrome developer console showed

XMLHttpRequest cannot load file:///media/IRM_CCSA_X6/Mobile%20Website/Hotel/order.html. Received an invalid response. Origin 'null' is therefore not allowed access.

Upvotes: 0

Views: 142

Answers (1)

Ruben R Aparicio
Ruben R Aparicio

Reputation: 673

jQuery Mobile uses AJAX for the navigation inside the website, so when you press the link an AJAX call is done in order to get the new page.

I suppose that you are not using a server to test your website (just the file:/// protocol), and I think that is the problem. It has been reported a bug that local files are not loaded correctly using AJAX on Chrome, so you should use other browser or deploy a server to test it on Chrome.

Or in case you don't want to use the AJAX navigation, you could add the atribute data-ajax to the link in order to disable it:

<a href="order.html" data-ajax="false">

Hope this helps!

Upvotes: 1

Related Questions