JQuery Mobile swipe to navigate as single page style - jquery-mobile

I am new to JQuery Mobile. Currently trying to use JQM in an ASP.NET MVC project. I am following this tutorial found on JQM official site. But it uses multiple html pages.
<div data-role="page" id="page2" data-prev="page1" data-next="page3">
<div role="main" class="ui-content">
.....
</div>
</div>
Here data-next="page3" is used to show page3.html. My question- is page3.html being loaded by ajax while viewing page2.html ?. If I would like to use all the pages in a single html file by using JQM Page, how should i proceed?

data-next and data-prev are just arbitrary HTML5 data attributes used in the example to store the url of the next and previous pages. For internal pages you could set them to "#page2", "#page3", etc. So for 3 pages you might set it up like this:
<div id="page1" data-role="page" data-prev="" data-next="#page2">
<div data-role="header" data-position='fixed'>
<h1>Page 1</h1>
</div>
<div data-role="content">
I am page 1
</div>
</div>
<div id="page2" data-role="page" data-prev="#page1" data-next="#page3">
<div data-role="header" data-position='fixed'>
<h1>Page 2</h1>
</div>
<div data-role="content">
I am page 2
</div>
</div>
<div id="page3" data-role="page" data-prev="#page2" data-next="">
<div data-role="header" data-position='fixed'>
<h1>Page 3</h1>
</div>
<div data-role="content">
I am page 3
</div>
</div>
Then you just update the example's javascript to use the internal url without adding the ".html" to it:
function navnext( next ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", next, {
transition: "slide"
});
}
function navprev( prev ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", prev, {
transition: "slide",
reverse: true
});
}
$( document ).one( "pagecreate", "#page1", function() {
// Handler for navigating to the next page
// Navigate to the next page on swipeleft
$( document ).on( "swipeleft", ".ui-page", function( event ) {
// Get the filename of the next page. We stored that in the data-next
// attribute in the original markup.
var next = $( this ).jqmData( "next" );
if ( next ) {
navnext( next );
}
});
// The same for the navigating to the previous page
$( document ).on( "swiperight", ".ui-page", function( event ) {
var prev = $( this ).jqmData( "prev" );
if (prev) {
navprev( prev );
}
});
});
jQM uses the jqmData() function to get and set data attributes.
Here is a working DEMO

Related

jQuery Mobile - Prevent page navigation after changepage event is triggered

Basically the use case is this:
I have a form that the user is filling out a form and accidentally click another link. In the pagebeforehide event, I want to stop the navigation. I tried to do
event.stopPropagation();
event.preventDefault();
but neither of them stop the navigation from happening. Does anyone have any idea how to do this? It's not immediately clear how to handle this.
event.preventDefault(); should work if all your code is in the right places. Here is a simple example:
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<label for="text-basic">Type 1 to allow navigation:</label>
<input type="text" name="text-basic" id="text-basic" value="" />
<br /><br />
<a class="ui-btn" href="#page2">Go to page 2</a>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>My page footer</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My page 2</h1>
</div>
<div role="main" class="ui-content">
page 2
<a class="ui-btn" href="#page1">Go back to page 1</a>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>My page footer</h1>
</div>
</div>
I have 2 pages and only want the user to go to page 2 if he/she types "1" into the text box.
$(document).on("pagecreate", "#page1", function(){
$( "body" ).on( "pagecontainerbeforetransition", function( event, ui ) {
var currPage = $( "body" ).pagecontainer( "getActivePage" ).prop("id");
if (currPage == "page1"){
var val = $("#text-basic").val();
if (val != "1") {
alert("you must enter 1 in the text box!");
event.preventDefault();
} else {
$("#text-basic").val("");
}
}
});
});
In the pagecontainer widget pagecontainerbeforetransition event, I see which page we are currently looking at, if it is page1, then check what the user has entered in the textbox. If I do not find the string "1", prevent navigation and alert the user.
Here is a working DEMO

jQuery Mobile AJAX navigation to a page having a dialog

JQM AJAX navigation doesn't work well when navigating to a page with an in-page dialog?
page1.aspx:
<div data-role="page">
<div data-role="header">Page 1</div>
<div data-role="content">
<a href='page2.aspx'>Click here</a>
</div>
</div>​
page2.aspx:
<div data-role="page">
<div data-role="header">Page 2</div>
<div data-role="content">
Popup
</div>
</div>​
<div data-role="dialog" id='popup'> <!-- This is not loaded on AJAX navigation -->
<div data-role="header">Page 2 Popup</div>
<div data-role="content">
Popup content
</div>
</div>​
When you click the link from Page 1, it doesn't load the <div data-role='dialog'> of Page 2.
How do you get around this issue?
There is a workaround here. I modified it a little:
$(document).bind('pagecontainerload', function (event, ui) {
// Find all dialogs in the DOM
var response = ui.xhr.responseText;
var data = $(response).find("div[data-role='dialog'],div[data-role='popup']");
for (var i = 0; i < data.length; i++) {
var node = data.eq(i);
if (node.attr('id') && document.getElementById(node.attr('id')))
$('#' + node.attr('id')).remove(); // Delete existing one
node.addClass('cache').appendTo('#form1'); // or appendTo('body')
}
});
I added the class cache for cleanup purpose.

Change the background color of listview item when its selected in jquery mobile 1.4.0

I have a list view inside a popup , when the user select a list element I want to change this element "li" background color , I have tried the following code it was working on jQuery mobile 1.3.2 but it didn't work when i upgraded my app to 1.4.0 , How can I change the background color of the list element when the user click on it ? please help me
<div data-role="page" id="index">
<div data-role="header" data-theme="b">Main</div>
<div data-role="content">
Show Popup
</div>
<div data-role="popup" id="MyPOPUP" data-position-to="window" data-corners="false" data- overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="a">
<div style="text-align:center;float:center;padding-top:11px;">
<font size="6px" color="white">Countries</font>
</div>
</div>
<div id="scrollContent" class="content" data-role="content" style="background-color: white;">
<ul data-role="listview" id="countrieslist" style="margin: 0 !important;">
</ul>
</div>
</div>
</div>
Java script code
$('#index').on( 'pageinit',function(){
for(var i=1;i<=50;i++)
{
$('#countrieslist').append('<li id="'+i+'">'+''+'<font>'+Country+i+'</font>' +'</li>');
}
$('#countrieslist').listview('refresh');
});
$('#Btn1').on('touchstart', function(){
$(this).css({background: 'white'});
$(this).attr('href','#MyPOPUP');
});
$('#countrieslist').on('click','li', function() {
$(this).css({background: 'blue'});
selected_elem = $(this).attr('id');
alert('you selected' + selected_elem);
$('#MyPOPUP').popup('close');
});
You have a little typo in your loop that creates the countries, but other than that the code seems to work,
Here is a working DEMO
Because pageinit is deprecated n 1.4, I have used pagecreate; and in the for loop the word country after the font tag should be within the single quotes as it is not a variable. Also, in the li click, I reset all other countries to transparent background before setting the newly selected one:
$(document).on( 'pagecreate', '#index',function(){
for(var i=1;i<=50;i++) {
$('#countrieslist').append('<li id="'+i+'"><font>Country' + i +'</font></li>');
}
$('#countrieslist').listview('refresh');
$('#Btn1').on('click', function(){
$(this).css({background: 'white'});
$(this).attr('href','#MyPOPUP');
});
$('#countrieslist').on('click','li', function() {
$('#countrieslist li').css({background: 'transparent'});
$(this).css({background: 'blue'});
selected_elem = $(this).attr('id');
alert('you selected' + selected_elem);
$('#MyPOPUP').popup('close');
});
});

How to get dynamically created data into a dialog box on listview click

I create a list view dynamically, but i have no clue on how i get the data from the selected list to appear in the dialog box. I have tried several ways but all failed. The only thing i have got going correctly is calling the dialog on click.
I want to display the whole message in the pop up dialog box
my code
<body>
<div data-role="page" id="messages">
<div data-theme="a" data-role="header">
<a data-role="button" href="index.html" data-transition="slide"
data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
Back
</a>
Refresh
<h3>
Alerts
</h3>
</div>
<div data-role="content">
<script type="text/javascript">
$(document).on("pagebeforeshow", "#messages", function() {
var uid = $.cookies.get( 'uid' );
if(uid == null){
$.mobile.changePage( "account-login.html", { transition: "slide"} );}
$(function(){
$.getJSON("ajaxResponder.php?method=messages",function(data){
var htmlString ="";
$.each(data.messages,function(index,item){
htmlString +='<li data-name='+item.msgid+'><a href="#">'+
'<h3 class="topic">'+item.subject+'</h3>' +
'<p>From: '+item.sender+'</p>' +
'<p>Date: '+item.added+'</p>' +
'<p>'+ item.message +'</p></a></li>' ;
});
$('#list').html(htmlString);
$('#list').listview('refresh');
});
});
});
</script>
<ul id="list" data-role="listview" data-theme="d"></ul>
</div>
<script>
$('#list').on('click', 'li', function() {
$.mobile.changePage("#dialog", {
role: "dialog"
});
});
</script>
</div>
<div data-role="page" data-rel="dialog" id="dialog" data-theme="c" data-close-btn="right">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>New values added!</h1>
</div>
hello
<!-- display item.message here -->
</ul>
</div>
</body>
</html>
updated
Based on your comment, to read any data of the parent element, use .closest().
Just read the text of <a> button and append it to the dialog. I used div #msg for demo purposes.
Demo
$('#list').on('click', 'li a', function () {
var text = $(this).closest('li').attr('data-name');
$('#msg').empty();
$('#msg').append(text);
$.mobile.changePage("#dialog", {
role: "dialog"
});
});

JQM 1.3 changePage 'role dialog' fails in Chrome

I need to change to a different page on start up and I want it to be a dialog.
This works in 1.2 and works with IE and FireFox in 1.3.
Chrome displays the dialog then immediately reverts to the first page.
If I remove the "role: dialog" it works with everyone. I've tried a hidden hyperlink that I force a click on ... same result. Chrome (latest version) reverts to page1.
Any ideas on how to fix this?
Here is a simplified fiddle http://jsfiddle.net/stocksp/P4ZWj/3/
div data-role="page" id="page1">
<div data-role="content">
<h6>page one content</h6>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1 class="title">My DIALOG </h1>
</div><!-- /header -->
<div data-role="content">
Dialog Content
</div>
</div>
$(document).delegate("#page1", "pageinit", function () {
$.mobile.changePage('#page2', { transition: 'pop', role: 'dialog' });
});
Quick workaround til this is fixed: wrap the changePage method in a setTimeout...
$(document).delegate("#page1", "pageinit", function () {
setTimeout(function () {
$.mobile.changePage('#page2', { transition: 'pop', role: 'dialog' });
}, 100);
});

Resources