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..
<a href="home1.html" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home" data-prefetch>Home</a>
ReplyDeleteplease give the full path in href for home1.html
I found the answer by testing line by line.
ReplyDeleteFor 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.