Not able to open panel or popup programatically in jQuery Mobile - jquery-mobile

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
});

Related

Handling sessions for the new/edit process in jquery mobile

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");
});
}

keyboard block textbox jquery mobile

Hi i am new for jquery mobile.I am developed a mobile app which use together with jquery mobile and phonegap i facing a problem nw. When keyboard is popup , it block my textbox. Please c my code below
phonegap AndroidManifest.xml
<activity
android:name="com.example.smartrealtor.MainActivity"
android:label="SmartRealtor"
android:windowSoftInputMode="adjustPan"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
android:hardwareAccelerated="true"
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
Jquery mobile.html
<!-- Tab 1 -->
<div id="nPersonal">
<!-- POP UP-->
<div data-role="popup" id="popupGallery" data-overlay-theme="b" style="background-color:white">
<p class="note2">Choose to take photo with camera or take picture from gallery</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#" class="ui-btn-transparent ui-btn-icon-top ui-icon-takephoto ui-nodisc-icon" id="cameraBtn">
<br>
<br>
Take Photo<br>
</a>
</div>
<div class="ui-block-b">
<a href="#" class="ui-btn-transparent ui-btn-icon-top ui-icon-opengallery ui-nodisc-icon" id="galleryBtn">
<br>
<br>
Open Gallery<br>
</a>
</div>
</div>
</div>
<div data-role="popup" id="popupPhotoPortrait" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15">
Close<img id="imgLarge" alt="Photo portrait">
</div>
<!-- /POP UP-->
<div data-role="popup" id="popupSave" data-overlay-theme="b" style="width: 250px; height: 150px; align-content: center;">
<div data-role="header">
<h1>Record</h1>
</div>
<p class="note">Are you confirm to save?</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a">Cancel</a>
</div>
<div class="ui-block-b">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" id="btnSave" data-transition="none">Confirm</a>
</div>
</div>
</div>
<!-- /POP UP-->
<!-- Agent Detail -->
<div class="ui-grid-a loan">
<ul data-role="none" data-inset="true" class="login_from transparentForm">
<strong>Contact Information</strong>
<div style="text-align: center; display: block; width: 100%; height: 120px; border-bottom: 1px solid #dbdbdb">
<span style="font-size: 12px; text-align: center; color:#fff">Take Picture</span>
<div class="file-upload">
<img id="imgContactPic" style="width: 100px; height: 100px" />
</div>
</div>
<li>
<label>Name </label>
<span>
<input type="text" name="customername" id="txtCustomerName" data-role="none" required />
</span>
</li>
<li>
<label>Contact No. </label>
<span>
<input type="number" name="customerhpcontact" id="txtCustomerHPcontact" data-role="none" required>
</span>
</li>
<li>
<label>Date of birth </label>
<span>
<input type="date" data-role="none" id="txtDOB">
</span>
</li>
<li>
<label>Email</label>
<span>
<input type="email" name="customeremail" id="txtCustomerEmail" data-role="none">
</span>
</li>
<li>
<label>Address</label>
<span>
<input type="text" name="txtAddress" id="txtAddress" data-role="none">
</span>
</li>
<li>
<label>Occupation</label>
<span>
<input type="text" name="customeroccupation" id="txtCustomerOccupation" data-role="none">
</span>
</li>
<li>
<label>Category</label>
<span>
<div class="ui-field-contain">
<select name="select-native-1" id="ddlCategory" data-role="none" class="infoSelect" required>
<option value>Select Categories</option>
<option value="B">Buyer</option>
<option value="T">Tenant</option>
<option value="S">Seller</option>
<option value="I">Investor</option>
</select>
</div>
</span>
</li>
</ul>
</div>
<!-- /Agent Detail -->
</div>
<!-- /Tab 1 -->
</form>
</div>
I also try setting android:windowSoftInputMode="adjustResize" but, the adjustresize break my page css. My page, header and footer will jumping , once the keyboard appear
Please help. thanks

Panels and fixed-position header/footer

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!

Centering the text in the input field in jQueryMobile on iPhone

So, if you take a look at the jsfiddle (I posted the code below for consistency) you will see that the input text is centered. However, if I visit the jsfiddle (and on my testing site) on my iPhone (iOS5) the text is just left-aligned. So, am wondering do you guys maybe know is this a know issue (googled - seems not) and do you know of a workaround.
css:
.centerText{
text-align: center;
}​
js:
$(document).ready(function(){
$( "#popupLogin" ).popup( "open" );
});​
html:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<section id="home" data-role="page">
<header data-role="header">
<h1>test page</h1>
</header>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<h3 class="centerText">Register free!</h3>
<div class="popup">
<form>
<input type="email" name="email" id="email" class="centerText" placeholder="email" data-theme="a"/>
<button type="submit" data-theme="b">Sign me up</button>
<p class="centerText">
text1<br/>
text2<br/>
etc...<br/>
</p>
</form>
</div>
</div>
</section>
</body>
</html>

Here some tinkering from your jsFiddle: http://jsfiddle.net/Twisty/jb8Jx/2/ Just shows you some ways to try and move the placeholder about.
HTML
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<section id="home" data-role="page">
<header data-role="header">
<h1>test page</h1>
</header>
<div data-role="content">
<label>Left Align</label><input type="text" placeholder="email" class="leftText">
<label>Right Align</label><input type="text" placeholder="email" class="rightText">
<label>Center Text</label><input type="text" placeholder="email" class="centerText">
<label>Pad Left</label><input type="text" placeholder="email" class="leftPadText">
</div>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<h3 class="centerText">Register free!</h3>
<div class="popup">
<form>
<input type="email" name="email" id="email" class="centerText" placeholder="email" data-theme="a" style="text-align: center;"/>
<button type="submit" data-theme="b">Sign me up</button>
<p class="centerText">
text1<br/>
text2<br/>
etc...<br/>
</p>
</form>
</div>
</div>
</section>
</body>
</html>
CSS
input.centerText{
text-align: center;
}
input.leftText {
text-align: left;
}
input.rightText {
text-align: right;
}
input.leftPadText {
padding-left: 220px;
}

Programmatically Open a Dialog in JQuery Mobile

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/

Resources