Issue : On click on ion-textarea keyboard open but after write some text send button not works.
It only hide keyboard that is open
My typescript is as below:
import { Component } from ‘@angular/core’;
import { NavController, NavParams, ModalController, LoadingController } from ‘ionic-angular’;
import { Auth } from ‘…/…/providers/auth’;
import { PathcrossedPage } from ‘…/pathcrossed/pathcrossed’;
import { Platform, ActionSheetController } from ‘ionic-angular’;
import { ModalPage } from ‘…/modal/modal’;
import { ReportmodalPage } from ‘…/reportmodal/reportmodal’;
import {Http, Headers, RequestOptions} from ‘@angular/http’;
import { Prodankari } from ‘…/…/providers/prodankari’;
import { NativeStorage } from ‘ionic-native’;
import { Myvar } from ‘…/…/providers/myvar’;
import { Toast } from ‘ionic-native’;
import { LoginPage } from ‘…/login/login’;
import {Observable} from ‘rxjs/Rx’;
import { Dialogs } from ‘ionic-native’;
import { AlertController } from ‘ionic-angular’;
import { InboxPage } from ‘…/inbox/inbox’;
import { Keyboard } from ‘ionic-native’;
/*
Generated class for the Chat page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
selector: ‘page-chat’,
templateUrl: ‘chat.html’
})
export class ChatPage {
public allmsgdetails : any;
public user_logged_in : number=0;
public results : any;
public username : any;
public msg : any;
public write_txt : any;
PathcrossedPage = PathcrossedPage;
constructor(public navCtrl: NavController, public navParams: NavParams, public platform: Platform, public actionsheetCtrl: ActionSheetController, public modalCtrl: ModalController, public auth: Auth, public http: Http, public loadCTRL: LoadingController, public myvar : Myvar, public p : Prodankari,public alertCtrl: AlertController) {
this.allmsgdetails = this.navParams.get(‘temp_details_chat’);
this.http = http;
this.platform = platform;
this.write_txt = 0;
platform.ready().then(() => {
if (platform.is('ios')) {
let appEl = <HTMLElement>(document.getElementsByTagName('ION-APP')[0]),
appElHeight = appEl.clientHeight;
//Keyboard.disableScroll(true);
window.addEventListener('native.keyboardshow', (e) => {
appEl.style.height = (appElHeight - (<any>e).keyboardHeight) + 'px';
});
//document.addEventListener(‘focusout’, function(e) {appEl.style.height = ‘100%’;this.send_msg();});
/*window.addEventListener(‘native.keyboardhide’, (e) => {
e.preventDefault();
//alert(‘suman’);
this.sent_msg();
appEl.style.height = ‘100%’;
});*/
}
this.auth.login().then((isLogin) => { //alert(isLogin);
if(!isLogin) {
this.navCtrl.push(LoginPage);
}else{
//this.auth.user;
//alert(this.auth.user.user_id);
NativeStorage.getItem('userinfo').then(data => {
//alert(JSON.stringify(data));
this.user_logged_in = data.user.id;
localStorage.setItem("toid", this.allmsgdetails[1]);
localStorage.setItem("transid", this.allmsgdetails[0]);
localStorage.setItem("username", this.allmsgdetails[2]);
this.username = this.allmsgdetails[2];
this.allmsgs();
/*Observable.interval(50 * 60).subscribe(x => {
this.allmsgs();
});*/
//this.refresh_list(this.user_logged_in);
}, error => {
//alert(JSON.stringify(error))
});
}
});
});
}
doYourStuff()
{
//alert(‘cowabonga’);
//this.navCtrl.pop(); // remember to put this to add the back button behavior
this.navCtrl.push( InboxPage,{} ).then(()=>{});
}
showAlert(msg:string,title:string) {
/let alert = this.alertCtrl.create({
title: title,
subTitle: msg,
buttons: [‘OK’]
});
alert.present();/
if(title == “”){
title = “Alert”;
}
Dialogs.alert(msg,title,‘OK’)
.then(() => {});
}
pathcross(){
this.navCtrl.setRoot( PathcrossedPage,{to_id : localStorage.getItem(“toid”)}).then(()=>{});
}
allmsgs(){
let userid = this.user_logged_in;
//alert(localStorage.getItem(“toid”)+localStorage.getItem(“transid”)+userid);
let body = new FormData();
body.append(‘chat_user_id’, localStorage.getItem(“toid”));
body.append(‘my_user_id’, userid);
body.append(‘trans_id’, localStorage.getItem(“transid”));
let headers = new Headers({ ‘API-Key’ : this.myvar.API_KEY, ‘Access-Key’ : this.myvar.ACCESS_KEY});
let options = new RequestOptions({ headers: headers });
let link = this.p.a + 'chat_message_thread.php';
//alert(JSON.stringify(options));
this.http.post(link, body, options)
.map(res => res.json())
.subscribe(data => {
if(data.code == 200){
this.results = data.details;
//alert(JSON.stringify(this.results));
//alert(JSON.stringify(data.message));
}
//alert(data.code);
},
error => {
//alert("Oooops!");
}
);
}
txt(){
//alert(this.msg);
if(this.msg != ‘’){
this.write_txt = 1;
}else{
this.write_txt = 0;
}
}
sent_msg(){
//alert(10);
let appEl = (document.getElementsByTagName(‘ION-APP’)[0]),
appElHeight = appEl.clientHeight;
//Keyboard.disableScroll(true);
/* window.addEventListener('native.keyboardshow', (e) => {
appEl.style.height = (appElHeight - (<any>e).keyboardHeight) + 'px';
});*/
//window.addEventListener('native.keyboardhide', () => {
appEl.style.height = '100%';
let userid = this.user_logged_in;
//alert(this.allmsgdetails[1]+this.allmsgdetails[0]+userid);
let body = new FormData();
body.append('from_id', userid);
body.append('to_id', localStorage.getItem("toid"));
body.append('trans_id', localStorage.getItem("transid"));
body.append('msg', this.msg);
let headers = new Headers({ 'API-Key' : this.myvar.API_KEY, 'Access-Key' : this.myvar.ACCESS_KEY});
let options = new RequestOptions({ headers: headers });
let link = this.p.a + 'add_chat_details.php';
if(this.msg == 'undefined' || this.msg == '' || this.msg == undefined){
//this.showAlert("Please enter message...","");
/*Toast.show('Please enter message', '3000', 'center').subscribe(
toast => {
console.log(toast);
}
);*/
}else{
//alert(JSON.stringify(options));
this.http.post(link, body, options)
.map(res => res.json())
.subscribe(data => {
if(data.code == 200){
//if (this.platform.is('ios')) {
//});
//}
this.allmsgs();
this.msg = '';
//alert(JSON.stringify(this.results));
//alert(JSON.stringify(data.message));
}else{
this.msg = '';
//this.showAlert(data.message,"");
/*Toast.show(data.message, '3000', 'center').subscribe(
toast => {
console.log(toast);
}
);*/
}
//alert(data.code);
},
error => {
//alert("Oooops!");
}
);
}
}
openAction(){
let actionSheet = this.actionsheetCtrl.create({
buttons: [
{
text: ‘Report’,
handler: () => {
console.log(‘Report clicked’);
let modal = this.modalCtrl.create(ReportmodalPage);
modal.present();
}
},
{
text: ‘Hide’,
handler: () => {
console.log(‘Hide clicked’);
let modal = this.modalCtrl.create(ModalPage);
modal.present();
}
},
{
text: ‘Cancel’,
role: ‘cancel’,
handler: () => {
console.log(‘Cancel clicked’);
}
}
]
});
actionSheet.present();
}
ionViewDidLoad() {
console.log(‘ionViewDidLoad ChatPage’);
}
}
My html is as below:
{{username}}
- {{item.message}}{{item.posted_date}}
<ion-toolbar color="light">
<ion-textarea start rows="1" placeholder="Write a message..." [(ngModel)]="msg" (keyup)="txt()" fz-elastic></ion-textarea>
<ion-buttons end>
<button ion-button small color="secondary" class="send-button" (click)="sent_msg()" *ngIf="write_txt!='1'">
Send
</button>
<button ion-button small color="secondary" class="send-button " (click)="sent_msg()" *ngIf="write_txt=='1'">
<img src="assets/img/send.png"/>
</button>
</ion-buttons>
</ion-toolbar>
Please help me on the above issue.
Thanks in advance