CODEWITHSUNDEEP
jqueryjquery-mobile
JQuery Mobile
JQuery Mobile

Reputation: 6291

JQuery show/hide in JQuery Mobile

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.

Upvotes: 6

Views: 17633

Answers (4)

ViniciusC
ViniciusC

Reputation: 29

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

Upvotes: 0

DG3
DG3

Reputation: 5298

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>

Upvotes: 1

Pablo
Pablo

Reputation: 2854

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();
});

Upvotes: 8

OnResolve
OnResolve

Reputation: 4032

I believe what your hitting this issue is that if rel="external" is not applied, the call to get the page is done via ajax which means the document ready function is not fired again. Where as the rel="external" attribute will go and do a full post back which will trigger your ready function.

It should be worth noting in the same manner, that query strings are also not 100% "fresh" when using the ajax calls. I've been forced to do a full post back for this reason more times than I originally hoped to.

Back to your solution, either do a full post back using the external attribute, or change the event to allow it to fire when the ajax call is made.

Upvotes: 0

Related Questions