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.
Related
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 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
I have a dialog (not external html), which is displayed when I click on a button on the page, it works fine if the html containing the dialog is the first page to be accessed , but if that file is opened by clicking on an href from another page, the dialog doesn't show up when I click the button.
Here is the code for the page containing the dialog ... The alert in the click event of the button is showing up even when this is the not the first page to be accessed, but the dialog doesn't show up.
<!DOCTYPE html>
<html>
<head>
<title>Create Team</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<!-- Page starts here -->
<div data-role="page" data-theme="b" id="page1">
<div data-role="header" id="hdrMain" name="hdrMain"
data-nobackbtn="true">
<h1>Test screen</h1>
</div>
<div data-role="content" id="contentMain" name="contentMain">
<div id="fullnamediv" data-role="fieldcontain">
<label for="fullname" id="fullnameLabel" name="fullnameLabel">Team
Name*</label> <input id="fullname" name="fullname_r" type="text" />
</div>
<div id="submitDiv" data-role="fieldcontain">
<a id="buttonSave" name="buttonSave" href="#" data-role="button"
data-inline="true">Save</a>
</div>
</div>
<!-- contentMain -->
<div data-role="footer" id="ftrMain" name="ftrMain"></div>
<script>
$("#page1").bind("pagecreate", function() {
$('#buttonSave').click(function() {
alert("aaaa");
$.mobile.changePage('#successdiv', {
transition: 'pop',
reverse: false,
changeHash: true
});
alert("after change");
return true;
});
});
</script>
</div>
<!-- page1 -->
<div data-role="dialog" data-theme="a" id="successdiv">
<div data-role="header" data-theme="f">
<h1>Error</h1>
</div>
<div data-role="content">
<p>This is Page 2</p>
<button type="submit" data-theme="e" name="successok"
value="submit-value" id="successbutton">Close Dialog</button>
</div>
</div>
<!-- Page ends here -->
</body>
</html>
You use jQuery Mobile v1.0 but at the same time you pass incorrect arguments to $.mobile.changePage like if it were say v1.0 alpha. Not sure if it solves your problem but worth trying:
$.mobile.changePage('#successdiv', {
transition: 'pop',
reverse: false,
changeHash: true
});
When I jump from one jquery mobile page to another via a hrefs, I have to set the rel attribute to external, like this:
page2
dfsq is right, only the div[data-role="page"] is loaded when you link to this page from another page. I'd suggest moving the dialog into its own html file and opening it either via
open dialog
or
$.mobile.changePage('your_dialog.htm', {role: 'dialog', transition: 'pop'});
I am very new to jquery-mobile. Could someone please help with the following problem regarding a multi-page app?
My app has two pages, split into two different files - index2_1.html and index2_2.html given below. When I use $.mobile.changePage("index2_2.html", "slide"); to change to the second page, none of the events in the second page get bound. Actually, none of the Javascript on the second page gets executed. However, if move to the second page using the link
Link to 2nd page that works1
it works fine.
Could someone please tell me what I am doing wrong here?
Thanks,
Dilip
index2_1.html
<!DOCTYPE html>
<html>
<head>
<title>Account Diary Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script>
alert("Trying to register events on page 1.");
$(function() {
$(".category_item").bind("tap", function(event) {
selected_category = $(this).text();
$("#selected_category").text(selected_category);
$.mobile.changePage("index2_2.html", "slide");
});
});
</script>
</head>
<body>
<div data-role="page" id="select_category">
<div data-role="header" data-backbtn="false">
<h1>Select Category</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-theme="g">
<li class="category_item">Grocery</li>
<li class="category_item">Car</li>
<li class="category_item">Recreation</li>
<li class="category_item">Health</li>
</ul>
<div>
Link to 2nd page that works1
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
index2_2.html
<!DOCTYPE html>
<html>
<head>
<title>Account Diary Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script>
alert("Trying to register events on page 2.");
$(function() {
$(".description_item").bind("tap", function(event) {
selected_description = $(this).text();
$("#expense_description").val(selected_description);
description = $("#expense_description").val();
$.mobile.changePage($("#enter_amount"), "slide");
});
});
</script>
</head>
<body>
<div data-role="page" id="enter_description">
<div data-role="header" data-backbtn="false">
<h1>Enter/Select Description</h1>
</div><!-- /header -->
<div data-role="content">
<label for="name">Description:</label>
<input type="text" name="expense_description" id="expense_description" value="" />
<a id="n_button" href="#" data-role="button" data-theme="b" data-inline="true" >Next</a>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Recent Expenses</li>
<li><a class="description_item" href="">Safeway</a></li>
<li><a class="description_item" href="">Gas</a></li>
<li><a class="description_item" href="">Cell phone bill</a></li>
<li><a class="description_item" href="">rent</a></li>
</ul>
<div data-role="controlgroup" data-type="horizontal">
<center>
<a class="cancel_button" href="index.html" data-role="button" rel="external">Cancel</a>
</center>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
In contrast to Pravat Maskey's answer, it's possible (and dependent on the use case also intended) to have seperate HTML files. Just imagine a huge application with lots of pages, it would be counterintuitive to load everything up front.
I think the problem you are having is the placement of the JavaScript code. I would try including the page specific code (the script tag and everything it contains) in the page section, just above the closing div of the page. For more details, take a look at this guide: http://jqx.ca/nav/, and check the section "Scripts in jQuery Mobile Pages".
By having the tag in the body, your code is executed once when the sub-page is created for the first time. For your case this should work, as you are binding an event to a DOM node, which only needs to run once.
You could also try registering your code with the pagebeforeshow event if you want to run it everytime the page is shown.