Issue on redirecting using listview menu

Issue on redirecting using listview menu

Hello everyone,

I'm having some issues using listview for menu navigation, here is the code that I use to navigate along internal pages inside a html file:

  2. <!-- Beggining of Navigation Page -->
  3. <div data-role="page" class="contenidoPagina"  id="indexPage">
  4. <!-- Social Header -->
  5. <div class="ui-header">
  6. <div class="social">
  7. <a class="phone ui-link" href="tel:***" title="">&nbsp;</a>
  8. <a class="gplus" href="https://plus.google.com/***" title="">&nbsp;</a>
  9. <a class="fb ui-link" href="https://www.facebook.com/***" title="">&nbsp;</a>
  10. <a class="twitter ui-link" href="http://twitter.com/***" title="">&nbsp;</a>
  11. </div>
  12. <div class="logo"><a href="index.html" title="Back to web main page"><img src="image/comun/header/logotipo.png" alt="***" /></a></div>
  13. </div>
  14. <!-- Navigation Index -->
  15. <h1 id="bannerSTR">Title main menu</h1>
  16. <div id="navIndexPage" data-role="content">
  17. <!-- Main navigation links -->
  18. <ul data-role="listview" data-inset="true" data-theme="d">
  19. <li><a href="#firstpage"><img src="image/comun/nav/relojdepulsera.png" alt="Reparación de relojes Racer" class="ui-li-icon">First page</a></li> 
  20. <li><a href="#secondpage"><img src="image/comun/nav/fornitura.png" alt="Fornitura Racer" class="ui-li-icon" style="margin-left:-0.3em;">Second page</a></li>
  21. <li><a href="#thirdpage"><img src="image/comun/nav/repartonacional.png" alt="Racer" class="ui-li-icon" style="margin-left:-0.1em;">Third page</a></li>
  22. <li><a href="#fourthpage"><img src="image/comun/nav/info.png" alt="Racer" class="ui-li-icon" style="margin-left:-0.1em;">Fourth page</a></li>
  23. <li><a href="#fifthpage"><img src="image/comun/nav/servicioadomicilio.png" alt="Contacto" class="ui-li-icon" style="margin-left:-0.3em;">Fifth page</a></li>
  24. </ul>
  25. </div>
  26. <!-- Fin Content -->
  27. </div>
  28. <!-- End of Navigation Page -->
As you can see I'm using href for local page's ID redirection, here's an example of one of this here:
  2. <!-- Beggining of  second Page -->
  3. <div data-role="page" class="contenidoPagina" id="secondpage">
  4. <!-- Social Header -->
  5. <div class="ui-header" >
  6. <div class="social">
  7. <a class="phone ui-link" href="tel:****" title="">&nbsp;</a>
  8. <a class="gplus" href="https://plus.google.com/***" title="">&nbsp;</a>
  9. <a class="fb ui-link" href="https://www.facebook.com/***" title="">&nbsp;</a>
  10. <a class="twitter ui-link" href="http://twitter.com/***" title="">&nbsp;</a>
  11. </div>
  12. <div class="logo"><a href="index.html" title="Volver a la portada"><img src="image/comun/header/logotipo.png" alt="***" /></a></div>
  13. </div>
  14. <!-- Main content of second page -->
  15. <div data-role="content">
  16. <h2>Page Title</h2>
  17. <article class="exampleArticle">
  18. <p>
  19. Example text
  20. </p>   
  21. <!-- Inside HTML page navigation -->
  22. <div data-role="controlgroup" data-type="horizontal" class="navArticle">
  23. <a href="#firstpage" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="b">First page</a>
  24. <a href="#indexPage" data-role="button" data-icon="home" data-iconpos="notext" data-theme="b">Main Menu</a>
  25. <a href="#thirdpage" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="b">Third page</a>
  26. </div>
  27. <p></p>
  28. </article>
  29. </div><!-- end content -->
  30. </div>
  32. <!-- End of  second Page -->

I have realized that this code only works when the page is reloaded, you can find a page where this issue can be found  here

I'm using HTML5, JQuery Mobile 1.3.1 and JQuery 1.9.1

Any support would be helpful