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>
Related
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?
I am trying to install an application made in meteor in my Android mobile. The application is build through
meteor build /home/sampad/meteor_apk --server 192.168.1.27:3000
This app consist of 2 templates. When I click on submit it takes me to the next template when run in desktop through meteor. But when running it in mobile the submit button click does not take me anywhere, also I cannot see any error.
Attaching the code:
<!-- main.html -->
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Accounts Page</a>
</div>
</div>
</nav>
<div class="container">
{{#if currentUser}}
{{>dashboard}}
{{else}}
{{> register}}
{{> login}}
{{/if}}
<hr>
</div>
<template name="register">
<form>
<h3>Registration Page</h3>
E-mail : <input type ="text" id="email"><br>
Password : <input type="password" id="password"><br>
<input type="submit" value="Save details"> <input type="reset" value="Reset">
</form>
</template>
<template name="login">
<form>
<h3>Log In Page</h3>
E-mail : <input type ="text" id="login-email"><br>
Password : <input type="password" id="login-password"><br>
<input type="submit" value="Log In"> <input type="reset" value="Reset">
</form>
</template>
<template name="dashboard">
<p> You 're logged in </p>
<p><a href ="#" class="logout" >Log Out</a></p>
</template>
<!-- main.js -->
if(Meteor.isClient)
{
Template.register.events({
'submit form':function(event,template){
event.preventDefault();
var emailVar = template.find('#email').value;
var passwordVar = template.find('#password').value;
//template.find('#message').append("Clicked submit");
console.log('Form submitted');
Accounts.createUser({
email:emailVar,
password:passwordVar
});
}
});
Template.login.events({
'submit form':function(event,template){
event.preventDefault();
var emailVar = template.find('#login-email').value;
var passwordVar = template.find('#login-password').value;
Meteor.loginWithPassword(emailVar,passwordVar);
}
});
Template.dashboard.events({
'click.logout':function(event){
event.preventDefault();
Meteor.logout();
}
});
}
Maybe try with explicitly specifying the protocol to reach your server?
--server http://192.168.1.27:3000
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>
I am testing a login view on a Samsung galaxy young pro duos which has its own physical keyboard and Android 2.3.6 version but I can't submit the form when I use $cordovaKeyboard in the controller. When I remove $cordovaKeyboard the input does not enter any text.
Here is the controller:
.controller('loginCtrl', function($scope, $http, $location, $ionicLoading, $cordovaKeyboard) {
$scope.enableBackButton = false;
$scope.loginData = {};
$scope.tryLogin = function(loginData) {
alert('Test OK');
};})
And the view:
<ion-view title="HKI-CI Projet Femmes Enceintes" hide-back-button="true">
<div class="bar bar-subheader bar-calm">
<h2 class="title">IDENTIFICATION</h2>
</div>
<ion-content class="padding has-header has-subheader">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Identifiant" ng-model="loginData.identifiant">
</label>
<label class="item item-input">
<input type="password" placeholder="Mot de passe" ng-model="loginData.motDePasse">
</label>
</div>
</ion-content>
<ion-footer-bar>
<div class="button-bar">
<button class="button button-royal ion-checkmark" ng-click="tryLogin(loginData)"> CONNEXION</button>
</div>
</ion-footer-bar></ion-view>
Maybe I miss something so please help me.
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().