Develop Reference

Keyboard opening on click outside popup in Ionic App

When i open a "popover" , it displays an input window.
After opening, clicking anywhere on the screen causes the keyboard to open:
Keyboard opened when i clicked outside the popover element.
PopOver Component Html
<ion-content>
<ion-icon class="close" name="close-sharp" (click)="closePopUp()"></ion-icon>
<p>{{title}}</p>
<!-- <ion-icon name="information-circle-outline" (click)="LoadInfoPopUp()"></ion-icon> -->
<div class="wrap-input" *ngIf="inputs?.weight">
<input class="input" [(ngModel)]="inputValues.weight" type="number" name="weight" placeholder="Enter Body Weight (Kg)">
</div>
<div class="wrap-input" *ngIf="inputs?.height">
<input class="input" [(ngModel)]="inputValues.height" type="number" name="height" placeholder="Enter Height (cm)">
</div>
<div class="wrap-input" *ngIf="inputs?.age">
<input class="input" [(ngModel)]="inputValues.age" type="number" name="age" placeholder="Enter Age">
</div>
<div class="radio-button" *ngIf="inputs?.gender">
<label class="custom-radio-btn">
<input type="radio" name="gender" [(ngModel)]="inputValues.gender" value="Male">
<span class="checkmark"></span>
</label>
<label> Male </label>
<label class="custom-radio-btn" *ngIf="inputs?.gender">
<input type="radio" name="gender" [(ngModel)]="inputValues.gender" value="Female">
<span class="checkmark"></span>
</label>
<label> Female </label>
</div>
<div class="wrap-input" *ngIf="inputs?.fatPercent">
<input class="input" type="number" name="fatpercent" [(ngModel)]="inputValues.fatPercent" placeholder="Enter Estimated Fat % ">
</div>
<div class="wrap-input" *ngIf="inputs?.neck">
<input class="input" type="number" name="neck" [(ngModel)]="inputValues.neck" placeholder="Enter Neck (cm) ">
</div>
<div class="wrap-input" *ngIf="inputs?.waist">
<input class="input" type="number" name="waist" [(ngModel)]="inputValues.waist" placeholder="Enter Waist (cm)">
</div>
<div class="wrap-input" *ngIf="inputs?.hip">
<input class="input" type="number" name="hip" [(ngModel)]="inputValues.hip" placeholder="Enter hip (cm)">
</div>
<div class="wrap-input" *ngIf="inputs?.shoulder">
<input class="input" type="number" name="shoulder" [(ngModel)]="inputValues.shoulder" placeholder="Enter Shoulder (inches)">
</div>
<div class="drop-down" *ngIf="inputs?.workoutDays">
<label>Select Workout Days/Week</label>
<select class="box" ngDefaultControl [(ngModel)]="inputValues.workoutDays" name="workoutDays">
<option *ngFor="let item of workdayList" [ngValue]="item.value">{{item.name}}</option>
</select>
</div>
<div class="drop-down" *ngIf="inputs?.activity">
<label>Select How Active You Are</label>
<select class="box" ngDefaultControl [(ngModel)]="inputValues.activity" name="activity">
<option *ngFor="let item of activityList" [ngValue]="item.value">{{item.name}}</option>
</select>
</div>
<div class="drop-down" *ngIf="inputs?.weightLossRate">
<label>Rate Of Weight Loss %</label>
<SELECT class="box" ngDefaultControl [(ngModel)]="inputValues.weightLossRate" name="weightLossRate">
<option *ngFor="let value of weightMeter" [ngValue]="value">{{value}}</option>
</SELECT>
</div>
<div class="drop-down" *ngIf="inputs?.weightGainRate">
<label>Rate Of Weight Gain %</label>
<SELECT class="box" ngDefaultControl [(ngModel)]="inputValues.weightGainRate" name="weightGainRate">
<option *ngFor="let value of weightMeter" [ngValue]="value">{{value}}</option>
</SELECT>
</div>
<div class="wrap-input" *ngIf="inputs?.steps">
<input class="input" type="number" name="step" [(ngModel)]="inputValues.steps" placeholder="Enter Steps Walked">
</div>
<div class="radio-button" *ngIf="inputs?.body">
<label class="custom-radio-btn">
<input type="radio" name="body" value="Upper Body" [(ngModel)]="inputValues.body">
<span class="checkmark"></span>
</label>
<label> Upper Body </label>
<label class="custom-radio-btn" *ngIf="inputs?.gender">
<input type="radio" name="body" value="Lower Body" [(ngModel)]="inputValues.body">
<span class="checkmark"></span>
</label>
<label> Lower Body </label>
</div>
<div class="wrap-input" *ngIf="inputs?.weightLifted">
<input class="input" type="number" name="weightLifted" [(ngModel)]="inputValues.weightLifted" placeholder="Weight Lifted For 2-5">
</div>
<div class="wrap-input" *ngIf="inputs?.duration">
<input class="input" type="number" name="duration" [(ngModel)]="inputValues.duration" placeholder="Enter Duration (min)">
</div>
<div class="radio-button" *ngIf="inputs?.intensity">
<label class="custom-radio-btn">
<input type="radio" [(ngModel)]="inputValues.intensity" value="Low" name="intensity">
<span class="checkmark"></span>
</label>
<label> Low </label>
<label class="custom-radio-btn" >
<input type="radio" [(ngModel)]="inputValues.intensity" value="Moderate" name="intensity">
<span class="checkmark"></span>
</label>
<label> Moderate </label>
<label class="custom-radio-btn" >
<input type="radio" [(ngModel)]="inputValues.intensity" value="High" name="intensity">
<span class="checkmark"></span>
</label>
<label> High </label>
</div>
<ion-button id="Calculate" (click)="calculateResult()">Calculate</ion-button>
<hr>
<p *ngIf="result">{{result}}</p>
</ion-content>
Caller Method:
openToolWindow(tool) {
let clickedTool = this.toolDictionary[tool]
this.popCrtl.create(
{ component: InputWindowComponent,
showBackdrop:false,
componentProps: {'toolName':clickedTool.toolName, 'inputs':clickedTool.inputs},
cssClass: 'custom-popover',
backdropDismiss: false
}
).then((element) => {
element.present();
})
}
CSS associated with it:
.custom-popover .popover-content {
width: 80%;
}
Can someone please suggest a way? i already tried :
if (document.activeElement === document.body) {
this.keyboard.Hide()
}
But the event Listerner method is never called.
Can anyone suggest any solutions?

HTML Bootstrap Submit button not working on android devices

I have a web app that's doing a mailto action on a click action. It seems to work on all platforms, except for android in chrome. It even works in the developer console (desktop) with android devices. The button is clickable, but no actions occur on android devices. Thoughts? Thanks!
<form role="form" action="MAILTO:info#somewebsite.com" method="post" enctype="text/plain">
<div class="col-lg-6 col-xs-2">
<div class="form-group">
<label for="InputName">Your Name</label>
<div class="input-group">
<input type="text" class="form-control" name="Name" id="InputName" placeholder="Enter Name" required>
<span class="input-group-addon"><i class="form-control-feedback"></i></span></div>
</div>
<div class="form-group">
<label for="InputEmail">Your Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmail" name="Email" placeholder="Enter Email" required >
<span class="input-group-addon"><i class="form-control-feedback"></i></span></div>
</div>
<div class="form-group">
<label for="InputMessage">Message</label>
<div class="input-group"
>
<textarea name="Message" id="InputMessage" class="form-control" rows="5" required></textarea>
<span class="input-group-addon"><i class="form-control-feedback"></i></span></div>
</div>
<input type="submit" id="submit" value="Submit" class="btn btn-info pull-right">
</div>
</form>

Show input elements hidden under keyboard Android PhoneGap

I have a form in which one input element gets hidden under keyboard after focusing on it. I don't want my page to get resized.
Can this be handled using scroll, so that only the form div gets scrolled to that particular element?
Or any other approach to this?
I'm not using jquery-mobile and I have tried scrollToElement of iScroll 5, but to no use.
<body onload="initialize()">
<div id="header">
<img alt="" class="header_logo" src="" />
</div>
<div id="main">
<div id="map-canvas"><input id="pac-input" class="controls" type="text" placeholder="Search Area" /></div>
<form id="booking_form" action="#" >
<input type="tel" id="contact_no" placeholder="Contact Number*" maxlength="10"/>
<div class="group">
<span id="get_pick_location" class="gps_icon" title="Press to get current location address/ Select a point on map to get address"></span><textarea cols="10" id="pick_up_location" placeholder="Pickup Location*" ></textarea>
</div>
<div class="group">
<span id="get_drop_location" class="gps_icon" title="Press to get current location address/ Select a point on map to get address"></span><textarea cols="10" id="drop_off_location" placeholder="Drop off Location*" ></textarea>
</div>
<input type="text" id="pick_up_time" placeholder="Pickup time*" />
<input type="text" id="car_model" placeholder="Car*" />
<input type="submit" id="confirm_booking" class="custom_button" value="Confirm Booking" />
</form>
</div>
<div id="footer">
<button id="create_booking" class="custom_button">Book Now</button>
</div>
</body>
The input field car_model gets hidden under keyboard. I have android:windowSoftInputMode="adjustPan" in my manifest file.
theScroll = new IScroll('form');
$('#car_model').focus(function(){
theScroll.scrollTo($('#car_model'));
});

Chrome on Android Issues with reloading JQM pages - Galaxy tablet

I'm having major issues testing my jquery mobile app on Chrome for Android tablets. It works everywhere else except for chrome on android tab.
When I click any button on the page that navigates away from the page, it will refresh the same page I'm in and put it in a popup box. But, if you close the popup and hit any button again it works.
I have a screen shot here...
http://i.imgur.com/NEUIRfa.png
Here is my code:
<%#page language="abap" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Leave Request Approval</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile- 1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<style type="text/css">
.ui-field-contain {
border-bottom-width : 0px !important;
}
</style>
</head>
<!-- Details Page -->
<div data-role="page" id="leave_details" data-theme = "b" >
<body>
<div id="Head" data-theme = "b" data-role="header" data-position="fixed">
<a href="" data-role="button" data-theme = "b" class="ui-btn-left">
Back
</a>
<% DATA: lv_head TYPE string.
CONCATENATE 'Leave Request' '-' INTO lv_head SEPARATED BY space.
CONCATENATE lv_head model->ms_details-type_txt INTO lv_head SEPARATED BY space.
CONCATENATE lv_head '-' model->ms_details-emp_name INTO lv_head SEPARATED BY space. %>
<h3>
<%= lv_head. %>
</h3>
</div> <!--End Header -->
<div data-role="content" data-scroll="true">
<% IF model->mv_error IS NOT INITIAL AND model->ms_details IS INITIAL. %>
<span style="color: #FF0000;"> <b> <%= model->mv_error. %> </b> </span>
<% RETURN. %>
<% ELSE. %>
<% IF model->mv_success IS NOT INITIAL OR
model->mv_error IS NOT INITIAL. %>
<div> <!--Begin top portion of page -->
<% IF model->mv_success IS NOT INITIAL. %>
<span style="color: #008000;"> <b> <%= model->mv_success. %> </b> </span>
<% ENDIF. %>
<% IF model->mv_error IS NOT INITIAL. %>
<span style="color: #FF0000;"> <b> <%= model->mv_error. %> </b> </span>
<% CLEAR: model->mv_error. %>
<% IF model->mv_locked = abap_false. %>
<% RETURN. %>
<% ENDIF. %>
<% ENDIF. %>
<%-- <p style="text-align: center;" data-mce-style="text-align: center;">
<b>
<%= model->ms_details-emp_name. %>
</b>
</p>--%>
</div> <!--End top portion of page -->
<% ENDIF. %>
<!--Begin Basic Listbox -->
<div data-role="collapsible" data-collapsed="true" data-theme = "b" data-content-theme = "b">
<h3>
Basic
</h3>
<div data-role="fieldcontain">
<label for="sup"><b>Supervisor:</b></label>
<input type="text" readonly name="sup" id="sup" value="<%=model->ms_details-sup_name %>" />
</div>
<div data-role="fieldcontain">
<label for="crby"><b>Created By:</b></label>
<input type="text" readonly name="crby" id="crby" value="<%=model->ms_details-cr_by %>" />
</div>
<div data-role="fieldcontain">
<label for="crdt"><b>Created Date:</b></label>
<input type="text" readonly name="crdt" id="crdt" value="<%=model->ms_details-req_date %>" />
</div>
<div data-role="fieldcontain">
<label for="crtm"><b>Created Time:</b></label>
<input type="text" readonly name="crtm" id="crtm" value="<%=model->ms_details-req_time %>" />
</div>
</div> <!--End Basic Listbox -->
<!--Begin Details Listbox -->
<div data-role="collapsible" data-collapsed="false" data-theme = "b" data-content-theme = "b">
<h3>
Details
</h3>
<div data-role="fieldcontain">
<label for="hours"><b>Absence Hours:</b></label>
<input type="text" readonly name="hours" id="hours" value="<%=model->ms_details-hours %>" />
</div>
<div data-role="fieldcontain">
<label for="type"><b>Absence Type:</b></label>
<input type="text" readonly name="type" id="type" value="<%=model->ms_details-awart %>" />
</div>
<div data-role="fieldcontain">
<label for="begdt"><b>Leave Begin Date:</b></label>
<input type="text" readonly name="begdt" id="begdt" value="<%=model->ms_details-date_fr %>" />
</div>
<div data-role="fieldcontain">
<label for="enddt"><b>Leave End Date:</b></label>
<input type="text" readonly name="enddt" id="enddt" value="<%=model->ms_details-date_to %>" />
</div>
<div data-role="fieldcontain">
<label for="begmeal"><b>Begin Meal Time:</b></label>
<input type="text" readonly name="begmeal" id="begmeal" value="<%=model->ms_details-beg_meal %>" />
</div>
<div data-role="fieldcontain">
<label for="endmeal"><b>End Meal Time:</b></label>
<input type="text" readonly name="endmeal" id="endmeal" value="<%=model->ms_details- end_meal %>" />
</div>
<!--Begin Other Buttons -->
<div class="ui-grid-a">
<div class="ui-block-a"><font size="2">History</font></div>
<div class="ui-block-b"><font size="2">Quotas</font></div>
</div>
<!--End Other Buttons -->
</div> <!--End Details Listbox -->
<!--Begin Notes Listbox -->
<div data-role="collapsible" data-collapsed="true" data-theme = "b" data-content-theme ="b">
<h3>
Notes
</h3>
<div data-role="fieldcontain">
<label for="medtime"><b>Med Appt Time:</b></label>
<input type="text" readonly name="medtime" id="medtime" value="<%=model->ms_details-med_time %>" />
</div>
<div data-role="fieldcontain">
<label for="fam"><b>Family Rel:</b></label>
<input type="text" readonly name="fam" id="fam" value="<%=model->ms_details-relation %>" />
</div>
<div data-role="fieldcontain">
<label for="flu"><b>Influenza:</b></label>
<input type="text" readonly name="flu" id="flu" value="<%=model->ms_details-flu %>" />
</div>
<% DATA: lv_cert TYPE char3.
IF model->ms_details-medcert = abap_true.
lv_cert = 'Yes'.
ELSE.
lv_cert = 'No'.
ENDIF.
%>
<div data-role="fieldcontain">
<label for="cert"><b>Medical Cert:</b></label>
<input type="text" readonly name="cert" id="cert" value="<%=lv_cert %>" />
</div>
<div data-role="fieldcontain">
<label for="Remarks"><b>Remarks:</b></label>
<textarea readonly name="Remarks" id="Remarks" ><%=model->ms_details-remarks %></textarea>
</div>
</div> <!--End Notes Listbox -->
<% IF model->mv_disp NE 'O' AND model->mv_success IS INITIAL. %>
<!--Begin Footer-->
<div id="Footer" data-theme = "b" data-role="footer" data-position="fixed">
<h3></h3>
<a href="" data-rel="dialog" data-role="button" data-inline="true" data-transition="pop" data-theme = "b" class="ui-btn-left">
<% IF model->mv_done_only = abap_false. %>
Approve
<% ELSE. %>
Done
<% ENDIF. %>
</a>
<% IF model->mv_done_only = abap_false. %>
<a href="" data-rel="dialog" data-role="button" data-inline="true" data-transition="pop" data-theme = "b" class="ui-btn-right">
Reject
</a>
<% ENDIF. %>
</div>
<!--End Footer-->
<% ENDIF. %>
<% ENDIF. %>
</div> <!--End Content -->
</body>
</div> <!--End Details Page -->
</html>

Phonegap form validation errors, hide using backbutton

I'm working on phonegapp application. My application has a form which user should fill.I have used inline validation using Jquery. when user clicked some required field & didn't fill the field it will prompt the error or if he try to submit the form all the required fields will be given errors. It works as i want. My problem is when user clicked back-button without submitting the form, all the prompted errors are in the new page.How can i hide those prompted errors when user clicked back-button.
please help me.
I have attached screen shots to picasa-album. check it in here
https://picasaweb.google.com/103544813681982438507/PhonegapApp
Here goes my code..
<html>
<form id="formID" method="post" action="submit.action">
<ul data-role="listview" data-inset="true" data-theme="a">
<li ><div data-role="fieldcontain">
<label for="address">Address</label>
<input type="hidden" name="address" /></div>
<label for="street">Street:</label>
<input type="text" name="street" id="street" value="" class="validate[required] text-input" data-prompt-position="topLeft:50" data-prompt-position="top:60"/>
<label for="suburb">Suburb</label>
<input type="text" name="suburb" id="suburb" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/>
<label for="town">Town</label>
<input type="text" name="town" id="town" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/>
<label for="district">District</label>
<input type="text" name="district" id="district" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/></li>
<li>
<div data-role="fieldcontain">
<label for="date">Date</label>
<input value="" class="validate[required] text-input datepicker" type="text" name="date" id="date" data-prompt-position="topLeft:50" /></div></li>
<li>
<div data-role="fieldcontain">
<label for="owner_name">xxxxxxxx</label>
<input type="text" name="xxxxx" id="xxxxx" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/></div></li>
<li>
<div data-role="fieldcontain">
<label for="xxxxxx">xxxxxxxxxxxx</label>
<input type="text" name="xxxxxxxxxx" id="xxxxxxxxxxx" value=""/></div>
</li>
</ul>
<div data-role="fieldcontain">
<button type="submit" name="save" id="save" data-theme="a" value="Save" class="submit"/></div>
</form>
</div></div>
<script type="text/javascript">
//Form Validating.................................................
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#formID").validationEngine({autoHidePrompt:true});
$( ".datepicker" ).datepicker();
});
</script>
</html>

You can hide the form validation elements when a user navigates away from the current page:
$(document).on('pagehide', function () {
$('#formID').validationEngine('hideAll');
});
Source: https://github.com/posabsolute/jQuery-Validation-Engine
It doesn't look like you're quite following the jQuery Mobile page convention: http://jquerymobile.com/demos/1.1.0/docs/pages/page-anatomy.html
Quick Example:
<body>
<div data-role="page">
<div data-role="header>...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</body>
Note that .on() is new as of jQuery 1.7 so if you're using 1.6.4 or older, change .on() to .bind().