I have one template which consist of several pages (data-role="page").
Also I have data which should be generated by script. Generated data depends on page, where script launch.
How I can get page id or another unique info about it in events, connected with changing pages?
I've tried pageshow event, but I cant get where page id.
Thanks.
Here's an working example: http://jsfiddle.net/Gajotres/ecXuk/
Also take a look at my other article on similar question: https://stackoverflow.com/a/14010308/1848600
Here's a code example:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
Test button
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-theme="a" data-role="header">
Back
<h3>
Second Page
</h3>
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
And js part:
$('#index').live('pagebeforeshow',function(e,data){
alert('Index Page');
});
$("#second").live('pagebeforeshow', function () {
alert('Second Page');
});
Related
single tap produce popup appearing and beside "cancel" button I put also button for function call. I thought that's enough to put just one "close" to close popup but I needed twice in order to close it. Did I miss something or I must write it on this way in this case?
<div data-role="popup" id="popMe" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="b">
<h1 id='h1pop'>Tap PopUp</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">Single tap</h3>
<p>This is a popup...</p>
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" onclick="myfunction()">Call function</a>
Cancel
To Page 2
</div>
</div>
function myfunction() {
$("#popMe").popup("close");
$("#popMe").popup("close");
alert('Here I'm, in the function');
// ... rest of code
}
Here is a snippet which should work for you:
function myfunction() {
$("#popMe").popup("close");
console.log("Here I'm, in the function");
// ... rest of code
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="content">
PopMe
</div>
<div data-role="popup" id="popMe" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="b">
<h1 id='h1pop'>Tap PopUp</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">Single tap</h3>
<p>This is a popup...</p>
<button class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" onclick="myfunction()">myFunction</button>
Cancel
To Page 2
</div>
</div>
</div>
</body>
</html>
Please note: if you need a CDN, i would suggest you to use the jQuery Mobile libraries from code.jquery.com
Moreover:
IMHO Popups works well if you need to display small menus or text-only hints, but if you need also form elements or some complex user interaction, i believe a page widget with the dialog option it would be a better choice. Here is a reference: JQM Dialog Pages.
Just a little additional hint: to trace your function execution, try to use the console instead of window.alert, and pay attention how you are enclosing strings.
Wondering if anyone has been able to use the Dygraph in conjunction with a jquery mobile. Say I define the following page:
<html>
<head>
<title>Testing</title>
<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 src="/js/dygraph-combined.js"></script>
</head>
<body>
<div class="page" data-role="page">
<div class="header" data-role="header">
<h1>Header</h1>
</div>
<div class="ui-content" data-role="main">
<div id="graph" style="border:1px solid"></div>
</div>
<div class="footer" data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
<script type='text/javascript'>
//<![CDATA[
new Dygraph(document.getElementById("graph"), //"http://localhost:8081/twenty20/scores");
"Date,Temperature\n" +
"2008-05-07,75\n" +
"2008-05-08,70\n" +
"2008-05-09,80\n");
//]]>
</script>
The graph does not get displayed. All I see is a blank div. But if I replace the body with just
<body>
<div id="graph"></div>
</body>
This works fine.
Could it be to do with the timing of when I create my Dygraph object?
For jQuery Mobile you should use their documented page structure and the events they provide for when the page is ready:
<div data-role="page" id="page1">
<div data-role="header">
<h1>Main Page</h1>
</div>
<div role="main" class="ui-content" >
<div id="graph"></div>
</div>
</div>
Use CSS to set the graph size:
#graph { height: 300px; }
In JavaScript, it seems that pagecreate, pagebeforeshow do not work for the dygraphs, so you can use pageshow or another event that comes after the page is rendered:
var g1;
$(document).on("pageshow", "#page1", function(){
if (!g1){
g1 = new Dygraph(document.getElementById("graph"),
"Date,Temperature\n" +
"2008-05-07,75\n" +
"2008-05-08,70\n" +
"2008-05-09,80\n");
}
});
Here is a DEMO
I am new to JQueryMobile... I am trying get this sample code to open another popup from within an open popup using JQueryMobile and I am failing. The first link works, but the one within the popup does not. I am also open to suggestions on a better way I should be doing this.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery/mobile/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="jquery/jquery-2.0.3.js" ></script>
<script type="text/javascript" src="jquery/mobile/jquery.mobile-1.4.2.js" ></script>
<style>
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
height: 585px;
}
.ui-mobile, .ui-mobile .ui-page {
min-height: 585px;
}
</style>
</head>
<body>
<div data-role="page" style="max-height:590px; min-height:590px;">
main menu
<div data-role="popup" id="mainMenu" data-overlay-theme="a" data-theme="a" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Delete Page?</h1>
</div>
<div role="main" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p>
settings
<div data-role="popup" id="settingsMenu" data-overlay-theme="a" data-theme="a" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Delete Page?</h1>
</div>
<div role="main" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p>
Cancel
Delete
</div>
Cancel
Delete
</div>
</div>
</div>
</body>
</html>
Update:
Alright, I do not like the solution on the duplicate question, is there a different way I could go about doing this in JQueryMobile to do something similar, maybe just using pages but theming them as the popup?
You can open a popup within a popup is possible is Jquery mobile. Check the below one to get popup within a popup.
Open poup 1
<div data-role="popup" id="expensePopup" data-dismissible="false"> Close
<div> <div data-role="header">
<h3>popup1</h3>
</div>
Open popup 2
</div>
<div id="pagetwo" data-role="popup">
<a data-role="button" data-theme="a" data-icon="delete" class="ui-btn-left" data-iconpos="notext" onclick="closePopup();"></a>
<div data-role="header">
<h3>I'm A popup2!</h3>
</div>
<div data-role="main" class="ui-content">
<p>The dialog box is different from a normal page.</p>
</div>
</div>
<div>
function closePopup(){
$("#pagetwo").popup("close");
$("#expensePopup").popup("open");
}
See this fiddle Demo
I have an application in which i'm using jquery-mobile which has a header and it has 2 buttons "home" and "back" and when i click on back button it should terminate the page and should go back but this is not happening. Can anyone please help me how to make this possible with jquery mobile back button.
My code:
<div id="home" data-role="page">
<div data-role="header" data-position="fixed" data-add-back-btn="true">
<a id="backBtn" href="#" data-icon="arrow-l">Back</a>
<h1>SDCard Explorer</h1>
<a id="homeBtn" href="index.html" data-icon="home" data-transition="pop">Home</a>
</div>
</div>
And here are the jquery libraries which i used:
<href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<src="jquery.mobile-1.0.1.min.js" />
<src="http://code.jquery.com/jquery-1.7.1.min.js" />
Hi you can try this:
<!DOCTYPE html>
<html>
<head>
<!--here links to the jQuery Mobile Library -->
</head>
<body>
<div id="Page" data-role="page" data-theme="a">
<div data-role="header" data-position="fixed">
Back
<h1>Tite</h1>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!--here links to the jQuery Mobile Library -->
</head>
<body>
<div id="Page" data-role="page" data-theme="a">
<div data-role="header" data-position="fixed">
Back
<h1>Tite</h1>
</div>
</div>
</body>
</html>
here the function in the JS File
function GoBack(){
history.go(-1);
}
it should work in the art
I have just started looking into jquerymobile, done simple samples using jquery.mobile-1.0a1.
I have home.html, auboutus.html pages. In home page, i have a listview with a external link to aboutus.html. It is working fine, by clicking on about us link, about us page is loading with head navigation bar with "Back" button.
Now by using jquery.mobile-1.0a2, in about us page, the header navigation bar got disappeared.
Here is my sample code:
home.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Home</h1>
</div>
<div data-role="content">
<div id="banner">
<h2></h2>
</div>
<ul data-role="listview">
<li><a href="aboutus.html" >About Us</a>
</li></ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
aboutus.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>About Us</h1>
</div>
<div data-role="content">
<div id="banner">
<h2>About Us</h2>
</div>
<p>about us about us about us about us </p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
You should think about using the page design JQuery mobile prefers. You can find it here, you dont need to define different .html files, you can simple add multiple 'pages' with different id's to one html file. The refering is then simple. Check out this link: http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-navmodel.html#../../docs/pages/docs-pages.html
For your link if you want to refer to external, try this: Link