Stop the click event using a confirmation dialog before proceeding with the operation

I'm trying to implement a confirmation dialog before deletion by using e.preventDefault() to prevent immediate deletion. However, I am facing an issue in the YES function where I would like to resume the click event's operation with return true while setting e.preventDefault() to false. How can I proceed to allow the click event to carry out its task?

<script type="text/javascript>
    $(function() {
        $('#delete_registry').on('click', function(e) {

            e.preventDefault();

            alertify.confirm('Delete Registry', 'Are you sure you want to delete your registry? All data will be lost.', function() {
                    console.log('Deleting information');
                    this.close();
                    return true;
                }, function() {
                    this.close();
                    return false;
                })
            .setHeader(header)
            .setting({
                'closable': false, 
                'resizable': true,
                'labels': {'ok': 'Yes', 'cancel': 'No'}
            });
        });
    });
</script>

Answer №1

Give this a shot

$('button').click(function(){
   if(confirm('Are you absolutely sure?')){
    return alert('Item deleted successfully');
   }
   return alert('Item not deleted');
});
<script src="https://cdn.com/jquery.min.js"></script>
<button>Click to Delete Item</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with the presentation of HTML DIV elements

I am puzzled by a situation where my HTML layout to present financial data does not seem to update properly in certain browsers. Despite using jQuery and inspecting it with Firebug, the visual display of the parent divs remains unaltered. This issue become ...

Utilize Babel transpiling specifically for necessary Node modules

My current setup in nextjs is configured to handle ES6 code for IE11. module.exports = { poweredByHeader: false, distDir: "ssr_build", webpack(config) { config.node = { fs: "empty", net: "empty", tls: "empty" } config.plugins = config.plugi ...

The issue with the Material UI Drawer component is that it is casting a shadow even when

Having some trouble with the Material UI Drawer component. Whenever I try to display it on my webpage, it automatically focuses on the inner div, adding a shadow or border if the focus is anywhere else. Does anyone know why this shadow appears and how to r ...

Entering a new row and sending information through ajax

I'm looking for some help with a web page I have that includes a particular table structure: **Check out my Table*:* <table id="staff" class="table"> <thead> <tr> <th>First Name</th> <th>Last Nam ...

Exploring data elements using iteration in JavaScript

Here is some code that is functioning properly: Morris.Bar({ element: 'barchart', axes: true, data: [ json.bar.bar1 ], xkey: 'x', ykeys: ['y', 'z', ' ...

The for loop does not pause for asynchronous code to complete

The for loop in my code has a function call that contains async code. However, the issue is that the for loop does not wait for the async code to return before continuing with the iterations. The function aFunctionThatRunsAsync is from a library that I ca ...

Modify the color of the background for a flex-wrap list

I am facing a situation where I have a list with an unknown number of items, but I need to control the height of its container. To achieve this, I am using flex-flow: wrap column to split the list. The list starts off hidden and is displayed using jQuery&a ...

Guidelines on navigating a blank page using the Nuxt-js method

I have run into an issue in my Nuxt.js project where I need to open a link in a new target when a user clicks a button. Despite trying various solutions, I haven't been able to find a workaround within the Nuxt.js framework itself. <a :href=&qu ...

Include a sharing option within the magiczoomplus feature

My current project involves creating a WordPress site using Artisteer along with several plugins to showcase photo galleries. To enhance the user experience, I purchased an e-commerce WordPress theme which features a share button that I really like. Now, I ...

There appears to be a malfunction with WebRupee

I have incorporated the new rupee sign into my website to represent Indian currency. Below is the code snippet I used: For the script, I included " and also added the following: <span class="WebRupee">Rs.</span> 116,754.00 To style it using ...

Enhancing Data Tables with Jquery: Implementing Column Filtering for Multiple Elements within Table Cells

I am looking to utilize jQuery datatables for filtering a column that may contain multiple values within a single td. To achieve this, I referenced the example provided in the datatables documentation. In the image below, my goal is to filter the office ...

Achieving a frosted glass effect for your background without relying on a background image

I am currently working on creating a modal window in React with a blurred backdrop. My goal is to blur the backdrop content while keeping the background image clear, as there is no image behind the modal window, just content. I have explored various soluti ...

Leverage the Nuxeo client SDK with Angular 6 for seamless integration with RESTClient in

Looking to integrate the Nuxeo ClientSdk with my Angular 6 client to consume its REST API, but facing issues due to the lack of typescript definitions for this JavaScript package. Tried importing the library into my project using the following code snippe ...

Verify the visibility of the toggle, and eliminate the class if it is hidden

I have implemented two toggles in the code snippet below. I am trying to find a solution to determine if either search-open or nav-open are hidden, and if they are, then remove the no-scroll class from the body element. $(document).ready(function() { ...

An easy way to place text along the border of an input field in a React JS application using CSS

I am struggling to figure out how to create an input box with text on the border like the one shown in the image below using CSS. I have searched extensively but have not been able to find any solutions to achieve this effect. I attempted using <input&g ...

Filtering React component names and their corresponding values

I am looking to apply filters to React components based on their name and values. Below is the array that needs to be filtered: let filteredArray: any[] = [] const filteredItems: any[] = eventList.filter( (event) => event.printEvent.labels = ...

What is causing the digest loop from this angular filter grouping?

My goal is to showcase a variety of items in batches of N at a time. The reason for chunking the items is because I need them to be laid out in a tabular or gridded format (each group of N items forms a row, with each item being a column). Below is my atte ...

Issue with Tailwind CSS: The 'overflow-y' property does not scroll all the way to the bottom when using 'top-[63px]'

I'm facing an issue with my Tailwind CSS code that is hindering me from scrolling to the bottom of an aside element. <body> <div> <nav class=" bg-white px-2 py-2.5 dark:bg-gray-800 sm:px-4 fixed w-full z-20 border-b borde ...

Trouble with escaping characters in Javascript?

My code looks like this: `message.channel.send( const Discord = require('discord.js'); const client = new Discord.Client(); const token = 'your bot token here'; client.on('ready', () => { console.log('I am ready!& ...

Updating React state by changing the value of a specific key

I've been diving into React lately and I'm facing an issue with updating state values for a specific key. Below is my current state: this.state = { connections : { facebook : "http://facebook.com", flickr : null, ...