Develop Reference

When clicking back button, after a pop up appears, it redirects to the back page but cannot click anything. (Mobile app)

When clicking back button after a pop up appears, it redirects to the back page but cannot click anything. I think this is because, the background fade in effect when pop appears, is still active on redirecting to the back page, hence the page is inactive. This is the code for backbutton,
document.addEventListener("backbutton", onBackKeyDown, true);
function onBackKeyDown()
{
var locate=document.location.href.match(/[^\/]+$/)[0];
if(locate=="Home")
{
resp = confirm("Do you want to exit the app?");
if (resp === true)
{
navigator.app.exitApp();
}
}
else
{
menuopenchk();
location.href="#Home";
}
}
This is the add item pop up,
<!-- =================ADD Item Popup================ -->
<div id="additem" class="modal fade homelogin" role="dialog" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title homelogintitle" translate="ADD-ITEM">ADD ITEMS</h4>
</div>
<form id="add-item" novalidate="novalidate">
<!-- -->
<div class="modal-body" align="center">
<div style="margin:10px;" class="additemdiv">
<div class="additemdiv2" style="width:40%;">
<label for="Itemtype" class="labl-add" translate="ITEM-TYPE">Item Type: </label>
</div>
<div class="additemdiv2" style="width:60%;">
<select name="Itemtype" ng-model="Itemtype" id="itemtype"
ng-change="itemnamefetch(Itemtype);" class="form-control homelogin-input1 additemselect"
style="width:100%;height:30px; padding:0px;">
<option value="" selected translate="SELECT">-Select-</option>
<option data-ng-repeat="a in item1 track by $index" value="{{a.ItemID}}">{{a.ItemName}}</option>
</select>
</div>
<div style="clear:both;"></div>
</div>
<div style="margin:10px;" class="additemdiv">
<div style="width: 40%;" class="additemdiv2">
<label for="Itemname" class="labl-add" translate="SUB-ITEM">Sub Item: </label>
</div>
<div class="additemdiv2" style="width:60%;">
<select name="Itemname" ng-model="Itemname" id="Itemname"
ng-change="unitfetch(Itemname);" class="form-control homelogin-input1 additemselect"
style="width: 100%; height: 30px; padding: 0px;">
<option value="" selected translate="SELECT">-Select-</option>
<option data-ng-repeat="b in itemname1 track by $index" value="{{b.SubItemID}}">{{b.SubItemName}}</option>
</select>
</div>
<div style="clear:both;"></div>
</div>
<div style="margin:10px;" class="additemdiv">
<div style="width: 40%;" class="additemdiv2">
<label for="unit" class="labl-add" translate="UNIT">Unit: </label>
</div>
<div class="additemdiv2" style="width:60%;">
<input type="text" ng-model="unit" id="unit" name="unit"
class="form-control homelogin-input1 additemtext" placeholder="{{'UNIT' | translate}}" style="width: 100%; height: 30px;">
</div>
<div style="clear:both;"></div>
</div>
<div style="margin:10px;" class="additemdiv">
<div style="width: 40%;" class="additemdiv2">
<label for="price" class="labl-add" translate="PRICE">Price:</label>
</div>
<div class="additemdiv2" style="width:60%;">
<input type="text" ng-model="price" id="price" name="price"
class="form-control homelogin-input1 additemtext" placeholder="{{'PRICE' | translate}}"
disabled style="width: 100%; height: 30px; padding: 0px;"> <!-- value="{{price}}" -->
</div>
<div style="clear:both;"></div>
</div>
<div style="margin:10px;" class="additemdiv">
<div style="width: 40%;" class="additemdiv2">
<label for="quantity" class="labl-add" translate="QUANTITY">Quantity: </label>
</div>
<div class="additemdiv2" style="width:60%;">
<input type="number" ng-model="quantity" name="quantity" id="quantity"
ng-keyup="totalfunc(price,quantity);" class="form-control homelogin-input1 additemtext" placeholder="{{'QUANTITY' | translate}}"
disabled style="width: 100%; height: 30px; padding: 0px;"> <!-- value="{{price}}" -->
</div>
<div style="clear:both;"></div>
</div>
<div style="margin:10px;" class="additemdiv">
<div style="width: 40%;" class="additemdiv2">
<label for="total" class="labl-add" translate="ITEM-TOTAL">Total: </label>
</div>
<div class="additemdiv2" style="width:60%;">
<input type="number" ng-model="total" name="total" id="total"
class="form-control homelogin-input1 additemtext" placeholder="{{'ITEM-TOTAL' | translate}}"
disabled style="width: 100%; height: 30px; padding: 0px;"><!-- {{price*quantity}} -->
</div>
<div style="clear:both;"></div>
</div>
<table style="width:100%;" class="dyanamictable">
<tbody>
<input type="hidden" value="{{price1}}" ng-model="price1" id="priceid"><!-- item ID -->
<input type="hidden" value="{{price2}}" ng-model="price2" id="priceid1"><!-- ItemName -->
<input type="hidden" value="{{price3}}" ng-model="price3" id="priceid2"><!-- Subitem Name -->
<input type="hidden" value="{{action}}" ng-model="action" id="action"><!-- Action -->
<input type="hidden" value="{{operation}}" ng-model="operation" id="operation"><!-- Operation -->
<input type="hidden" value="{{modify}}" ng-model="modify" id="modify"><!-- modify -->
</tbody>
</table>
</div>
<div class="modal-footer">
<!-- <div class="row">
<div class="col-md-3 col-sm-3 col-xs-3 col-md-offset-8 col-sm-offset-8 col-xs-offset-8"> -->
<div align="center">
<input type="submit" name="submit" value="{{'ADD-ITEM-BUT' | translate}}" class="btn btn-success" /> <!-- ng-click="addoitem(Itemtype,Itemname,price2,price3,unit,price,quantity,total,price1);" -->
</div>
<!-- </div> -->
<!-- <div class="col-md-3 col-sm-3 col-xs-3 col-md-offset-2 col-sm-offset-2 col-xs-offset-2">
<button type="button" class="btn btn-default btn-success" data-dismiss="modal">Cancel</button>
</div> -->
<!-- </div> -->
</div>
</form>
</div>
</div>
</div>
<!-- =================////ADD Item Popup================ -->
ADDItem pop is on the bookevent page, and on clickin back button it redirects to home page but cannot click anything. Please help me solve this issue...

Add $('.modal-backdrop').remove(); inside else block. It should work.
If you are not using jquery use
document.getElementsByClassName("modal-backdrop").remove ();

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>

Ajax submission not working in Ionic App

When the application is tested on a device using ionic run -l the ajax submission happens but the $cordovaSqllite.execute() throws an error.
The ajax submission doesnt happen when the same application is run in Ionic View using ionic upload.
controller.js
angular.module('starter.controllers', [])
.controller('IssueCtrl', function($scope,$http,$ionicPopup,$cordovaSQLite) {
var db = $cordovaSQLite.openDB({ name: "my.db" });
var sql ="CREATE TABLE IF NOT EXISTS issues (queryid integer,customer text,contact text,address text,issue text,status text";
$cordovaSQLite.execute(db,sql,[]).then(function(res){});
$scope.processform =function(){
$http({
method : 'POST',
url : 'http://path to my folder/data.php',
data : $.param($scope.formData), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
})
.success(function(data) {
var sql='INSERT INTO issues (queryid, customer,contact,address,issue,status) VALUES ('+data+', "'+$scope.formData.customer+'","'+$scope.formData.contact+'","'+$scope.formData.address+'","'+$scope.formData.issue+'","Open")';
$cordovaSQLite.execute(db,sql,[]).then (function(res){
console.log(res.data);
$ionicPopup.alert({
title: 'Done!',
template: 'Done'
});
});
});
}
issue.html
<ion-view ng-controller="IssueCtrl">
<ion-content scroll="true">
<div class="list">
<form ng-submit="processform()">
<div class="row responsive-sm">
<div class="col">
<label class="item item-input item-floating-label">
<input type="text" ng-model="formData.customer" placeholder="Name" required name="customer">
</label>
</div>
<div class="col">
<label class="item item-input item-floating-label">
<input type="text" ng-model="formData.contact" placeholder="Contact" required name="contact">
</label>
</div>
<div class="col">
<label class="item item-input item-floating-label">
<input type="text" ng-model="formData.device" placeholder="Device" required name="device">
</label>
</div>
</div>
<div class="row responsive-sm">
<div class="col">
<label class="item item-input item-floating-label">
<textarea name="issue" ng-model="formData.issue" id="issue" cols="30" placeholder="Issue" rows="10"></textarea>
</label>
</div>
</div>
<div class="row responsive-sm">
<div class="col">
<input type="submit" class="button button-block button-positive" value="Submit" name="Submit">
</div>
</div>
enter code here
</form>
<pre>
{{ formData }}
</pre>
</div>
</ion-content>
</ion-view>

Android Jsoup get value

I'm building an Android app, and using library jsoup, I'm parsing the html but don't know how to get items from my html
the html:
<div id="polls-687" class="wp-polls">
<form id="polls_form_687" class="wp-polls-form" action="/myurl" method="post">
<p style="display: none;">
<input type="hidden" id="poll_687_nonce" name="wp-polls-nonce" value="6490c2e4b0" />
</p>
<p style="display: none;">
<input type="hidden" name="poll_id" value="687" />
</p>
<h4>What do you want to hear?</h4>
<div id="polls-687-ans" class="wp-polls-ans">
<ul class="wp-polls-ul" style="padding-left:0px;">
<li>
<input type="radio" id="poll-answer-2605" name="poll_687" value="2605" />
<label for="poll-answer-2605">Cappella - U & Me</label>
</li>
<li>
<input type="radio" id="poll-answer-2607" name="poll_687" value="2607" />
<label for="poll-answer-2607">Deepest Blue - Deepest Blue</label>
</li>
<li>
<input type="radio" id="poll-answer-2609" name="poll_687" value="2609" />
<label for="poll-answer-2609">Britney Spears - (Hit Me Baby) One More Time</label>
</li>
<li>
<input type="radio" id="poll-answer-2611" name="poll_687" value="2611" />
<label for="poll-answer-2611">Drukwerk - Marianneke</label>
</li>
</ul>
<p style="text-align: left;">
<input type="button" name="vote" value=" Stem op deze plaat " class="Buttons" onclick="poll_vote(687);" />
</p>
<p style="text-align: left;">
</p>
</div>
</form>
</div>
I need to get the labels between the li tags. Also the values from the input tags. I've used this link http://jsoup.org/cookbook/extracting-data/attributes-text-html but I don't know how you can get the specific items I require. Does someone have experience with Jsoup and give me some advice or examples ?

Try this
Elements inputElements = document.select("ul li input");
for (Iterator<Element> iterator = inputElements.iterator(); iterator.hasNext();)
{
Element inputElement = iterator.next();
Element labelElement = inputElement.nextElementSibling();
System.out.println(inputElement.attr("value"));
System.out.println(labelElement.ownText());
}

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().