Question

I have a pop up box that invites users to complete a process after they log in. In our regular web app everything works fine. In our mobile web app, the FIRST time the index page is loaded AFTER LOG IN the pop up is not displayed. When the page is RELOADED the pop up does display.

in application.js:

$(document).ready(function() {
    $("h1").fadeIn(1000);
    $('.fade').delay(2000).fadeOut(2000);
    loadPopupBox(); # --------------------------------- line that loads pop up
    $('.popupBoxClose').click( function() {            
        unloadPopupBox();
    });
    function unloadPopupBox() {
        $('.step_pop').fadeOut("slow");
    }    
    function loadPopupBox() {
        $('.step_pop').fadeIn("slow");
    }        
});

in index.mobile.erb:

<% unless @step1 && @step2 && @step3 && @step4 %>
    <%= render :partial => "steps_pop" %>
<% end %>

in _steps_pop.mobile.erb:

<div class="step_pop" style="width: 90%; height: 80%; left: 5%; top: 5%; ">
    ... process description then yes or no
</div>

We are using Devise for authentication.

Thanks for your help.

Answer 1

instead of placing the pop up script within:

$(document).ready(function()

I placed it within:

$( document ).delegate("#aboutPage", "pageinit", function()