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
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.
jquerymobile panel cross page
I wanna make a same panel menu for every page.
because the panel menu is the same content for every page.
How do I do? or any suggest?
My sample code is by following
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div data-role="page" id="status">
<div data-role="header" data-theme="b">
<h1>Access Point Status</h1>
<a class="ui-btn" data-rel="back" style="background:none;">back</a>
<a class="ui-btn ui-btn-right" style="background:none;" href="#left-menu">menu</a>
</div>
<div id="left-menu" data-role="panel" data-position="left">
<a class="ui-btn" href="#status">STATUS</a>
<a class="ui-btn" href="#A">A</a>
</div>
<div data-role="content" class="ui-content" data-theme="e">
</div>
</div>
</div>
<div data-role="page" id="A">
<div data-role="header" data-theme="b">
<h1>PAGE A</h1>
<a class="ui-btn " data-rel="back" style="background:none;">back</a>
<a class="ui-btn ui-btn-right" style="background:none;" href="#left-a">menu</a>
</div>
<div id="left-a" data-role="panel" data-position="left">
<a class="ui-btn" href="#status">STATUS</a>
<a class="ui-btn" href="#A">A</a>
</div>
<div data-role="content" class="ui-content" data-theme="e">
</div>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</html>
create a panel in body tag and outside page div like following
<body>
<div data-role="panel" id="myPanel" data-display="overlay" data-position="right" data-theme="b">
<ul data-role="listview">
<li data-icon="false">
<a href="#" data-transition="pop" data-rel="close">
Home
</a>
</li>
<li data-icon="false">
Logout
</li>
</ul>
</div>
<div data-role="page" id="login">
..... page ....
</div>
.... other pages ....
</body>
then in pagecreate event of first page add this
$(document).on("pagecreate", "#firstPage", function () {
$("body>[data-role='panel']").panel().enhanceWithin(); //you can put this in document.ready but its not preferable
}
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 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');
});
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