I have a collapsible container that contains a form. If the user is logged in I want to show the form. If they are logged out I want to show a dialog page instead, which has a login form. Does anyone know how I can stop the collapsible content from showing when the user is logged out?
I've tried this:
- $('#mypage').live('pageshow',function(event, ui){
- $("#mybutton").live('tap',function(event) {
- if(user_logged_in) {
- $.mobile.changePage( "pages/login.php", 'dialog');
- return false; // I tried this to prevent the collapsible content from showing. it was just
- // a guess and it didn't work
- }
- });
- }); // .live('pageshow'...
And here's the html:
- <div data-role="collapsible" data-collapsed="true" data-theme="a">
- <h3 id="mybutton">Show Content</h3>
- // form stuff here...
- </div>
Any help is greatly appreciated. Thanks
update: I just tried putting the id on the div instead of the button (I think this makes more sense), but still no luck:
- <div id="mybutton" data-role="collapsible" data-collapsed="true" data-theme="a">
ah... wait: putting the id on the div doesn't seem to be good because the tap handler gets called when I click on form elements too. Guess I'll put the id back on the h3 element for now.