I have a single .html file that looks similar to the following:
<div id="myPage" data-role="page">
<div data-role="header">
Back
<h1>My App</h1>
</div>
<div>
<input id="saveButton" type="button" value="Save" onclick="doStuff()" />
</div>
<script type="text/javascript">
function doStuff() {
var updatedText = getUpdatedText();
$("#myMessage", "#myDialog").html(updatedText);
$.mobile.changePage("#myDialog", { role: "dialog" });
}
</script>
</div>
<div id="myDialog" data-role="page">
<div id="myMessage"></div>
<input id="button1" type="button" value="Button 1" data-theme="b" onclick="someJS1();" />
<input id="button2" type="button" value="Button 2" data-theme="c" onclick="someJS2();" />
</div>
When "doStuff()" is called, I want to set a custom message in the text of my dialog and open the dialog. For some reason, I have been unable to open the myDialog. For the life of me, I cannot figure out what I'm doing wrong. I have reviewed the content posted here: http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-pages.html
I think you need to set the role of the page to dialog
<div id="myDialog" data-role="dialog">
<div id="myMessage"></div>
<input id="button1" type="button" value="Button 1" data-theme="b" onclick="someJS1();" />
<input id="button2" type="button" value="Button 2" data-theme="c" onclick="someJS2();" />
</div>
And then open the dialog with
$.mobile.changePage("#myDialog");
See Fiddle http://jsfiddle.net/kYsVp/2/
Related
I am trying to create a Login/Register dialog using Angular Material. The dialog should switch between a login page and a register page when you click the 'Switch' button.
Here is the dialog html
<md-dialog>
<md-dialog-content>
<div ng-if="lc.show_form == 'login'">
<form name="loginForm" ng-submit="loginForm.$valid && lc.login()" novalidate>
<md-input-container>
<label>Email</label>
<input type="email" name="email" required ng-model="project.email">
<div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label>Password</label>
<input type="password" name="password" required ng-model="project.password">
<div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-button ng-click="lc.login()" class="md-raised md-primary">Login</md-button>
<md-button ng-click="lc.showRegister()">Switch</md-button>
</form>
</div>
<div ng-if="lc.show_form == 'register'">
<form name="registerForm" ng-submit="registerForm.$valid && lc.register()" novalidate>
<md-input-container>
<label>Email</label>
<input type="email" name="email" required ng-model="project.email">
<div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label>Password</label>
<input type="password" name="password" required ng-model="project.password">
<div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label>Password Confirm</label>
<input type="password_confirm" name="password_confirm" required ng-model="project.password_confirm">
<div ng-messages="loginForm.password_confirm.$error" ng-if="loginForm.password_confirm.$dirty">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-button ng-click="lc.register()" class="md-raised md-primary">Register</md-button>
<md-button ng-click="lc.showLogin()">Switch</md-button>
</form>
</div>
</md-dialog-content>
</md-dialog>
here is the controller code
angular.module('dialogDemo', ['ngMaterial'])
.controller('AppCtrl', function($mdDialog, $log) {
$mdDialog.show({
controller: 'dialogCtrl',
controllerAs: 'lc',
templateUrl: 'loginDialog.tmpl.html'
});
})
.controller('dialogCtrl', function($scope, $log) {
var self = this;
self.show_form = 'login';
self.showRegister = function() {
self.show_form = 'register';
console.log('show register');
};
self.showLogin = function() {
self.show_form = 'login';
console.log('show login');
};
});
Here is a plunker of what I am trying to accomplish.
http://plnkr.co/edit/nLeJHZB9XiIiiR9fPNEe?p=preview
Click the switch button. You will notice that the content changes, but if you click the switch button a second time the dialog only resizes, If you click it a third time it switches back. I am trying to figure out why it won't switch between the two views with only one click of the button.
Your plunker is working well for me.
I press login and i get the login modal, then i press register and the modal turns into register modal. If i press login again i get login modal.
pd: I am using chrome.
Having one html file called index.html.Here I'm having one page for list view(group).Another one(pg_add-group) is for both new and edit view.
If I hit the Add button from list view,the new form opened correctly.If I select any of the product from list view,its correctly uploaded the details to the edit view.
Its done by getting date from session.Now if I again try to add product, its containing old session data in the new form.The new form should contain with empty details.Can you help me to do this ?
Here is my coding,
pg_add-group
<div id="pg_add-group" data-role="page">
<form name="frm_add-group" id="frm_add-group" action="" method="post">
<div data-role="header" data-transition="fixed">
<h1 id="add-group-header"></h1>
Back
</div>
<div data-role="main" class="ui-content" >
<div id="add_sms-group_notification" class="center-wrapper-error" data-icon="right"></div>
<label for="group_name" class="ui-hidden-accessible"></label>
<input type="text" name="group_name" id="group_name" placeholder="Enter Group Name" />
<label for="group_desc" class="ui-hidden-accessible"></label>
<textarea name="group_desc" id="group_desc" placeholder="Enter Group Decription"></textarea>
<div class="containing-element">
<label for="group_published">Published</label>
<select name="group_published" id="group_published" data-theme="b">
<option value="1" >Yes</option>
<option value="0" >No</option>
</select>
<input type="hidden" name="group_id" id="group_id" />
</div>
<div class="containing-element">
<button type="submit" name="submit" value="submit" data-theme="a" data-icon="check">Submit</button>
<button type="reset" name="reset" value="reset" data-theme="a" data-icon="delete" >Reset</button>
</div>
<div data-role="footer" data-position="fixed">
<h1 id='add-book-footer'></h1>
</div>
</form>
</div>
test.js
From he below coding
group_id is comes from the list view's selected group id.
session data ses_group contains the list of groups.
$('#pg_add-group').on('pageshow', function(event) {
var group_list = $.parseJSON(sessionStorage.getItem("ses_group"));
var group_id = sessionStorage.group_id;
$.each(group_list, function(ctr, obj) {
if(group_id == obj.groupid){
$('input[id=group_name]').val(obj.groupname);
$('textarea[id=group_desc]').val(obj.groupdesc);
$('input[id=group_id]').val(obj.groupid);
$("#group_published").val('0').slider('refresh');
}
});
$( ".input[id=group_name]" ).textinput( "refresh" );
$( ".textarea[id=group_desc]" ).textinput( "refresh" );
});
Working example: http://jsfiddle.net/Gajotres/2AVWQ/
Usage:
Take a look at provided code, every element used has a custom attribute called data-default-value, it is used to determine which element is a default one. Basically use provided code to reset any form.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<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.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<input type="button" id="clr-form-btn" value="Clear form"/>
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="Some value"/>
<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider" data-default-value="off">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1"/>
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" checked="checked" data-default-value=""/>
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
<label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-0" data-default-value="standard">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
<textarea>
asd
asd
asd
as
das
d
asdassd
</textarea>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Javascript:
$(document).on('pagebeforeshow', '#index', function(){
cleanForm();
});
function cleanForm() {
var page = $.mobile.activePage;
// Reset input elements
page.find('.ui-content *').filter("[type='text'],textarea").each(function(){
$(this).val('');
});
// Reset drop down elements
page.find('.ui-content *').filter(".ui-select").each(function(){
var select = $(this).find('select');
var defaultValue = select.attr('data-default-value');
select.val(defaultValue);
select.selectmenu('refresh', true);
});
// Reset flip switch elements
page.find('.ui-content *').filter('[data-role="slider"]').each(function(){
var flipSwitch = $(this);
var defaultValue = flipSwitch.attr('data-default-value');
flipSwitch.val(defaultValue);
flipSwitch.slider('refresh');
});
// Reset radio elements
page.find('.ui-content *').filter('fieldset:has([type="radio"])').each(function(){
var radio = $(this);
var checkedRadio = radio.find(':checked').prop("checked",false).checkboxradio("refresh");
var defaultRadio = radio.find('[data-default-value]').prop("checked",true).checkboxradio("refresh");
});
}
I am trying to use the reveal animation for my panel. However, when jQuery Mobile runs the animation, the header does not slide over as far as the panel does so the header slightly overlaps the panel. See the image here: http://i.imgur.com/fjuDSRe.png
Here's my code:
<div data-role="page" id="taskdetailspage">
<div data-role="header" data-id="navbar" data-position="fixed" data-tap-toggle="false">
Back
<p class="title">Field Service Engineer</p>
Actions
</div>
<div id="taskholder" data-role="content">
</div>
<div data-role="content" id="directionsholder"></div>
<div data-role="panel" data-theme="a" id="taskdetailspanel" data-position="right" data-display="reveal"
data-position-fixed="true">
<h3>Actions</h3>
<ul data-role="listview" data-theme="a">
<li>Update Task Status</li>
<li><a id="directionsButton" href="#">Get Directions</a></li>
<li>Decline Task</li>
</ul>
</div>
<div id="updateStatusPopup" data-role="popup" data-theme="a" data-overlay-theme="a"
data-transition="fade" data-position-to="window">
<div data-role="header">
<h3>Update Task Status</h3>
</div>
<div data-role="content">
<form action="javascript: updateTaskStatus(currentTaskId);">
<fieldset data-role="controlgroup">
<legend>Current Status:</legend>
<input data-theme='a' name="updateStatus" id="arrived" value="Arrived" checked="checked" type="radio">
<label for="arrived">Arrived</label>
<input data-theme='a' name="updateStatus" id="wip" value="Work in Progress" type="radio">
<label for="wip">Work in Progress</label>
<input data-theme='a' name="updateStatus" id="completed" value="Complete" type="radio">
<label for="completed">Complete</label>
</fieldset>
<label for="statusNotes">Status Notes:</label>
<input name="statusNotes" id="statusNotes" value="" type="text">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><input type="submit" value="Update" data-theme='a' id='confirmUpdateButton'></div>
<div class="ui-block-b"><a data-theme='a' data-role='button' data-rel='back'>Cancel</a></div>
</fieldset>
</form>
</div>
</div>
<div id="dialogcontent" data-role="popup" data-theme="a" data-overlay-theme="a"
data-transition="fade" data-position-to="window">
<div data-role="header">
<h3>Confirm Decline Task</h3>
</div>
<p>Are you sure you want to decline this task and remove it from your calendar?</p>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><a data-theme='a' href='#' id='confirmDeclineButton' data-role='button'>Decline</a> </div>
<div class="ui-block-b"><a data-theme='a' href='#' data-role='button' data-rel='back'>Cancel</a></div>
</fieldset>
</div>
I found one other question on SO with a similar description but the solution was unintelligible.
Thanks in advance!
This question already has an answer here:
How to handle them jump out(while keyboard open) in query mobile?
(1 answer)
Closed 9 years ago.
I am using jqm .Actually I open the pop up screen on button click .I am facing a problem my them goes up while entering the text.Here is my code..
http://jsfiddle.net/ravi1989/7JqRG/
<div data-role="page" id="Home" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
<div class="ui-btn-right" id="headerButtons" data-role="controlgroup" data-type="horizontal">
Setting
Add
Edit
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="folderData" >
</ul>
<!-- **************Case Information Pop up Start*******************-->
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" >
Cancel
<h1>Case Information</h1>
Add
</div>
<div data-role="content">
<div><img src="img/Documents.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="text-12" value="" type="text" class="caseName_h" autocorrect="off">
</div>
<div data-role="fieldcontain">
<label for="caseDate" style="text-align:left;margin-left: 0px;" >Case Date:</label>
<input name="caseDate" id="caseDate" value="" type="date" class="caseDate_h" >
<!--input name="mydate2" id="mydate2" type="date" data-role="datebox" class="caseDate_h" data-options='{"mode": "calbox","useNewStyle":true,"zindex":1200}'/-->
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Case Notes :</label>
<textarea cols="40" rows="8" name="textarea-12" id="text-12" class="caseTextArea_h" autocorrect="off"></textarea>
</div>
</div>
</div>
Please + button on header .Pop up open fill the text black them goes up?
Here is your answer..
window.resize due to virtual keyboard causes issues with jquery mobile
1) Go into jquery.mobile-1.x.x.js
2) Find $.mobile = $.extend() and add the following attributes:
last_width: null,
last_height: null,
3) Modify getScreenHeight to work as follows:
getScreenHeight: function() {
// Native innerHeight returns more accurate value for this across platforms,
// jQuery version is here as a normalized fallback for platforms like Symbian
if (this.last_width == null || this.last_height == null || this.last_width != $( window ).width())
{
this.last_height = window.innerHeight || $( window ).height();
this.last_width = $(window).width();
}
return this.last_height;
}
I'm building my first JQM site so I think I'm missing some simple little thing that's causing me a bunch of problems.
I have setup the page, header, content and footer and a panel for the menu. Then I have I have a js file with the following:
$(document).on('pageinit', function (event) {
alert('this works every time you navigate to another page');
$("#menu-panel").panel("open");//this works the first time only
$("#new-lump-sum").popup("open");//this never works
});
Can anyone tell me why I'm getting this behaviour instead of both the panel and the popup opening every time you navigate to another page?
I also can't open them programmatically from the browser console (using chrome)
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cashflow - IFA Portal</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/Styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link href="/Styles/System.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/jquery.mobile-1.3.1.min.js"></script>
<script src="/Scripts/highcharts.js"></script>
<script src="/Scripts/System.js"></script>
</head>
<body class="computer android">
<div id="page-wrapper">
<div data-role="page" class="page ui-responsive-panel"><!-- Start Page -->
<div data-role="panel" id="menu-panel" data-position="left" data-display="reveal" data-theme="a" data-dismissible="false" class="">
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search Items..." data-theme="a" data-filter-theme="a">
<li><img src="/Images/Icons/home.png" alt="" class="ui-li-icon"/>Home</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Tools</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Cashflow</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Clients</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Proposals</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Funds</li>
</ul>
</div>
<div id="header" data-role="header" data-theme="d">
<div id="top-border"></div>
<div class="floatleft">
</div>
<div id="logo">
<img src="/Images/AllanGray-Logo.png" />
</div>
<div class="floatleft header-toolbar" data-role="controlgroup" data-type="horizontal">
Favourites
<img src="/Images/Icons/179-notepad.png" class="ui-li-icon small-icon" />Notes
Display Settings
</div>
<div id="logout">
<section id="login">
Log In
</section>
</div>
<div id="display-options" data-role="popup" class="ui-content">
Close
<form>
<fieldset id="theme-options" data-role="controlgroup" data-mini="true" data-type="horizontal">
<legend>Theme</legend>
<input type="radio" name="theme" id="theme-1" value="android" checked="checked" />
<label for="theme-1" class="theme-option">Android</label>
<input type="radio" name="theme" id="theme-2" value="apple" />
<label for="theme-2" class="theme-option">Apple</label>
<input type="radio" name="theme" id="theme-3" value="windows" />
<label for="theme-3" class="theme-option">Windows</label>
</fieldset>
<br />
<fieldset id="size-options" data-role="controlgroup" data-mini="true" data-type="horizontal">
<legend>Screen Size</legend>
<input type="radio" name="size" id="size-1" value="computer" checked="checked" />
<label for="size-1" class="size-option">Computer</label>
<input type="radio" name="size" id="size-2" value="tablet" />
<label for="size-2" class="size-option">Tablet</label>
<input type="radio" name="size" id="size-3" value="phone" />
<label for="size-3" class="size-option">Phone</label>
</fieldset>
</form>
</div>
</div>
<div id="content" data-role="content">
<h2>Cashflow Calculator</h2>
<div class="ui-grid-a">
<div class="ui-block-a" style="padding-right:5px;">
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Investment Assumptions</h3>
<div data-role="fieldcontain" class="narrow">
<label for="time">Time horizon (years)</label>
<input type="range" name="time" id="time" value="20" min="0" max="100" data-highlight="true" style="width"/>
<label for="nominal">Nominal return after unit trust fees (%)</label>
<input type="text" name="nominal" id="nominal" value="" />
<label for="inflation">Inflation rate p.a. (%)</label>
<input type="text" name="inflation" id="inflation" value="" />
<label for="administration-fees">Net platform administration fees (%)</label>
<input type="text" name="administration-fees" id="administration-fees" value="" />
<label for="advisor-fees">Financial advisor fees (%)</label>
<input type="text" name="advisor-fees" id="advisor-fees" value="" />
</div>
</div>
Add Contributions or Withdrawals
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Contributions & Withdrawals </h3>
<ul id="lump-sums" data-role="listview" data-split-icon="delete" data-split-theme="d">
<li>
<a>
<h3>Contribution: R20 000</h3>
<p class="topic"><strong>Recurres: 6 times</strong></p>
<p class="ui-li-aside"><strong>Start Date: 01/08/2013</strong></p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Contribution: R5000</h3>
<p class="ui-li-aside"><strong>Start Date: 01/06/2013</strong></p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Withdrawal: -R25 000</h3>
<p class="ui-li-aside"><strong>Start Date: 01/06/2013</strong></p>
</a>
Delete
</li>
</ul>
</div>
<div data-role="popup" id="new-lump-sum" class="ui-content">
Close
<form>
<fieldset id="lump-sum-type" data-role="controlgroup" data-type="horizontal">
<legend>Add New</legend>
<input type="radio" name="lump-sum-type" id="contribution" value="contribution" checked="checked" />
<label for="contribution" class="">Contribution</label>
<input type="radio" name="lump-sum-type" id="withdrawal" value="withdrawal" />
<label for="withdrawal" class="">Withdrawal</label>
</fieldset>
<label for="lump-sum-amount">Amount (R)</label>
<input type="text" name="lump-sum-amount" id="lump-sum-amount" value="" />
<label for="lump-sum-date">Date</label>
<input type="text" name="lump-sum-date" id="lump-sum-date" value="" />
<a data-role="button" data-theme="b" onclick="addLumpSum()">Add</a>
</form>
</div>
</div>
<div class="ui-block-b" style="padding-left:5px;">
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Future Value Graph</h3>
<div id="container" style="width:100%; height:400px;">fgjfjfgjh</div>
<script type="text/javascript">
</script>
</div>
</div>
</div>
</div>
<div id="footer" data-role="footer">
<div id="bottom-border"></div>
<p>Copyright © 2013 Allan Gray. All Rights Reserved.</p>
</div>
<div data-role="panel" id="right-panel" data-position="right" data-display="overlay" data-theme="b">
<h3>Favourites</h3>
<div id="search-box">
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" placeholder="Search..." />
</div>
</div>
<script>
</script>
</div><!-- End Page -->
</div>
</body>
</html>
Popups and dialogs are tricky when it comes to opening them right after a page event occurs. To fix this issue, you need to use setTimeout to open a dialog or a popup.
$(document).on('pageinit', function() {
setTimeout(function () {
$('#new-lump-sum').popup('open');
}, 100); // delay above zero
});