Question:
How can I have a button on a dynamic page (accessible to logged-in members only) that deletes the dataset entry (through a link to CMS) and also navigates to another page on the site (through an onClick event handler in the code)?
Product:
I’m using Wix Editor
What are you trying to achieve:
I have a dynamic page populated with elements from a dataset that offers users the option to save changes they make to those elements or to delete the entire entry. This is done with separate buttons (one to save, one to delete) each linked to CMS.
I want the user to be able to click on the delete button and have BOTH their entry deleted from the dataset AND the browser navigating to another page on the site without any additional step.
What have you already tried:
The delete button, labeled ‘ConfirmDelete’, is tied to the CMS with the function ‘Delete’ selected - this works perfectly. I also have an onClick event in code, tied to the ‘ConfirmDelete’ button described above, that points the browser to another page on the site like so:
export function ConfirmDelete_click(event) {
wixLocationFrontend.to(“/My-Stories”);
}
This onClick event is activated in the developer panel of the button. Currently, it doesn’t work.
Unfortunately, when I click on the ‘ConfirmDelete’ button, all it does is delete the entry but it does not navigate to the page I want, it just hangs on the same dynamic page with all the elements now empty and disabled. It looks weird and wrong so not a pleasant user experience.
Any thoughts on the changes I should make to successfully combine the deletion of the entry and the navigation to another page?
Can you share a screenshot of the dev panel with the button selected, so that it’s id and other properties are visible? This will help me in debugging the issue.
This is a screenshot with the #ConfirmDelete button highlighted and CMS dialogue box open - the click action connects to the ‘Delete’ action in the CMS and the onClick() code points to /My-Assets page but only the CMS action happens when this button is clicked.
Hoping this helps, I look forward to your suggestions to combine the two actions.
I could suggest you to use the $w("#ConfirmDelete").onClick((event) => { });
event handler and remove the current export function ConfirmDelete_click(event) {}
event handler but I won’t.
Because Wix recommends that we either connect the button’s properties / actions via the editor, or use code to perform an action. Using both at the same time may lead to unpredictable behaviour - like in your case.
So what I’d suggest is that you call the delete function using code as well, and once the item is successfully deleted, it will automatically navigate to /My-Assets.
So your code would look something like this:
import wixData from 'wix-data';
import wixLocationFrontend from 'wix-location-frontend';
var currentId;
$w.onReady(async() => {
await $w('#myDataset').onReadyAsync();
let currentItem = $w('#myDataset').getCurrentItem();
currentId = currentItem._id;
});
export function ConfirmDelete_click(event) {
let options = {
"suppressAuth": true
};
wixData.remove("myCollection", currentId, options)
.then((result) => {
wixLocationFrontend.to(“/My-Stories”);
})
.catch((err) => {
console.log(err); //Handle if any error occurred while deleting the item.
});
}
Just remember to change myDataset to the id of your dataset and myCollection to the id of your CMS collection.
suppressAuth is not related to the dataset read/write settings, but instead to the CMS collection’s read and write permissions. It does not alter any pre-set settings.
In the code, if suppressAuth isn’t used, the code might throw up an error if the collection settings are set to Admin. So I’ve just added that extra bit to make sure that the item successfully gets deleted even if the permission to update the content is set to Admin. If you want to exclude suppressAuth, you can simply change your collection settings to Anyone, but that may expose your collection and make it vulnerable, hence suppressAuth. (:
