I am building an Ionic App for iOS & Android and so far I have a form where users can upload or take a photo and then fill in some other information and submit the form.
My issue:
Currently when the user goes to an Input to enter some extra text there is a go button at the bottom of the keyboard. If the user clicks this 'Go' button it tries to submit the form along with opening the choosePicture() function I have.
What happen when I click the
Go button - it opens the Library
The HTML
<ion-item class="file-upload">
<button class="btn btn-block" ion-button (click)="choosePhoto()">Choose a Photo</button>
<span class="sep"></span>
<button class="btn btn-block" ion-button (click)="takePicture()">Take a Picture</button>
<div class="uploaded-img">
<input type="file" value="" formControlName="hazardImage" hidden />
<span class="img-desc">Please Take or Upload an Image.</span>
<div class="img-picked" *ngIf="base64Img">
<img [src]="base64Img" alt="Hazard Picture" />
<!-- <img src="http://placehold.it/300x300" alt="Test Image" /> -->
</div>
</div>
</ion-item>
<small class="small-title">Where is the Hazard Location? (required)</small>
<ion-item class="input-box">
<ion-input type="text" formControlName="hazardLocation" [class.invalid]="!hazardForm.controls.hazardLocation.valid && (hazardForm.controls.hazardLocation.dirty || submitAttempt)"></ion-input>
</ion-item>
The TypeScript:
choosePhoto()
{
this.Camera.getPicture({
quality: 50,
destinationType: this.Camera.DestinationType.DATA_URL,
encodingType: this.Camera.EncodingType.JPEG,
sourceType: this.Camera.PictureSourceType.PHOTOLIBRARY,
allowEdit: true
}).then((ImageData) => {
// console.log(ImageData);
this.base64Img = ImageData;
this.hazardForm.patchValue({
hazardImage: this.base64Img
});
}, (err) => {
console.log(err);
})
}
I don't understand why the Go Button is opening the function for choosing a photo :/
You can modify the behaviour of the 'Go' keyboard button with:
#ViewChild('input-box') inputElm: ElementRef;
#HostListener('keyup', ['$event'])
keyEvent(e) {
if(!e.srcElement) return; //browser fix
var code = e.keyCode || e.which;
if (code === 13) {
if (e.srcElement.tagName === "INPUT") {
e.preventDefault();
//handle other behaviours
}
}
};
You have defined the <input> for "Hazard Location" as a Form since there is a formControlName="hazardLocation" attribute. This makes the Go or form submit button appear in the mobile keyboard.
Instead, you should have it as a normal input field like this
<input [(ngModel)]="hazardLocation">
Related
I got the following codes as shown below:
<div class="inner">
<h1> SOme text here</h1>
<app-secondpart>
<div class="class2">
<label> some label</label>
<label>
<input id="yes" type="radio">
"Yes"
</label>
<label>
<input id="no" type="radio">
"No"
</label>
</div>
</app-secondpart>
</div>
I wish to select/click "Yes" with this code "element(by.id("yes")).click();" But when running the app, I got this error "Failed: element not interactable."
I am new to Protractor by the way.
Try the following js click on button.
export async function jsClickButton() {
try {
let btn = element(By.id('yes'));
await browser.executeScript('arguments[0].click()', btn).then(async() => {
console.log('Btn has been clicked.');
});
} catch (error) {
console.log('Button is not clickable due ' + error);
}
}
Second solution is click on the label element.
I have a confirm modal shown after a button clicked and in this modal has two buttons, "Cancel" and "Add". The "Add" will expend data into its own item list and it works fine. But if I click "Cancel" and then go back to show this modal again, if then I click "Add", my item list will be expended times depends on how many time I click "Cancel" before. I try .data("bs.modal", null) or .off('click') at .on("hidden.bs.modal"). None of them can fix my problem.
The sample link Sample
<div class="major">
<button class='btn btn-danger btn-xs' type="submit" name="additem" value="Add"><span class="fa fa-times"></span> add</button>
<ul id="itemlist" data="0">
</ul>
</div>
<div class="major">
<button class='btn btn-danger btn-xs' type="submit" name="additem" value="Add"><span class="fa fa-times"></span> add</button>
<ul id="itemlist" data="100">
</ul>
</div>
<!-- Modal -->
<div id="confirm" class="modal hide fade">
<div class="modal-body">
Are you sure?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="add">Add</button>
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
</div>
</div>
the script,
$('button[name="additem"]').on('click', function(e){
var $major=$(this).closest('.major');
e.preventDefault();
$('#confirm').modal({ backdrop: 'static', keyboard: false })
.one('click', '#add', function (e) {
var num = parseInt($major.children("#itemlist").attr("data")) + 1;
$major.children("#itemlist").append("<li>new item" + num + "</li>");
$major.children("#itemlist").attr("data", num);
});
});
$("#confirm").on("hidden.bs.modal", function(){
$(this).data("bs.modal", null);
$("#add").off("click");
});
Following were the problems :
Function for "Add Items"
All the code was inside function for Add Items, So whenever add button was getting called for displaying modal box, modal box's ADD button's code was also executing..
Jquery .one()
It will execute only one time, so I have replaced it with on which will be executed on every click to "Add button of Modal"
I have taken code out from the function and replaced one with on, now it works fine !!!
Updated fiddle can be found at : http://jsfiddle.net/L3ddq/732/
var $major ;
$('button[name="additem"]').on('click', function(e){
$major=$(this).closest('.major');
e.preventDefault();
$('#confirm').modal({ backdrop: 'static', keyboard: false });
});
$('#confirm').on('click', '#add', function (e) {
var num = parseInt($major.children("#itemlist").attr("data")) + 1;
$major.children("#itemlist").append("<li>new item" + num + "</li>");
$major.children("#itemlist").attr("data", num);
});
I have this template:
<Template name="nuevoEjercicio">
<div class="container-fluid">
<div class="form-group">
<input type="text" class="form-control input-lg" name="ejercicio" placeholder="Ejercicio?"/>
<input type="number" class="form-control" name="repeticiones" placeholder="Repeticiones?" />
<input type="number" class="form-control" name="peso" placeholder="Peso?" />
<button type="submit" class="btn btn-success" >
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</Template>
that I use to capture and save to the database.
Then on my .js file I am trying to get the data and save it:
Template.nuevoEjercicio.events({
'click .btn btn-success': function (event) {
var ejercicio = event.target.ejercicio.value;
var repeticiones = event.target.repeticiones.value;
var peso = event.target.peso.value;
ListaRutina.insert({
rutina:"1",
ejercicio:ejercicio,
repeticiones:repeticiones,
peso:peso,
});
// Clear form
event.target.ejercicio.value = "";
event.target.repeticiones.value = "";
event.target.peso.value = "";
// Prevent default form submit
return false;
}
});
}
as I understand, when I click on any object that has the btn btn-success style....but is not the case. For some obscure reason -for me- is not working.
Can you check it and give me some advice?
Thanks!
First of all, there's an error in you selector. It's 'click .btn.btn-success', not 'click .btn btn-success'.
Also you can't do that event.target.ejercicio.value thing. event.target is the element that was clicked. You'll have to do something like this:
'click .btn.btn-success': function (event, template) {
var ejercicio = template.$('[name=ejercicio]').val()
...
OK
What after wasting hours and hours the solution is:
1- on the html file give your input an id:
<input type="number" class="form-control" **id="peso"** placeholder="Peso?" />
<button type="submit" class="btn .btn-success" id="**guardar**" />
so now you want to save data on the input when the button is clicked:
2- You link the button with the funcion via the id
Template.TEMPLATENAMEONHTMLFILE.events({
'click **#guardar**': function (event, template) {
var ejercicio = template.$("**#peso**").val();
and get the value linking using the input id.
This is working:
view.html
<div><input type="radio" name="radioPriority" data-bind="checked: priority" value="want" style="margin-top: -3px; margin-right: 3px;" />I want to</div>
<div><input type="radio" name="radioPriority" data-bind="checked: priority" value="need" style="margin-top: -3px; margin-right: 3px;"/>I need to</div>
controller.js
function feedbackViewModel() {
var self = this;
self.priority = ko.observable("want");
//lots of other stuff
}
As expected, when you select the second radio the priority observable's value changes to "need". However, I'd like to use a Twitter Bootstrap button group as a radio. Here is the HTML I have, but it does not change the observable as expected:
<span class="btn-group" data-toggle="buttons-radio">
<button data-bind="checked: priority" type="button" class="btn" value="want">I want to</button>
<button data-bind="checked: priority" type="button" class="btn" value="need">I need to</button>
</span>
update I have a jsfiddle going here: http://jsfiddle.net/a8wa8/6/ "priority1" is the standard radio selects and "priority2" is the bootstrap buttons.
The issue is that you are using Checked binding with button which is not allowed, instead you can use click binding. check this fiddle:
http://jsfiddle.net/a8wa8/7/
Updated:
Yes you can achieve this by using ko css binding. Check this updated fiddle:
Updated Fiddle
The checked binding only works with "checkable" controls like checkbox (<input type='checkbox'>) or a radio button (<input type='radio'>).
But you have button in your second example where bootstrap just emulates the look of the radio button group so the checked binding doesn't work.
However you can use the click binding where you pass the value to your observable:
<span class="btn-group" data-toggle="buttons-radio">
<button data-bind="click: function() { priority2('want') }"
type="button" class="btn" value="want">I want to</button>
<button data-bind="click: function() { priority2('need') }"
type="button" class="btn" value="need">I need to</button>
</span>
And you can hide this behind a custom binding:
ko.bindingHandlers.valueClick = {
init: function(element, valueAccessor, allBindingsAccessor,
viewModel, bindingContext) {
var value = valueAccessor();
var newValueAccessor = function() {
return function() {
value(element.value);
};
};
ko.bindingHandlers.click.init(element, newValueAccessor,
allBindingsAccessor, viewModel, bindingContext);
},
}
Then you can use it like:
<span class="btn-group" data-toggle="buttons-radio">
<button data-bind="valueClick: priority2"
type="button" class="btn" value="want">I want to</button>
<button data-bind="valueClick: priority2"
type="button" class="btn" value="need">I need to</button>
</span>
Demo JSFiddle.
I got a form that posts some value to another page. I want alert for datepicker inputs when i post form if they are empty. I have been trying to solve it but couldn't. It is simple but my brain just stopped i think. Code is below.
http://i.stack.imgur.com/Ee95P.png
This is the link of screenshot of my form. Maybe this can help you.
<form id="form-2" class="form-3" method="POST" action="rezervasyon-aşama-2" >
<label style="margin:2px 70px; font-size:16px;" >Rezervasyon Formu</label><br>
<div style="padding:5px 5px;">
Check-in Tarihi:
<input id="datepicker-example7-start" type="text" name='tarih1' >
</script>
</div>
<div style="padding:5px 5px;">
Check-out Tarihi:
<input id="datepicker-example7-end" type="text" name='tarih2' >
</div>
<input TYPE="submit" class="button" NAME="Submit" VALUE="Rezervasyon Yap" >
</form>
when i click input file, the datepicker shows up. So i want a alert if i submit empty. Sorry for my English :) Thanks for helps.
Changed the attribute from ID to NAME -- it was an oversight on my part.
$(document).ready(function () {
$('form').submit(function (e) {
$('input[name^="tarih"]').each(function () {
if ($(this).val().length === 0) {
alert("Your alert here"); //Whatever error message here.
e.preventDefault();
return false;
}
});
});
});
Fiddle:
http://jsfiddle.net/6tp9P/3/