CODEWITHSUNDEEP
javascriptiphonejquery-mobilecordovaios-simulator
locorecto
locorecto

Reputation: 1203

Page is not found by the Iphone simulator when using ajax /Jquery Mobile-PhoneGap

I am creating a webapp for iPhone using jQuery Mobile and PhoneGap. Everything works fine in Safari for Mac and Chrome for Windows.

When I go to the iPhone Simulator the problems begin. Every button with a link to any page works fine except for one called "Article.html". The only way to open this page from the app is to turn off ajax by doing rel="external".

I have done everything in order to get it work. I have deleted the file and brought it back via add -> existing file with not luck. The content of the page "Article.html" is very simple and I don't think that is the problem because it doesn't even load the page. The loading symbol stays there for ever.

<!DOCTYPE html> 
<html>
    <head>
        <!--jquery and css files are being loaded in another page-->
        <title>This Date in History</title> 
    </head>
<body>
    <div data-role="page" class="type-interior" id="Article" data-add-back-btn="true" data-dom-cache="false"> 
        <div data-role="header" data-theme="a" data-position="fixed">
            <h1></h1>
            <a href="home1.html" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home" data-prefetch>Home</a>
        </div><!-- /header -->
        <div data-role="content">
                <h4 id="title"></h4>
                <h5 id="date"></h5>
                <div style="text-align:center;">
                    <img id="img" style="max-height: 138px; max-width: 200px; overflow: hidden;" src=""/>
                </div>
                <p id="milestone_text"></p>

                <a href="" id="more" data-role="button" data-icon="forward" rel="external">More about this event</a>
                </div><!-- /content -->
        <div data-role="footer" class="footer-docs" data-theme="a">
            <center><h5> Archives</h5></center>
        </div><!-- /footer -->
    </div><!--Page ends here-->
</body>

ANY SUGGESTION WOULD BE APPRECIATED..

Upvotes: 1

Views: 379

Answers (2)

locorecto
locorecto

Reputation: 1203

I found the answer by testing line by line.

For some reason, this line was giving problems:

<a href="" id="more" data-role="button" data-icon="forward" rel="external">More about this event</a>

As you can see, href is blank. I just put a bogus url

 <a href="www.google.com" id="more" data-role="button" data-icon="forward" rel="external">More about this event</a>

and that solved the problem.

Weird but it works.

Thanks for your help.

Upvotes: 0

Ali3n
Ali3n

Reputation: 1244

    <a href="home1.html" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home" data-prefetch>Home</a>

please give the full path in href for home1.html

Upvotes: 1

Related Questions