I have navigation bar in a JQM page:
<div data-role="navbar">
<ul>
<li>About</li>
<li>Details</li>
</ul>
</div>
Both pages have the same navbar.
I have back button as below:
<a href="#" data-icon="back" data-rel="back" >Back</a>
The problem is that back button will not go to the previous page prior to viewing the page, #details and #about pages are included in the history. How to disregard or exclude the two pages so that clicking back button will go to the page that load it first.
You can't since "data-rel=back" uses the browser history, hence:
start with "Main"
click "About"
click "Details"
click "About"
click "Back" - returns you to "Details"
click "Back" - returns you to "About"
click "Back" - returns you to "Main", woohoo!
I suggest you remove the navbars on both "About" and "Details" pages, this way you only have one way to go: back to the page where you called it.
The simplest way to do that would be to make your about and details pages jquery mobile dialog pages (see documentation).
Open dialog
Dialog pages are not tracked in the history, which should achieve the goal you are looking for.
Try this solution:
<script>
$('#about').click(function(){
$('#contentDiv').html('Your content');
});
$('#details').click(function(){
$('#contentDiv').html('Your content');
});
</script>
<body>
<div data-role="page" id="main">
<div id="contentDiv" data-role="content">
</div>
<div data-role="navbar">
<ul>
<li><a id="about" class="ui-btn-active ui-state-persist">About</a></li>
<li><a id="details">Details</a></li>
</ul>
</div>
</div>
</body>
When using this solution, you will make sure that when you click on the back button, you go to the previous page.
Related
So I have one page that works perfectly fine, I am actually creating the links programatically and any link to get to the page with the working back button from is fine - I can see the back button no problem, but then I have a drop down that is just UL full of links and the two pages I link to from there don't show the back button.
Here is the top of the working page.
<div data-role="page" id="detailsPage" data-add-back-btn="true">
<div data-role="header">
<h1 id="title"></h1>
</div>
There here is the one that doesn't work.
<div data-role="page" id="calendarPage" data-add-back-btn="true">
<div data-role="header">
<h1 id="title">Calendar</h1>
</div>
Here is the UL that has the link to the calendar page that won't show a back button.
<div class="ui-block-b">
<ul data-role="menu" id="optionsDropDown">
<li>
<span data-role="button" data-icon="arrow-d" data-iconpos="right" data-iconpos="left">Calendar</span>
<ul data-role="listview" data-inset="true">
<li data-icon="false">
Thursday
</li>
<li data-icon="false">
Friday
</li>
<li data-icon="false">
List All Sessions
</li>
<li data-icon="calendar">
<a href="#calendarPage" >Calendar</a>
</li>
<li data-icon="gear">
<a href="#settingsPage" >Settings</a>
</li>
</ul>
</li>
</ul>
</div>
The back button on detailsPage always works, the back button on calendarPage never shows up. I have trolled the site but people seems to have issues when they mess with changeHash which I haven't touched.
Could I be screwing something up in the JS? I can't see anything obvious, I could post my whole JS file but I don't even touch these pages from there or mess with the links or anything. I thought maybe because the display is set to none on that list I just showed you above that it wouldn't work but then I tried changing that - it make no difference if you can see it initially or not. I don't get any errors in the console. I am so stumped at the moment. I hope someone can help.
Thanks
Not sure if it is a possible cause but according to the docs, data-role="button" is only valid on <a>, <button> and <input> type elements. I don't see <span> listed there and wonder if that is affecting your navigation?
There is also no valid data-role="menu" attribute listed.
What version of jQuery Mobile are you using? Are you relying on any third party widgets?
I currently have a dialog that allows you to download a file, and another link (the one in question) to transfer the user to another page which links you to an external API.
When I pop up the dialog, I can click on close and the dialog closes properly. When I follow the external link the page loads correctly and everything like that.
However if I hit the back button, it keeps the #ui-dialog has in the URL and nothing is loaded into the page.
I have tried to set the changehash value to false, but when I do that and if I close the dialog, it takes me too far back in my browsers history.
$(document).ready(function () {
VaultManager.GetFolderConent(VaultManager.UserRootFolderGuid, "My Vault");
$.mobile.changePage.defaults.changeHash = false;
});
function PopDialog() {
$.mobile.changePage( 'MobileFileOptions.htm', { reverse:false, transition:'pop', role:'dialog' });
}
Instead of PopDialog(), I also tried this:
<a href="MobileFileOptions.htm" data-rel="dialog" data-transition="pop">
Here is MobileFileOptions.htm:
<div data-role="page">//I have tried data-role="dialog" as well
<div data-role="header" data-theme="e">
<h1 id="popupHeader">File</h1>
</div><!-- /header -->
<div data-role="content">
<div id="divFileName"></div>
<div id="divFileSize"></div>
<div id="divFileCreated"></div>
<ul data-role="listview" data-inset="true">
<li>Download</li>
<li>
<a href="BoxManager.aspx" data-rel="external" id="boxLink">
Send to Box.NET
</a>
</li>
</ul>
</div><!-- /content -->
</div>
Am I missing something somewhere?
I am fairly new with jQuery Mobile, so, I may have done some mistakes and I can't figure out to get much help from the docs.
I have couple of pages on my mobile web site. One page lets user log in and the other show user their date and lets user log out. However, when user is logged out and redirected to the login page they can click on back button and get back to the page where they supposedly authenticated.
I just have one html page divided into multiple divs ("pages") and using $.mobile.changePage to navigate from one page to another.
How can I make it so that when user does click on back button they don't see their data?
When I browse back my 'pageinit' doesn't get executed. If it was I would be able to check if the user is logged in...
Example:
http://jsfiddle.net/GF8np/5/
JS
var $secure_token = true;
$('div').live('pageshow',function(event, ui) {
// Check for secure token here
if($secure_token != true) {
$.mobile.changePage("#login", { transition: "slideup"} );
}
});
// Act if user has logged out
$('#secure2').live('pageshow',function(event, ui) {
$secure_token = false;
});
HTML
<div data-role="page" id="login">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Redirect</li>
<li>Secure Page 1</li>
<li>Secure Page 2</li>
</ul>
</div>
</div>
<div data-role="page" id="secure1">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Secure Page 1</li>
<li>Secure Page 2</li>
</ul>
</div>
</div>
<div data-role="page" id="secure2">
<div data-role="content">
<p>Please hit the browser back button or right click and back</p>
</div>
</div>
I think it's normal behaviour, as any browser saves the previous webpage it rendered. I just tested with my own webpage, and it indeed shows the info, but whenever you try and change something, the system redirects to the login view.
I mean, they will see the previous data, but it will be stale, and they won't be able to change it without login in first.
I have a set of jQuery UI tabs, which load their content via the ajax method:
<div id="tabs">
<ul>
<li><span>Inbox</span></li>
<li><span>Sent</span></li>
<li><span>Ins</span></li>
</ul>
<div id="Inbox"> ... </div>
<div id="Sent"> ... </div>
<div id="Ins"> ... </div>
</div>
JS:
$(document).ready(function () {
$("#tabs").tabs();
}
The tab titles are displayed, and the content of the first tab is loaded OK.
Using the AJAX Tabs method is detailed here
When I switch to a different tab, I can see the browser loads the content for that tab, but the content isn't displayed.
Any ideas what I am missing?
replace your ul list by this :
<ul>
<li><span>Inbox</span></li>
<li><span>Sent</span></li>
<li><span>Ins</span></li>
</ul>
Have fixed it now. I had a subsequent $.ajaxSetup() call that was upsetting things.
I'm trying to use the tabs purely as a navigational menu, loading my pages in the tabs, but being able to bookmark said tabs, and have the address bar correspond with the action I'm executing.
So here is my simple nav partial:
<div id='tabs'>
<ul>
<li id='home'>Home</li>
<li id='test'>Test</li>
</ul>
</div>
And the simple tabs intializer:
$(document).ready(function() {
$('#tabs').tabs({spinner: ''
});
});
My layout just displays $sf_content. I want to display the content for the action I'm executing (currently home or test) in the tab, via ajax, and have the tab be bookmarkable.
I've googled this like 4000 times and I can't find an example of what I'm trying to do. If anyone has a resource they know of, I can look it up, or if you can help, I would greatly appreciate it.
Thank you in advance.
This will make your tabs load using ajax
<div id='tabs'>
<ul>
<li title='home'>Home</li>
<li title='test'>Test</li>
</ul>
<div id="home">home content here</div>
<div id="test">test content here</div>
</div>