Hi,
I'm writing an App for Android using PhoneGap and jQueryMobile. In a page, I'm dynamically adding some html content and the hyperlinks I add are styled as buttons when I think they should not.
I'm using the latest jQueryMobile version atm (1.0a3). Here's the code rendered:
- <div data-role="page" id="page_news" data-url="page_news" class="ui-page ui-body-c ui-page-active"><!-- Pàgina notícies -->
- <div data-role="navbar" class="ui-navbar ui-navbar-noicons" role="navigation">
- <ul class="ui-grid-a">
- <li class="ui-block-a"><a href="#page_index" data-theme="c" class="ui-btn ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">Resultados</span></span></a></li>
- <li class="ui-block-b"><a href="#page_news" class="ui-btn-active ui-btn ui-btn-up-c" data-theme="c"><span class="ui-btn-inner"><span class="ui-btn-text">Noticias</span></span></a></li>
- </ul>
- <div data-role="content" id="page_news_content" class="ui-content" role="main"><div><span class="feedTitle">10:33 lavanguardia2 via twitter</span><br><span class="feedContent"><table><tbody><tr valign="top"><td><a href="http://twitter.com/lavanguardia2" rel="external"></a><img src="http://a2.twimg.com/profile_images/1242458543/Untitled_normal.png" width="48" height="48" border="0"> </td><td>El jeque qatarí, epicentro del deporte mundial: El pequeño país de Qatar es poderoso gracias a los dólares que g... <a href="http://bit.ly/gooTJ8" rel="external">http://bit.ly/gooTJ8</a> </td></tr></tbody></table></span></div><div><span class="feedTitle">9:31 lavanguardia2 via twitter</span><br><span class="feedContent"><table><tbody><tr valign="top"><td><a href="http://twitter.com/lavanguardia2" rel="external"></a><img src="http://a2.twimg.com/profile_images/1242458543/Untitled_normal.png" width="48" height="48" border="0"> </td><td>La producción industrial crece un 6 % y suma tres meses de subidas: Madrid (EFECOM).- La producción industrial a... <a href="http://bit.ly/fIxELU" rel="external">http://bit.ly/fIxELU</a> </td></tr></tbody></table></span></div><div><span class="feedTitle">9:25 brafales_gnuine</span><br><span class="feedContent">Test 2</span></div><div><span class="feedTitle">9:14 brafales_gnuine</span><br><span class="feedContent">Test</span></div></div><!-- Content -->
- <div data-role="footer" class="ui-bar-a ui-footer" role="contentinfo">
- <h4 class="ui-title" tabindex="0" role="heading" aria-level="1">gnuine.com</h4>
- </div><!-- Footer -->
- </div><!-- Page -->
- </div>
As you can see the links are pretty standard hrefs with the rel="external" attribute.
And this is how I get the html rendered (both simulator and on Nexus One using 2.2 Android version):
I'ts pretty strange. In Chrome Browser the links are styled as they should, and in Firefox too, but in the simulator and Nexus One I'm getting this.
Any idea of what might be happening?
UPDATE: I just tried it on my iPhone and I'm getting the same result, and also the toolbar is disappearing:
UPDATE 2: as the feed is refreshed at a fixed interval, I found out that on subsequent updates, the links appear correctly. So when the links are first added, they're rendered as buttons, and on the subsequent updates are shown correctly. Pretty strange.