I have a first page called index.html, where i have two links "red fruits" and "yellow fruits".
Then i have "fruits.html" which has two jquery pages with id "redFruits", "yellowFruits".
When somebody clicks "yellow fruits" link on the index.html i need to show the second "page" of the fruits.html. By default, jquery mobile shows the first page of the "fruits.html".
Any idea of how to link to random page of the ajax fetched document.
"index.html"
<div data-role="content">
List of red fruits
List of yellow fruits
</div>
fruits.html
....
<div data-role="page" id="redFruits">
....
<p data-role="content">
<ul>
<li>apple 1</li>
<li>apple 2</li>
<li>apple 3</li>
</ul>
</p>
.....
</div>
<div data-role="page" id="yellowFruits">
.....
<p data-role="content">
<ul>
<li>lemon</li>
<li>papaya</li>
<li>yellow fig</li>
</ul>
</p>
.....
</div>
You can reference the sub pages within a multiple pages document via hash tags:
List of red fruits
List of yellow fruits
You can use the pageparams plugin to send data to the second page - in this case an #id of the page to be displayed.
In the pagebeforeshow of page2 you can check for the param passed and changePage() accordingly.
Related
I don't want to change Common Menu Page and want to refresh contact page.
If click to menu link, Menu page don't want to change, only change contact page.
Looks like you want only part of the page to update when moving through routes (urls). Make sure you're using
<%= yield %>
somewhere in your application layout file and that controller templates (app/views/...) don't include the menu themselves.
Example:
<html>
<body>
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
<div id="container">
<%= yield %>
</div>
</body>
</html>
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.
I am using jQuery Mobile with MVC. I don’t know how to create a link to Index page of a car controller with pageid.
I have two pages defined in _Layout.cshtml:
First page:
<div data-role="page" id="CarID">
<div data-role="header">
<ul>
<li>1. Page Car</li>
<li>2. Page Maint</li>
</ul>
</div>
<div data-role="content">
#RenderSection("PageCar")
Second page:
<div data-role="page" id="MaintID">
<div data-role="header">
<ul>
<li><a href="#Url.Content("~/Car/Index/#CarID")" >1. Page Car</a></li>
<li>2. Page Maint</li>
</ul>
</div>
<div data-role="content">
#RenderSection("PageMaint")
The problem is that these links render section in Index page in home controller NOT the index page in car controller. Links without page id work so href="#Url.Content("~/Car/Index") works but, obviously since no page id I don’t know how to get to a particular page ID. I tried all kind of links, none will not quite work or will take me to home controller Index view:
<li>2 Page Maint</li>
<li>2 Page Maint</li>
<li>#Html.ActionLink("2 Page Maint", "Index", "Car", new { id = "Maint" }) </li>
Can somebody help to create a link to Index page of car controller with pageid? Any help would be greatly appreciated. Thanks
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.