[Answered ]-Image Carousel Failing Unless Refreshed and Weird Redirects with jQuery Mobile

Omar helped me find solutions.

1. He had me set data-history=”false” as an attribute in the ‘div data-role=”page”‘ and move the popup scripts inside that div.
2. Apparently the URL was only changing in mobile Chrome on iPhone, not in Safari, and it was not a problem because it resolves to the intended URL.
3. I learned how to set the /help_me_decide page (‘four’) to load via http instead of AJAX by adding ‘rel=external’ to the anchor for it on the /choose_category page.

Because the popups were flashing and the images on the /help_me_decide page weren’t loading, we set up a popup script on pagecontainershow with a Timeout like this:

$(document).on("pagecontainershow", function () {
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
    if (activePage[0].id == "four") {
        setTimeout(function () {
            $("#popupDecideOMatic").popup().popup("open");
        }, 50);
        $(".slider", activePage).slick();
    }
});

But it turned out that the slider was actually already being initialized, so we took out ‘$(“.slider”, activePage).slick();’ and the images appeared (not sure why they didn’t in the first place).

Similar code was used for the /choose_category page:

$(document).on("pagecontainershow", function () {
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
    if (activePage[0].id == "one") {
        setTimeout(function () {
            $("#popupWelcome").popup("open");
        }, 50);
    }
});