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.
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)
}
The function calls which manipulate the DOM already take place in the onRendered function.
If they are called earlier, the call parametes are pushed on an array/stack and then called in onRendered.
The way to do this is to not use jQuery. That’s quite hard when you come to reactive, single page apps from a jQuery background - and I imagine we’ve all gone through that when we first started with Meteor.
The trick is to remember that Meteor is reactive, so it’s able to reactively change the DOM. In the case of enabling/disabling buttons in Blaze, the recommended solution is to use template helpers. So, for example, instead of:
Thank you @robfallows for your detailed answer.
I tried your suggestion, but it completely prevents my listview from rendering, did I do something wrong?
defaultButtons.js
let displayOptions = new ReactiveVar({
add: "hidden",
duplicate: "hidden",
delete: "hidden",
edit: "hidden",
save: "hidden"
});
//Values: hidden, disabled, enabled
//options: add, duplicate, delete, edit, save
export function setDisplayOption(option, value) {
options = displayOptions.get();
options[option] = value;
displayOptions.set(options);
}
Template.defaultButtons.helpers({
AddState(){if(displayOptions.get().add !== "enabled") return "disabled"},
AddInvisible(){if (displayOptions.get().add === "hidden") return "invisible-button"},
//leaving out the other buttons since they have exactly the same logic
This time I am pretty sure, I did nothing wrong, which is only more frustrating.
The buttons still are not disabled when rendered.
However, if I set additionalClass to invisible-button in onCreated, they are (correctly) invisible.
Could this in fact be a bug?
You are right, I’ve tested it in a new Project and it also works for me.
I guess I’m gonna have to find it myself since my project isn’t that small anymore.
But thanks for your help, this will probably help me in my future work!