1

I'm having some problems which I haven't been able to find documentation about on the web.

The problem is that the navigation menu will sometimes hang itself after navigating around the page. It happens quite often so you should be able to replicate it by visiting the temp site I put up: https://infinite-temple-73811.herokuapp.com

Try to navigate around from page to another page and repeat and it should happen after some clicks.

I'm not certain why this happens, but my suspicion is that it has something to do with that the menu item 'Snabba frågor' and 'Topplistan' initiates AJAX calls.

Also worth noting is that it's a single HTML file.

I do AJAX calls like the following

$(document).delegate('#startQuiz', 'click', function () {
    $.ajax({
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
         },
         type: 'GET',
         url: '/quickQuiz',
         async: false,
         success: quizStarted,
         fail: onFail,
         statusCode: {
             401: function () {
                 $.growl.error({message: "Error vid validate..."});
             }
        }
    }).done(function () {
        console.log('Login Ajax done!');
    });
});

And, the quizStarted method looks like the following:

var quizStarted = function (data, textStatus, xhr) {
    console.log("Validate done.");

    var result = jQuery.parseJSON(data);

    $('#imagePath').attr("src", result.image);
    $('#quickQuestion').text(result.question);
    $('#quickOne').text(result.quickOne);
    $('#quickTwo').text(result.quickTwo);
    $('#quickThree').text(result.quickThree);
    $('#quickFour').text(result.quickFour);
    $('#currentPoints').text(result.points);
    location.href = "#quickQuiz"; 
}

In the back-end everything seems to look fine, it's just the navigation panel that hangs. Everything else remains responsive while it happens.

EDIT1: The panel code:

<div data-role="panel" id="panel" data-position="right" data-display="reveal" class="ui-btn-right">
    <h2>Meny</h2>
    <ul data-role="listview">
        <li data-icon="home"><a href="#home">Home</a></li>
        <li><a id="startQuiz">Snabb frågor</a></li>
        <li><a id="displayHighscore">Topplistan</a></li>
        <li class="adminPage"><a href="#admin">Admin</a></li>
        <li class="login"><a href="#dologin">Login</a></li>
        <li class="logout" data-icon="delete"><a id="logoutBut">Logout</a></li>
    </ul>
</div>

EDIT2:

After some more investigating I actually don't believe it's related to the AJAX calls anymore. Because if you navigate just between Home and Login it still happens, they don't initialize any AJAX calls.

Viktor Plane
  • 127
  • 3
  • 16
  • Panel's ID is the same in all pages? In anchors, you have missed `#`, e.g. `href="#startQuiz"`. – Omar Jun 25 '16 at 23:42
  • Panel ID's are the same yes. The leaving out href is intended for the pages who needs an AJAX calls before, the navigation is done after the ajax call with `location.href="#..."` after. – Viktor Plane Jun 25 '16 at 23:53
  • 1
    Your problem is caused by using the same ID on all panels. If the panel is the same across all pages, then use _external panel_ (http://stackoverflow.com/a/21857463/1771795) or use unique ID for each panel. To change between pages, use `$.mobile.pageContainer.pagecontainer("change", "#page ID or URL")` (http://stackoverflow.com/a/19186330/1771795) – Omar Jun 25 '16 at 23:59

1 Answers1

0

The comment from Omar fixed it for me.

Instead of using many panels with the same ID inside each page, I changed to an external panel. Now it works a lot better.

Viktor Plane
  • 127
  • 3
  • 16