I have list of rows, and each one row has 2 more more buttons. I want to disable button on click event, so once its done ajax call then I can reenable it or hide it completely.
So I'm wondering how can I disable this single button on click event.
how can I disable from event?
<button [disabled]="buttonDisabled" (click)="trigger($event)">
trigger ($event)
{
$event.buttonDisabled = true; // ?
}
<div *ngfor="#row of rows">
<button [disabled]="awaitingAjaxCall[row] ? true : null" (click)="trigger($event, row)">
</div>
rows: [0,1,2];
awaitingAjaxCall:boolean[] = [false, false, false];
trigger ($event, row)
{
this.awaitingAjaxCall[row] = true;
this.http.get(...).map(...).subscribe(value => {
this.value = value;
// or here
// this.awaitingAjaxCall[row] = false;
}, error => {},
() => this.awaitingAjaxCall[row] = false);
}
Related
I want user to be able to tap screen to toggle L.control, to get a cleaner map.
This is my code to toggle L.control:
var dragged = false
window.addEventListener('mousedown', function () {
dragged = false
})
window.addEventListener('mousemove', function () {
dragged = true
})
$("#mapid").on("click", function () {
if (dragged == false && $(window).width() < 960) {
return $(".leaflet-left").slideToggle(300) && $(".leaflet-right").slideToggle(300);
}
})
This works, but the problem is that L.control also toggle when the markers on the map is clicked.
How do I ignore this when a marker is clicked?
https://jsfiddle.net/2frpcL4y/
Use the Leaflet internal event click on the map:
map.on("click", function () {
if ($(window).width() < 960) {
$(".leaflet-left").slideToggle(300) && $(".leaflet-right").slideToggle(300);
}
})
To check if a popup open:
function isPopupOpen(){
var popupOpen = false;
map.eachLayer((layer)=>{
if(layer instanceof L.Popup){
popupOpen = true;
}
})
return popupOpen;
}
I'll have an ionic loading indicator that I'll want to show after 2 seconds of loading if the application still loading data from a server else don't show it. This is the html of the spinner.
<!-- Loading -->
<div class="ion-text-center" *ngIf="isLoading && timer == 0">
<ion-spinner name="dots" color="light"></ion-spinner>
</div>
In the page component I'll set isLoading to true each time new posts are loaded. In the setPostData I'll set it back to false. But combining this with the timer doesn't work.
posts: any = [];
timer: any = 0;
isLoading: boolean;
constructor(){...}
getPostData(){
this.timer = setTimeout(() => {}, 2000);
this.isLoading = true;
this.postService.getPosts().subscribe(
(result) => {
this.setPostData(result);
}
);
}
setPostData(data){
this.posts = data.posts;
this.isLoading = false;
}
I'll found another way to do it. Create a timer(setTimeout) and bind the toggleLoading function. In the setPostData function clear the created timer. So after 2500 miliseconds the loading starts. If 2500 miliseconds is not reached the timer is cleared and the loading dots are not displayed as wished.
posts: any = [];
timer
isLoading: boolean;
constructor(){...}
toggleLoading(){
this.isLoading = !this.isLoading;
}
getPostData(){
this.timer = setTimeout(this.toggleLoading.bind(this), 2500);
this.postService.getPosts().subscribe(
(result) => {
this.setPostData(result);
}
);
}
setPostData(data){
this.posts = data.posts;
if(this.timer) {
clearTimeout(this.timer);
}
this.isLoading = false;
}
I am trying to show the list of language available as an Action sheet. But as soon as the language button is pressed the action sheet closes automatically. Is there any possible way to prevent the auto close of ion-action-sheet controller on clicking the ActionsheetButton.
async showChangeLangAlert() {
const actionSheet = await this.actionSheet.create(
{
header: this.translateText('Select language'),
buttons: this.getLanguageInputTypes(),
cssClass: 'confirmation-popup select-lang',
backdropDismiss: true,
mode: 'md'
}
);
actionSheet.present();
actionSheet.onWillDismiss().then(res => {
console.log(res);
event.preventDefault();
});
actionSheet.onDidDismiss().then(res => {
this.langChoosen.next(this.selectedLanguage);
});
}
private getLanguageInputTypes(): ActionSheetButton[] {
if (this.selectedLanguage === undefined) {
this.selectedLanguage = 'en';
}
return [
{
text: this.translateText('English'),
icon: (this.selectedLanguage.toLowerCase() === 'en') ? 'radio-button-on' : 'radio-button-off',
cssClass: (this.selectedLanguage.toLowerCase() === 'en') ? 'active-option' : '',
handler: () => {
this.selectedLanguage = 'en';
}
},
{
text: this.translateText('German'),
icon: (this.selectedLanguage.toLowerCase() === 'de') ? 'radio-button-on' : 'radio-button-off',
cssClass: (this.selectedLanguage.toLowerCase() === 'de') ? 'active-option' : '',
handler: () => {
this.selectedLanguage = 'de';
}
},
{
text: this.translateText('Select'),
icon: 'checkmark-circle',
cssClass: (this.selectedLanguage.toLowerCase() === 'de') ? 'active-option' : '',
handler: () => {
this.setSelectedLanguage();
}
}
];
}
private setSelectedLanguage() {
// close the action-sheet here
}
I want to achieve the manual close of the action-sheet controller, but it closes automatically on clicking any action button. What I am missing or is there any workaround to show the alert window as an action sheet?
the handler: ()=> returns to true after a button is clicked which dismisses the actionsheet. Returning false after the button is clicked in the handler() will keep the actionsheet in place.
handler: ()=>{
// assign selected language
this.selectedLanguage = 'en';
// then return false
return false;
}
backdropDismiss
Description
If true, the action sheet will be dismissed when the backdrop is clicked.
Attribute backdrop-dismiss
Type boolean
Default true
backdropDismiss:false
Is there a way to dynamically add and remove a class from an Ionic alert button?
This is how I am adding buttons to Ionic alert -
const alert = this.alertCtrl.create({
title: 'Alert title',
cssClass: 'my-alert-class',
buttons: [
{ text: 'Button 1', handler: data => { return false; }, cssClass: 'some-class' },
{ text: 'Button 2', handler: data => { return false; }, cssClass: 'some-class' }
]
});
Notice the return false inside handler. This prevents the alert from getting closed(which is ok).
So, as the alert is not closed, I want to change CSS properties of that button just to identify which one got clicked.
I have an option of adding/removing event listeners in case if there is no sol
As I couldn't find any inbuild ways of doing this, I wrote followings to achieve the functionality.
const buttonElms: NodeList = document.querySelectorAll('.my-ionic-alert .alert-button-group .alert-button');
// add "click" event listener to each button
for(let index = 0; index < buttonElms.length; index++) {
buttonElms[index].addEventListener('click', this.selectedButtonHandler);
}
selectedButtonHandler = (event: MouseEvent)=>{
// handler for clicked button
let target: any = event.target; // target element
let siblings: HTMLCollection = target.parentElement.children; // list of all siblings
for(let index = 0; index < siblings.length; index++){
siblings[index].classList.remove('selected-button'); // remove selected class from all siblings
}
target.classList.add('selected-button'); // add selected class to currently selected item
};
/** #jsx React.DOM */
var Button = React.createClass({
handleClick: function(){
console.log(' FROM BUTTON')
},
render: function() {
return <input type='button' onClick={this.handleClick} value={this.props.dname}/>;
}
});
var Text = React.createClass({
render: function() {
return <input type='text' onClick={this.handleClick} value={this.props.ival}/>;
}
});
var search = React.createClass({
handleClick: function() {
console.log('searching')
},
render: function(){
return (
<div>
<Text/>
<Button dname={this.props.dname} onClick={this.handleClick} />
</div>
);
}
});
React.renderComponent(<search dname='Look up' fname='Search'/> , document.body);
I have created a button and text component and included them in a search component now i want to override the default handleClick event of button with search component's handler.
But this.handleClick is pointing to button component's event handler.. please help..
i need FROM SEARCH on click instead i got FROM BUTTON..
You are 99% percent there.
React uses a one-way data-flow. So, events on nested components will not propagate to their parents.
You must propagate events manually
Change your <Button>s handleClick function to call the this.props.handleClick function passed in from it's <Search> parent:
var Button = React.createClass({
handleClick: function () {
this.props.onClick();
},
...
});
Attached is a fiddle of your original post, with the required change. Instead of logging FROM BUTTON, it will now alert searching.
http://jsfiddle.net/chantastic/VwfTc/1/
You need to change your Button component to allow such behaviour:
var Button = React.createClass({
handleClick: function(){
console.log(' FROM BUTTON')
},
render: function() {
return (
<input type='button'
onClick={this.props.onClick || this.handleClick}
value={this.props.dname} />
);
}
});
note the onClick={this.props.onClick || this.handleClick}.
That way if you pass an onClick prop when instantiating Button it will have a preference over the Button's handleClick method.
Or if you can execute both of them, you can put
class Button extends React.Component {
handleClick = () => {
console.log("from buttom");
if (this.props.hasOwnProperty('onClick')){
this.props.onClick();
}
};
You would check whether the object has the specified property and run it