JQM - JQuery Mobile 1.4.2 infinite refresh, is it a bug?

StackOverflow https://stackoverflow.com/questions/23432364

  •  14-07-2023
  •  | 
  •  

Question

I couldn't find any other info about anyone with this problem... I am not using .page() anywhere, i even unlinked my exterenal javascript file, and it still happens.

I navigate using a navbar and randomly (not always) it will start reloading the page in an infinite loop. and there is this 1 page, that has nothing special that will always happen if i press f5 to reload it, but if i come from another page... it doesnt happen o O it's so weird.

I'm using php and jqm 1.4.2 with jquery 1.10.2. I would post code, but can't really pinpoint anything.

On the page that i can press f5/refresh and it always does this bug, i tried removing all content, and php, other than includes/header/footer partials and it still happens...., removing my js from header and it still happens, the only conclusion I can come to is jqm 1.4.2 jquery or my php settings, which i am clueless on what to do. Any idea? This site used to be in jqm 1.2.0 and don't remember having this problem then.

EDIT: It seems removing the _footer.php partial stopped the bug this is its contents:

<?php
$navCSS = "ui-btn-active ui-state-persist";
?>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar" data-iconpos="top">
        <ul>
            <li><a href="quarts.php" class="cui-icon ui-nodisc-icon <?php echo($pageID == "quarts")?$navCSS:""; ?>" data-icon="quarts" data-prefetch="true" data-transition="fade">Quarts</a></li>
            <li><a href="nouvelle.php" class="cui-icon ui-nodisc-icon <?php echo($pageID == "nouv")?$navCSS:""; ?>" data-icon="nouv" data-prefetch="true" data-transition="fade">Nouvelle</a></li>
            <li><a href="disponible.php" class="cui-icon ui-nodisc-icon <?php echo($pageID == "disponible")?$navCSS:""; ?>" data-icon="dispo" data-prefetch="true" data-transition="fade">Dispo.</a></li>
            <li><a href="paies.php" class="cui-icon ui-nodisc-icon <?php echo($pageID == "paie")?$navCSS:""; ?>" data-icon="paie" data-prefetch="true" data-transition="fade">Paies</a></li>
            <li><a href="#pushMenu" id="push" class="cui-icon ui-nodisc-icon <?php echo($pageID == "code" || $pageID == "docs" || $pageID == "profil")?$navCSS:""; ?>" data-icon="autre" data-transition="slide">Autres...</a></li>
        </ul>
    </div>
</div>

<!-- page end -->
</div>
</body>
</html>

EDIT: removing data-prefetch stops the issue, but i wanted to prefetch pages for smooth navigation and make it feel like an app, why does it cause this issue?

Was it helpful?

Solution

External pages/links are being prefetched several times as you are using the same navbar internally for each page. Your solution is to use an External footer and navbar which can be accessed from any internal or external page.

<body> <!-- or page container div -->
  <div data-role="page">
  </div>

  <!-- external footer -->
  <div data-role="footer" data-theme="a">
     <div data-role="navbar">
     </div>
  </div>

When using external widgets, you need to initialize them manually by calling .toolbar() and then .enhanceWithin() to initialize inner widgets.

$(function () {
  $("[data-role=footer]").toolbar().enhanceWithin();
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top