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".
Related
I'm developing a mobile app using PhoneGap & jQuery Mobile. I'd like to keep my view files DRY. How do I achieve this in jQuery Mobile? Should I just put every page element in one HTML file?
Exactly, jQuery mobile is designed for that and I is the best approach to be followed.
you can have something like that:
<html>
<head>
<script src="jquerymobilelibrary.js"/>
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="a" data-role="header"><h3>Header</h3></div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textinput2">Title</label>
<input name="" id="textinput2" placeholder="" value="" type="text">
</div>
<a data-role="button" href="#page2">Button</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-theme="a" data-role="header"><h3>Header</h3></div>
<div data-role="content">
<!-- Content is empty -->
</div>
</div>
</body>
</html>
To switch between pages programmatically in JS you can use
<script>
$.mobile.changePage('#page2')
</script>
In jquery mobile site there is a simple but cool drag-and-drop UI builder to explore what the JQM library can do.
Hope it helps!
For app based on AngularJS, JQuery Mobile and JQuery Mobile Angular Adapter.
When i set ng-controller on tag with data-role="page", ng-model on select tag works perfectly:
<body ng-app>
<div data-role="page" id="product" ng-controller="Controller">
<div data-role="content">
<select ng-model="color" ng-options="c for c in colors"></select>
<button ng-click="Print()">print</button>
http://jsfiddle.net/ilya7u/Ddt7G/
When ng-controller present in body tag, variable associated with select tag through ng-model remains unchanged:
<body ng-app ng-controller="Controller">
<div data-role="page" id="product">
<div data-role="content">
<select ng-model="color" ng-options="c for c in colors"></select>
http://jsfiddle.net/ilya7u/qgbj2/
Why and how i can fix it? I want to use one controller in app with many pages!
including the ng-app in the html of your page will solve the problem
try
<html ng-app="myModule">
<body ng-controller="Controller">
<div id="product" >
<div data-role="content">
<select ng-model="color" ng-options="c for c in colors"></select>
<button ng-click="Print()">print</button>
</div>
</div>
</body>
</html>
and change the controller to
var myApp = angular.module('myModule',[]);
myApp.controller('Controller', function($scope) {
$scope.colors = ['red', 'black', 'white'];
$scope.color = $scope.colors[0];
$scope.Print = function () {
alert($scope.color);
};
});
updated fiddle here http://jsfiddle.net/qgbj2/2/
So it looks like there are really two scopes here. The page has its own scope, but the Print is in the parent scope. I've updated the fiddle to show that the color does indeed change, but the $scope.color in Print does not: http://jsfiddle.net/qgbj2/6/
To remedy this particular situation, I would pass in the color to Print from the DOM:
<body ng-app ng-controller="Controller">
<div data-role="page" id="product">
<div data-role="content">
<select ng-model="color" ng-options="c for c in colors"></select>
<button ng-click="Print(color)">print</button>
</div>
</div>
</body>
A general solution for this multiple scope situation does not occur to me at the moment.
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.
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'});