Hi, i’m currently having a hard time with simply disabling buttons.
I have a template containing five buttons, and i want to disable some of them after they have been rendered.
This does not work when I do this initially, but if the user selects an item in a listview (which leads to disabling/enabling buttons), it works. But since the buttons are initially not correctly setup, they can be pressed, leading to unintended events.
I am using the latest Meteor release (1.7.0.5).
I cant stop thinking I am overlooking something obvious, since I spent hours trying to fix this.
defaultButtons.html
<template name="defaultButtons">
<div class="bottom_fixed_buttons">
<button id="default_button_add" class="default_button" disabled>Hinzufügen</button>
<button id="default_button_duplicate" class="default_button" disabled>Duplizieren</button>
<button id="default_button_delete" class="default_button" disabled>Löschen</button>
<button id="default_button_edit" class="default_button" disabled>Bearbeiten</button>
<button id="default_button_save" class="default_button" disabled>Speichern</button>
</div>
</template>
defaultButtons.js
import { Template } from 'meteor/templating';
import './defaultButtons.html';
import './defaultButtons.less';
let isRendered = false;
let displayOptionStack = [];
//Values: hidden, disabled, enabled
//options: add, duplicate, delete, edit, save
export function setDisplayOption(option, value) {
if (!isRendered) {
displayOptionStack.push({opt:option,val:value});
return;
}
switch(value) {
case 'enabled':
$('#default_button_' + option).css('display', 'initial');
$('#default_button_' + option).prop('disabled', false);
break;
case 'disabled':
$('#default_button_' + option).css('display', 'initial');
$('#default_button_' + option).prop('disabled', true);
break;
default:
$('#default_button_' + option).css('display', 'none');
}
}
Template.defaultButtons.onRendered(function(){
isRendered = true;
for (let i=0; i<displayOptionStack.length; i++) {
setDisplayOption(displayOptionStack[i].opt, displayOptionStack[i].val);
}
displayOptionStack = [];
});
Template.defaultButtons.onDestroyed(function(){
isRendered = false;
displayOptionStack = [];
});
listview.js (only the relating part)
import '/imports/ui/templates/defaultButtons/defaultButtons.js';
import DefaultButtons from '/imports/ui/templates/defaultButtons/defaultButtons.js';
Template.listview.onCreated(function () {
console.log("[TEMPLATE]: listview created.");
DefaultButtons.setDisplayOption("add", "enabled");
DefaultButtons.setDisplayOption("duplicate", "disabled");
DefaultButtons.setDisplayOption("delete", "disabled");
DefaultButtons.setDisplayOption("edit", "hidden");
DefaultButtons.setDisplayOption("save", "hidden");
// all are still enabled after these calls (but the hidden ones ar hidden)
}