I want to call the function whenever the input is changed.
I have created the following in my home.html file
<ion-input type="text" class="scoreboardus" [(ngModel)]='text' (input)='onInputTime($event.target.value)' (change)='onChangeTime($event.target.value)'> </ion-input> and in home.ts file
onChangeTime() { alert('onChangeTime called'); } onInputTime() { alert('onInputTime called'); } the above code works fine if manually give values in the input field.
My problem:
I am changing input value from one of external javascript file.
$('.scoreboardus input').val(200).trigger('onchange'); The above code change the input field value… But function is not called
resultant code should work after creating an app.
4 Answers
Answers 1
You are very close to what you're looking for.
Your code has a small issue
$('.scoreboardus input').val(200).trigger('onchange'); ^^^^^^^^^ Instead of onchange, you should use change to trigger the action. on should not be added as prefix. The event name should be the same we are using in on() function in jQuery or addEventListener in JavaScript.
$('.scoreboardus input').val(200).trigger('change'); onchange won't work
$(document).ready(function(){ $('#ip').on('change',function(){ alert(this.value); }); $('#btn').click(function(){ $('#ip').val('test').trigger('onchange'); }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="ip" /> <button id="btn">Change</button>you have to use change instead
$(document).ready(function(){ $('#ip').on('change',function(){ alert(this.value); }); $('#btn').click(function(){ $('#ip').val('test').trigger('change'); }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="ip" /> <button id="btn">Change</button>Your code works only when editing manually is because the changes made by the scripts won't trigger the event listener. You have to trigger it manually.
Also note that you have to use arrow function ()=>{} inside Angular and add the jQuery code inside ngAfterViewInit then only dynamic elements will be supported in angular
Answers 2
Seem like Jquery did not trigger onChange event of your input. Lets do it by javascript.
<ion-input type="text" class="scoreboardus" [(ngModel)]='text'> </ion-input> You should add onChange listener by javascript:
ionViewDidEnter() { let input = <HTMLInputElement>document.querySelector('.scoreboardus input'); input.addEventListener('change', (event) => { console.log("onChange function fired"); //Your onChange function here. Do what you want this.text = event.target["value"]; }) //Now we try to change your input value by javascript setTimeout(() => { input.value = "Hey. Im changing"; //Trigger onChange function manually var evt = document.createEvent("HTMLEvents"); evt.initEvent("change", false, true); input.dispatchEvent(evt); console.log("I'm done"); }, 3000) } Answers 3
Have you installed the Jquery in your ionic-2 as follows
Installing Jquery
npm install jquery --save After that, install JQuery global derectory to typings ( you can import it):
typings install dt~jquery --global --save Then, you can import JQuery in your "home.ts"
import * as $ from 'jquery' Now try your Jquery function as follows:
$('.scoreboardus input').val(200).trigger('change'); Update: You could assign a template reference variable to the , like #ionInput1, get a hold of its native element (via @ViewChild) inside the component class and then use jQuery itself to listen to the change event.
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>Firing Jquery</h1> <hr> <ion-input type="text" class="scoreboardus" [(ngModel)]='text' (input)='onInputTime($event.target.value)' (change)='onChangeTime($event.target.value)' #ionInput1> </ion-input> }) export class AppComponent implements AfterViewInit { @ViewChild('ionInput1') ionInput1:ElementRef; ngAfterViewInit() { $(this.ionInput1.nativeElement).on('change', (e) => { console.log('Change made -- ngAfterViewInit'); this.onChangeTime(e); }); } onChangeTime(): void{ console.log('Change made -- onChangeTime'); } } For More info Refer this SO SOlution
Answers 4
You must use (ionChange) instead of (change).
<ion-input type="text" class="scoreboardus" [(ngModel)]='text' (input)='onInputTime($event.target.value)' (ionChange)='onChangeTime($event.target.value)'> 
0 comments:
Post a Comment