JQuery show/hide in JQuery Mobile

Question

I have a very basic JQuery mobile application. When a user clicks my "Setup" button, I want to redirect them to another page that prompts them for their email address. I want the nice "slide" transition between the two pages. However, there seems to be a trade-off.

Basically, if I have 'rel="external"' in my Setup button, as shown below, the user will be taken to the next screen. However, there is no transition. But if I remove 'rel="external"', I get a transition, but, there is a small red bar at the top of the next screen. This red bar is clearly my errMsg div. Its like the .hide code doesn't get called.

In this type of situation, how should I call functions like .hide? I clearly want to hide the errMsg div initially. But I'm not sure how to do this, while still allowing for the nice transitions alloted by JQuery Mobile.

Home.html

<div data-role="page">
  <div data-role="header"><h1>My App</h1></div>

  <div data-role="content"> 
    <div><a href="/setup" rel="external" data-role="button">Setup</a></div>
  </div>
</div>

Setup.html

<div data-role="page">
    <div data-role="header"><h1>Setup</h1></div>

    <div data-role="content">   
        <div id="errorMsg" style="background-color:red; padding:2px 0px 2px 8px; margin-bottom:6px;"></div>

        <label for="emailTextBox">Email Address</label>
        <input id="emailTextBox" type="email" /><br />  
    </div>
</div>

<script type="text/javascript">
  $(document).ready(function () {
    $("#errorMsg").hide();
  });
</script>

Thank you for any help/insights you can provide.

Answer 1

Do not use $(document).ready() in your jQueryMobile code. Instead capture pageinit event, as explained here.

In this case, you may need to use something like:

$(':jqmData(role="page")').live('pageinit', function(event) {
  $("#errorMsg").hide();
});

Answer 2

try by updating your setup.html code as below

    <div data-role="page">
    <div data-role="header"><h1>Setup</h1></div>

    <div data-role="content">   
        <div id="errorMsg" style="background-color:red; padding:2px 0px 2px 8px; margin-bottom:6px;"></div>

        <label for="emailTextBox">Email Address</label>
        <input id="emailTextBox" type="email" /><br />  
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#errorMsg").hide();
         });
     </script>

</div>