I'm trying to create a simple widget using jQuery mobile. I have a button, and when I click on that button, I want a dialog to appear that will display a date submission form. I defined a div in my html like this:
<div data-role="dialog" id="DatePage" >
<div data-role="content">
<form>
<input type="date" name="date" />
<input type="submit"/>
</form>
</div>
</div>
Now, in order to make this dialog appear when I click a button, I've been trying to use the following line of code:
$.mobile.changePage("#DatePage");
However, when I do this, nothing happens. I've tried adding other arguments and using different variations, but nothing works. From what I've read elsewhere, and from the examples I've seen, this line should show me the dialog, but it simply doesn't. What am I doing wrong?
use this snippet
<button onClick="$.mobile.changePage('#DatePage', {transition: 'pop', role: 'dialog'});">Open Dialog</button>
to open your dialog with a button, see working example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<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/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div><!-- /header -->
<div data-role="content">
<button onClick="$.mobile.changePage('#DatePage', {transition: 'pop', role: 'dialog'});">Open Dialog</button>
</div>
</div><!-- /page -->
<div data-role="page" id="DatePage">
<div data-role="content">
<h1>My Dialog</h1>
<form>
<input type="date" name="date" />
<input type="submit"/>
<button data-rel="back">Close Dialog</button>
</form>
</div>
</div><!-- /page -->
</body>
</html>
In my final solution the dialog was triggered by the following code snippet:
$.mobile.changePage('#DatePage', {transition: 'pop'});
The problem with the dialog being shown only on the first click on the button appeared because the front page was never shown again after the dialog was shown the first time and any of the two button was clicked the dialog disappeared. The page could be seen because it was the dialog's background, but it was actually never there. In order to avoid the problem, I used the following code snippet:
<!-- The popup dialog for date selection -->
<div data-role="page" id="DatePage">
<div data-role="content">
<form id="DateSubmissionForm">
<input type="date" name="date" />
Submit
Cancel
</form>
</div>
</div>
The 'submit' and 'cancel' buttons are actually links back to the front page. With this code, the front page is really shown again and the button is again clickable.
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.
I have a mobile application which uses the multi-page template. In this application, I want to disable a select when the page is loaded and then enable it after a radio button is clicked. I've seen a strange thing: the disable/enable works (except its style) if the select is put on page 1 but it doesn't work if is put on other pages.
The following is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="mb.js" type="text/javascript" charset="utf-8" ></script>
</head>
<body>
<!-- Start of first page: #page1 -->
<div data-role="page" id="page1">
<div data-role="header">
<h1>Test </h1>
</div><!-- /header -->
<div data-role="content" >
<p>This is page One</p>
<form name="formC" id="formC" >
<label for="city">CITY: </label>
<select id="city" name="city" >
<option value="1">Sydney</option>
<option value="2">North Ryde</option>
<option value="others">Others</option>
</select>
Operations:
<input id="radioC1" name="city_type" type="radio" value="NO" >
<label for="radioC1"> 1 Disable city menu </label>
<input id="radioC2" name="city_type" type="radio" value="YES">
<label for="radioC2"> 2 Enable city menu </label>
</form>
</div><!-- /content -->
<div data-role="footer" data-theme="d">
<a data-role="button" href="#page1" > Page 1 </a>
<a data-role="button" href="#page2" > Page 2 </a>
</div><!-- /footer -->
</div><!-- /page one -->
<!-- Start of second page: #page2 -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Test</h1>
</div><!-- /header -->
<div data-role="content">
<p>This is page Two</p>
</div><!-- /content -->
<div data-role="footer">
<a data-role="button" href="#page1" > Page 1 </a>
<a data-role="button" href="#page2" > Page 2 </a>
</div><!-- /footer -->
</div><!-- /page two -->
</body>
</html>
The code of the javaScript mb.js is shown below:
$(document).ready(function(){
$("#city").prop("disabled", true);
$('input:radio[name="city_type"]').change (
function(){
if ($(this).is(':checked') && $(this).val() == 'YES') {
// alert("Click city_type, Enable");
$("#city").removeAttr('disabled');
// append goes here
} else if ($(this).is(':checked') && $(this).val() == 'NO') {
// alert("Click city_type, Disable");
$("#city").prop("disabled", true);
// append goes here
}
});
});
As seen from the code, the form which contains a select with id 'city' is put on page 1. In this case, the select is disabled at the beginning although its style still looks like enabled. I can enable/disable it by clicking the radio buttons. However after I've moved the form into page 2 from page 1, the select doesn't work! Although it is disabled at the beginning, I am not able to enable/disable it by clicking the radio buttons.
Really I don't know why. I have tried to use different versions of jquery and css but could not fix the problem. Is it a bug in jquery mobile multi-pages? Appreciated if some one can help to fix the problem.
I have had similar problems - without looking extremely close at your code, I notice that you're using $(document).ready() but you should be using:
$(document).delegate("#MyPageId", "pagebeforecreate", function () {
});
and
$(document).delegate("#MyPageId", "pageshow", function () {
})
instead. ( http://forum.jquery.com/topic/jquery-mobile-equivalent-of-document-ready )
Try moving your code into those areas and you'll have some success :)
I'm working with jQueryMobile and I want to use a form to input some values in a database.
I have a form which works and uses the test123.php to submit data to a database this:
<form method="get" action="test123.php?test=1">
<input type="submit" value="spiegel" />
</form>
I get a button, but the new page is shown as a normal page.
With this solution:
<a data-role="button" data-rel="dialog" href="#test">
spiegel
</a>
I get a dialog with the same output (i get the message "spiegel").
But I want the confirmation site to appear as a dialog.
A link with data-rel"dialog" so i want to use my php site but i want to look it like a dialog after i submitted my data do a database. I'm not sure how to do this.
Thank you for your help
<!DOCTYPE html>
<html>
<head>
<!--add all your jquery,jquery mobile as well as its CSS refrences here-->
</head>
<body>
<div data-role = "page">
<div data-role="header">
opendialogpage
</div>
<div data-role="content">
<p>just for sample display</p></div>
</div>
<div data-role="dialog" id="login">
<div data-role="header" data-theme="e"></div>
<div data-role="content">
<form id="login_form">
<fieldset>
<div data-role="fieldcontain">
<label>USER NAME:</label>
<input type="text" id="name" value=""/>
</div>
<div data-role="fieldcontain">
<label>EMAIL ID:</label>
<input type="text" id="email" value=""/></div>
</fieldset>
</form>
</div>
</div>
</body>
Okay, so you want data from your PHP page to open in the dialog and not in the next page.
What your looking for is AJAX.
AJAX allows you to refresh and change part of your HTML page without changing the entire page.
$.ajax({
url: 'test123.php',
type: 'POST',
data: {spiegel : 'spiegel'}
error : function (){ document.title='error'; },
success: function (data) {
$('#ajax_content').html(data);
}
});
So this function will return into variable data whatever was generated by test123.php
Link to Docs: http://api.jquery.com/jQuery.ajax/
I struggled with this too for a while. Finally took a look at the html that jquery mobile creates for a dialog page. Just create a page with the structure below, and it will always open as a dialog page (as though it had been opened from a link with data-rel="dialog").
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- include your css, jquery, and jquery mobile files here -->
</head>
<body>
<div data-role="dialog">
<div data-role="content">
<!-- content goes here -->
</div><!-- /content -->
</div><!-- /dialog -->
</body>
</html>
All you are doing is changing data-role="page" to data-role="dialog".
I'm building an app utilizing JQuery Mobile in which I'm showing a progress bar to indicate to the user their progress based on the steps completed.
For the progress bar I'm utilizing JQuery UI which is simple to implement
<script>
$(document).ready(function(){
var currentStep = $("#formNumber").val(); //get the the current step from form
var totalSteps = 8;
var formProgress = 0;
// determine overall form progress after step is completed
if (currentStep >1) {
formProgress = (currentStep-1)/totalSteps*100;
}
// Set progress value
$("#progressbar").progressbar({value: formProgress});
$('#percentage').text(formProgress);
});// End function
</script>
However since the pages in JQuery Mobile are loaded via Ajax the progress bar does not show. I'm guessing it's because the "#progressbar" div is empty.
if the pages loads without Ajax it will show the progress bar. Any one knows how i can solve this by allowing the progress bar to show when the page loads via Ajax
Bind to pageinit not dom ready or in this case i bind to pageshow. In a JQM ajax app dom ready only happens once on the first page. So any new content brought into the dom doesn't get the benefit of the code you wrote. Also when the second page is brought into the dom. The first page doesn't go anywhere its just hidden. Because of this using the same id in every page causes problems. Get used to using classes instead. If you need to pick something out of the current page use the .ui-page-active class to help you select the appropriate element.
Something like $('.ui-page-active .formNumber') will select the correct input for you. So here is my revised first step according to the info you gave me.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Step 1</title>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/start/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
function getProgress(){
var currentStep = $(".ui-page-active .formNumber").val(); //get the the current step from form
var totalSteps = 4;
var formProgress = 0;
// determine overall form progress after step is completed
if (currentStep >1) {
formProgress = (currentStep-1)/totalSteps*100;
}
$(".ui-page-active .progressbar").progressbar({value: formProgress});
}
$(document).on('pageshow',function(){
getProgress();
});
</script>
</head>
<body>
<div data-role="page" id="step1">
<div data-role="header">
<h1>Step 1</h1>
</div><!-- /header -->
<div data-role="content">
<input type="hidden" class="formNumber" value="1" />
<div class="progressbar"></div>
Step 2
</div><!-- /content -->
</div>
</body>
</html>
step2.html
<div data-role="page" id="step2">
<div data-role="header">
<h1>Step 2</h1>
</div><!-- /header -->
<div data-role="content">
<input type="hidden" class="formNumber" value="2" />
<div class="progressbar"></div>
Step 3
</div><!-- /content -->
</div>
step3.html
<div data-role="page" id="step3">
<div data-role="header">
<h1>Step 3</h1>
</div><!-- /header -->
<div data-role="content">
<input type="hidden" class="formNumber" value="3" />
<div class="progressbar"></div>
Step 4
</div><!-- /content -->
</div>
...... and on and so forth
If you interested I made a sample for you to look at. http://starwebservices.net/so/
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'});