Show / hide jQuery in jQuery Mobile

Question

I have a very simple jQuery mobile app. When the user clicks the "Settings" button, I want to redirect them to another page that requests them for their email address. I want a nice slide transition between two pages. However, there seems to be a compromise.

Basically, if I have 'rel = "external" in my settings button, as shown below, the user will be transferred 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 obviously my div. Its like a .hide code is not called.

In this type of situation, how should I call functions like .hide? I clearly want to hide the errMsg source code. But I'm not sure how to do this, while maintaining the good transitions highlighted 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> 

Thanks for any help / ideas you can provide.

Answer 1

try updating setup.html code 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> 

Answer 2

Do not use $(document).ready() in jQueryMobile code. Instead, write pageinit event as described here .

In this case, you may need the following:

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

Answer 3

I believe that your problem is that if rel = "external" is not applied, the call to get the page is made through ajax, which means that the document ready function does not start again. Where, when the rel = "external" attribute will go and will make a complete answer that will run your finished function.

It is worth noting the same that query strings are also not 100% fresh when using ajax calls. I was forced to do a full post for this reason more times than I had originally hoped.

Go back to your decision, either make a full post back using an external attribute, or change the event so that it can fire when an ajax call is made.

Answer 4

Your div error should be at the page level, outside the header, footer, or main.