After changePage tabs is not working - jquery-mobile

I am new for jquery mobile. I got two pages which are page1.html and page2.html. page1 will navigate to page2 and inside page2 got a navbar.
Here is my code
page1.html navigate to page2
$.mobile.pageContainer.pagecontainer("change", "page2.html", {
allowSamePageTransition: true,
transition: 'none',
showLoadMsg: false,
reloadPage: false,
changeHash: true
})
page2.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>collapsible demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div data-role="content" class="ui-content">
<div data-role="tabs">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div id="fragment-1">
<p>This is the content of the tab 'One', with the id fragment-1.</p>
</div>
<div id="fragment-2">
<p>This is the content of the tab 'Two', with the id fragment-2.</p>
</div>
<div id="fragment-3">
<p>This is the content of the tab 'Three', with the id fragment-3.</p>
</div>
</div>
</div>
</div>
</body>
</html>
It can be work if i run page2 individually. But problem come once i change page from page1 to page2. please dont reply me add rel="external" It may cause white screen issue once i using rel="external"


This is a known jQuery Mobile 1.4 bug, it will be fixed in jQuery Mobile 1.4.3 version.
Read more about it here: https://github.com/jquery/jquery-mobile/issues/7169
There you will also find a workaround.
There's one other solution, it requires you to dynamically create tab widget, something like this:
$(document).on("pagecreate", "#p2", function () {
var tabs = '<div data-role="tabs" id="tbPaymentMethod"><div data-role="navbar"><ul><li>Tab 1</li><li>Tab 2</li><li>Tab 3</li></ul></div><div id="tabCash"><p>This is the content of the tabwith the id fragment-1.</p></div><div id="tabCcard"><p>This is the content of the tabwith the id fragment-2.</p></div><div id="tabCheck"><p>This is the content of the tabwith the id fragment-3.</p></div></div>';
$("#p2 .ui-content").append(tabs).enhanceWithin();
});
Working example: http://jsfiddle.net/Gajotres/JAuwV/

Related

Anchor back to the main page changes this main page into a dialog

I have two pages: Page A and Page B, built with jquery mobile. On Page A, I have a popup dialog, in which there is a menu option displaying Page B when I click on it. On Page B there is a back button leading me back to Page A when I click on it.
Here is my problem. If the users of my app decide for some reason to reload Page B and then push the back button on Page B after reloading it, the page A will change its appearance from full screen into a dialog view. I realized that this strange behavior only occurs, a) after reloading Page B and b) when calling Page B from a popup menu on Page A, as described above.
Is there a way to tell jquery mobile not to change the appearance of Page A, no matter whether or not Page B gets reloaded? Of course, as I mentioned above, calling Page B directly (and not through a popup menu) would also solve my problem, but I would like to keep my popup menu on Page A and I'm looking for a better solution.
Here is my code causing this problem:
Page A:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h2>Page A</h2>
</div>
<div data-role="content">
<a href='#popupMenu' data-rel='popup' data-transition='slideup' class='ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a'>Menu</a>
</div>
<div data-role='popup' id='popupMenu' data-theme='b'>
<ul data-role='listview' id='listview' data-inset='true' style='min-width:210px;'>
<li data-role='list-divider'>Choose an action</li>
<li><a href='pageb.html' data-rel='page'>Page B</a></li>
</ul>
</div>
</div>
</body>
</html>
Page B:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Page B</h2>
</div>
<div data-role="content">
Back
</div>
</div>
</body>
</html>

You should add data-history="false" to your popup, like this:
<div data-role='popup' id='popupMenu' data-history="false" data-theme='b'>
<ul data-role='listview' id='listview' data-inset='true' style='min-width:210px;'>
<li data-role='list-divider'>Choose an action</li>
<li><a href='pageb.html' data-rel='page'>Page B</a></li>
</ul>
</div>
This will prevent JQM to add the Popup to the history stack.

Slide page transition

I am trying to apply a slide transition between divs with Jquery Mobile.
I have the below HTML structure:
// More content ... No jQuery Mobile needs
<div data-role="page">
Go to #1.
Go to #2.
</div>
<div id="p1" data-role="page">
<div data-role="main">I am P 1</div>
</div>
<div id="p2" data-role="page">
<div data-role="main">I am P 2</div>
</div>
I copied the structure from a W3School demo. But doesn't work for me.
In first place, #p1 and #p2 hace display:block. And when i click the links the content doesn't change.
Any ideas ?

Have you included jQuery and jQueryMobile correctly.Your code is working
as follows.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
Go to #1.
Go to #2.
</div>
<div id="p1" data-role="page">
<div data-role="main">I am P 1</div>
</div>
<div id="p2" data-role="page">
<div data-role="main">I am P 2</div>
</div>
</body>
</html>

Jquery mobile show chart in child a page

I want to display rgraph bar chart on second page of my multipage Jquery Mobile App. Here is the structure of my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile- 1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script>
<script type="text/javascript" src="rgraph/libraries/RGraph.common.core.js"></script>
<script type="text/javascript" src="rgraph/libraries/RGraph.bar.js"></script>
<script src="rgraph/libraries/RGraph.gauge.js"></script>
<script src="rgraph/libraries/RGraph.cornergauge.js"></script>
<script src="rgraph/libraries/RGraph.common.dynamic.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>Welcome! If you click on the link below, it will take you to Page Two.</p>
Go to Page Two
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
// My chart should come here
<canvas id="cvs" width="500" height="250">[No canvas support]</canvas>
<script>
$(document).ready(function ()
{
var data = [[4,5,3],[4,8,6],[4,2,4],[4,2,3],[1,2,3],[8,8,4],[4,8,6]];
var bar = new RGraph.Bar('cvs', data)
.set('labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'])
.set('labels.above', true)
.set('colors', ['red','yellow', 'pink'])
.set('bevel', !RGraph.ISOLD)
.set('grouping', 'stacked')
.set('strokestyle', 'rgba(0,0,0,0)')
.draw();
})
</script>
Go to Page One
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
But chart is showing on the first page (main page).Is Jquery mobile Document.ready function is working for child pages?if not what should i change to make this working..please help

For jQuery Mobile, don't use $(document).ready(function ().... Instead use the provided page and/or pagecontainer events. For your example you could put the script at the bottom of the html (outside all page markup) and inside a pagecreate event for pagetwo:
$(document).on("pagecreate", "#pagetwo", function(){
var data = [[4,5,3],[4,8,6],[4,2,4],[4,2,3],[1,2,3],[8,8,4],[4,8,6]];
var bar = new RGraph.Bar('cvs', data)
.set('labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'])
.set('labels.above', true)
.set('colors', ['red','yellow', 'pink'])
.set('bevel', !RGraph.ISOLD)
.set('grouping', 'stacked')
.set('strokestyle', 'rgba(0,0,0,0)')
.draw();
});
Here is a working DEMO

Page transitions in default mode in jquery mobile

I am trying to execute a simple jquery mobile code. I just linked two pages. But everytime I am switching from one page to another, it is happening in default mode.Even after mentioning data-transition = 'pop'..
<!DOCTYPE html>
<html>
<head>
<title>This is my first jquery mobile programme</title>
<meta name="viewport" content="width=device-width, initialscale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role = "page" id="first">
<div data-role = "header" >
<h1>hello world !!</h1>
</div>
<div data-role = "content">
<p>This is the content part</p>
<p><a href ="#second" data-tansition = "pop" > Go to second page </a></p>
</div>
<div data-role ="footer">
<h4>Footer</h4>
</div>
</div>
<div data-role = "page" id="second">
<div data-role ="header">
<h1>hello Praveen !!</h1>
</div>
<div data-role ="content">
<p> this is the second page</p>
<p><a href =#first> Go to first page </a></p>
</div>
<div data-role = "footer">
<h4>footer</h4>
</div>
</div>

You simply have a typo in your markup.
Change
data-tansition="pop"
to
data-transition="pop"

Exclude header and footer from popup overlay

I would like my header and footer to be accessible when a page has an overlay due to a popup menu (as seen on http://jquerymobile.com/branches/popup-widget/docs/pages/popup/index.html).
So in a nutshell, only the div with attribute 'data-role=content"' should have the overlay applied.
If possible, this should be achieved using a minimum of extra CSS and/or JavaScript. I've looked through the entire jQuery Mobile docs, but haven't found any reference to my problem.
Some code:
<!DOCTYPE html>
<html>
<head>
<title>Context Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jquerymobile.com/test/js/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Header</h1>
</div>
<div data-role="content">
Menu
<div data-role="popup" id="popupMenu" data-overlay-theme="b">
<ul data-role="listview" data-inset="true" style="width: 200px">
<li>Add</li>
<li>Edit</li>
<li>Manage</li>
<li>Delete</li>
</ul>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
So in this exmaple, the header and footer shouldn't be overlayed when the Menu link is clicked.

The z-index css property allows you to set the way the different "layers" of your page are superposed. A fixed header in jquery mobile has a z-index of 1000.
By setting the z-index of your overlay to a value below 1000, it will be displayed "under" the header.

Resources