Modal menu issues using ratchet framework (twitter-bootstrap)

Question

I'm building a mobile app using ratchet, and I love the toolset so far, but I'm running into an issue using a modal as a menu.

Here's the live index page.

This is the only custom js I'm using:

$(document).ready(function() {
    if ((navigator.userAgent.match(/Android/i))) {
        $('head').append('<link rel="stylesheet" href="css/ratchet-theme-android.min.css" type="text/css" />');
        var plainAddress = $("#appAddress").text().replace(/\s+/g, "+");
        var paramAddress = encodeURI(plainAddress);
        var urlAddress = ('geo:0,0+?q=' + paramAddress);
        $('#appLink').attr('href', urlAddress);

    } else {
        $('head').append('<link rel="stylesheet" href="css/ratchet-theme-ios.min.css" type="text/css" />');
        var plainAddress = $("#appAddress").text().replace(/\s+/g, "+");
        var paramAddress = encodeURI(plainAddress);
        var urlAddress = ('http://maps.apple.com/?q=' + paramAddress);
        $('#appLink').attr('href', urlAddress);
    };
});
$.get('modal/qrModal.html', function(qr) {
    $("#loadedModals").append(qr);
});
$.get('modal/menuModal.html', function(qr) {
    $("#loadedModals").append(qr);
});

The rest is ratchet.js from goratchet.com. I'm pulling in the menu and the qr code via js because they're not unique to every page. The menu though when launched works fine, and when a selection is made the first time, it follows through, loads the page, and closes the modal.

After that it get's finicky.

Sometimes the modal won't load, sometimes it's unresponsive, sometimes it loads, loads a newpage but doesn't exit the modal.

Is this because I've exported it to external pages? Or is something else the matter?

Answer 1

It looks like your loadedModals container is being cleared out, and not repopulated after a new page is loaded via push.js.

<div id="loadedModals">
   ...
</div>

You can reload the modals after each push event by firing a callback.

var loadModal = function(){
    $.get('modal/qrModal.html', function(qr) {
        $("#loadedModals").append(qr);
    });
    $.get('modal/menuModal.html', function(qr) {
        $("#loadedModals").append(qr);
    });
};

loadModal();

window.addEventListener('push', loadModal);