Issue: Button not works inside ion-footer


#1

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


#2

How to post code.