Confirmation message is displayed upon clicking to delete a row in the editable Gridview, prompting the user to

One issue I am facing is with a Delete button in an editable Gridview on my ASP.NET application. When the delete button is clicked, it triggers a function that displays a confirmation popup asking the user for feedback on whether they want to proceed with the deletion. However, the problem is that the function always returns false before receiving any user feedback. Here is the code snippet for the OnClientClick event of the delete button:

OnClientClick="return confirmDelete();"

Here is the definition of the confirmDelete function:

function confirmDelete() {
            
            var isDelete = false;
             
             showPopup(null, function (response) {
                debugger;
                 if (response == "btnYes") {
                    return true;
                } else {
                    return false;
                }
            });
            return false;
            }

I am seeking guidance on where I need to make changes in order to ensure that the backend delete call is only made after receiving the user's response.

Answer №1

Utilize the confirm() function to determine script behavior. By incorporating this into your JavaScript code, you can ensure successful execution.

function confirmDelete() {
    return confirm('Are you sure you want to delete this record?');
}

If the showPopup feature emerges and continues without interruption due to postback, consider tweaking your implementation to prompt for user confirmation before proceeding with deletion.

An alternative approach involves prompting users with a question first and subsequently executing the delete action upon their response.

Answer №2

Alright, so here's the issue at hand: It seems like you haven't included the JavaScript code for `ShowPopup()`.

However, let's assume that you are utilizing jQuery.UI (dialog) or something similar.

The main problem here is that MOST web code (JavaScript) operates asynchronously. When you click on a button, the client-side code executes, but it DOESN'T HALT or wait like `confirm` does in JavaScript. As a result, even though the dialog appears, the button click still triggers the server-side code stub because your `showpopup()` function doesn't halt. This is true for almost all web code. So, if you're using a bootstrap dialog or, better yet, a jQuery.UI dialog, you'll need to adjust the function call accordingly.

Here's what will happen:

You click on the button. The JavaScript code runs and displays the dialog (returning false so the server-side button code doesn't execute). The user interacts with the dialog - let's say they press "ok" or "confirm". Now, what you need to do is configure that function to return true, then click the button again (in JavaScript), and it will return true or false based on your selection, enabling conditional execution of the server-side button based on that choice.

Below is a functional example using jQuery.UI. Pay attention to how we utilized a boolean flag for this setup.

Therefore, currently we have:

<asp:Button ID="btnDelete" runat="server" Text="Delete"
  
  OnClientClick = "return mydeleteprompt(this)" />

Let's imagine there's a delete button on the page.

This is how our jQuery.UI code would look like:

<script>

    mydelpromptok = false
    function mydelprompt(btn) {

        if (mydelpromptok) {
            return true
        }

        var myDialog = $("#mydelprompt")
        myDialog.dialog({
            title: "Confirm delete",
            modal: true,
            width: "320px",
            resizable: false,
            appendTo: "form",
            autoOpen: false,
            buttons: {
                ok: function () {
                    myDialog.dialog("close")
                    mydelpromptok = true
                    btn.click()
                },
                cancel: function () {
                    myDialog.dialog("close")
                }
            }
        })
        myDialog.dialog('open')
        return false
    }

Notice how we set up the function to return FALSE!!! So, when you click on the button, the dialog appears - while we have already returned false!!! Subsequently, when you press "ok" or "confirm" in the dialog, observe how we set that flag to true and CLICK the button again in the JavaScript code. Consequently, when the function runs again, it will return true based on that flag, hence executing the server-side button code. The same approach can be applied to your code too - even though we're not sure how `ShowPopUP` functions, the same methodology can be implemented.

... (remaining text remains unchanged) ...

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

Strange anomalies arising in frontend Apollo and GraphQL integration

Currently, I am working with nuxt.js and apollo. One issue I am facing is that when I click a button, it sends a request to the graphql server. The strange part is that the first time I click the button, everything works as expected. However, when I clic ...

Security Vulnerability in Ajax Callback Breakpoints

Imagine I have the following code snippet (partially pseudocode) $.ajax({ url: "/api/user", success: function(resp) { var data = JSON(resp) if (data.user.is_admin) // do admin thing else // do somet ...

What is the best way to showcase a QR code on a mesh using three.js?

I utilized the QRcode library available at to try and showcase it on a mesh object as a texture using the following code: var qrcode = new QRCode( "test", { text: "http://jindo.dev.naver.com/collie", width: 128, height: 128, colorDark : " ...

Javascript functions triggering repeatedly

I'm working on creating a fun trivia quiz using JavaScript functions. Each question involves globally defined functions called "right" and "wrong" that are supposed to update the score accordingly. However, I've run into an issue where the quiz s ...

Transforming identical elements in an arrayt array into distinct elements without eliminating any element in Javascript

Looking for a solution to remove duplicates from an array? You may have come across using track by $index in ng-repeat of angularjs, but you want to stick with a regular ng-repeat. Here's the scenario: Array=[ { name:'john',salary:& ...

What is the method for retrieving the name of an object's property within an Angular template

I am trying to display the name of a nested object's property using Angular interpolation <ng-container ngFor="let item of saleDetailsAggegater.productMap | keyvalue"> <tr *ngFor="let qtyMap of item.value | keyvalue"&g ...

What's causing ng-show to malfunction in IE11 on AngularJS?

I am experiencing a strange issue with my code - ng-show works perfectly fine on Firefox, but not on IE 11. <div ng-show="isExist" class="panel panel-default"> Here is the relevant code snippet from the controller: $scope.isExist = false; if(user ...

Performing addition and subtraction calculations with HTML and Javascript

I need help creating a simple HTML table for adding and subtracting values, with a limit of 10 and a minimum of 0. I have two functions set up, additionalAdd and additionalSub, triggered by the onclick event, but I keep getting an error saying that totalAd ...

Rendering a Subarray using Map in ReactJS

I have an object containing data structured like this: [{"groupid":"15","items":[ {"id":"42","something":"blah blah blah"}, {"id":"38","something":"blah blah blah"}]}, {"groupid":"7","items": [{"id":"86","something":"blah blah blah"}, {"id":"49","somethin ...

The code below is not working as it should be to redirect to the home page after logging in using Angular. Follow these steps to troubleshoot and properly

When looking at this snippet of code: this.router.navigate(['/login'],{queryParams:{returnUrl:state.url}}); An error is displayed stating that "Property 'url' does not exist on type '(name: string, styles: AnimationStyleMetadata". ...

Correct Way to Use 'useState' in Formik's 'onSubmit' Function?

I recently encountered an issue while using Formik in my Next.js application. Specifically, I am facing a problem with the submit `Button` component, which accepts a `showSpinner` prop to control its behavior. When set to true, the button is disabled and d ...

Animate an svg icon to follow a designated path as the user scrolls

I am currently working on a project that involves animating a bee svg icon as the user scrolls through the website. The bee starts at the top and fills in a grey color line with pink as the user moves forward, and moves backward as the user scrolls back. Y ...

Pause and continue scrolling through the page with the push of a button

I have a question about a simple demo. I am looking to prevent scrolling when button1 is clicked, and then resume scrolling when button2 is clicked. Can someone guide me on how to achieve this? Check out the Fiddle here HTML: <input type='button& ...

Exploring the features of NextJS version 13 with the benefits

Starting from the 13th step, SSR is utilized by default and in order to opt for client side rendering you must specify it at the top like so: 'use client' Currently, my setup involves TypeScript and styled-component integration. Take a look at ...

Combining Grouping and Calculation in ASP.net using Linq to SQL?

I have a database filled with product information. Here are the products: ProdID | ProdName 1 | t-shirt 2 | jeans Now, let's take a look at the available sizes: SizeID | Size 1 | small 2 | medium 3 | large And here is ...

Incorporate a new class into the slot's scope

I'm developing a custom table feature that allows users to customize <td> elements using a slot. Here's the current setup: <tbody> <tr v-for="(item, key) in items"> <slot :item=item"> <td v-for="(header, he ...

Dealing with prompt boxes in Robot Framework: A Guide

Currently, I am utilizing the Robot Framework in conjunction with Selenium2Library for automating tests on websites. During one particular scenario, a prompt box appeared (similar to an alert but containing an input field). The challenge is that Robot Fram ...

Is there a way for me to view the names of the images I am uploading on the console?

Recently, I've started using express and NodeJs. I've created a function called upload that is responsible for uploading images. Here is the code: const fs = require("fs"); var UserId = 2; var storage = multer.diskStorage({ destination: functi ...

Obtaining a numerical value that signifies the depth of an object or nested object within an overarching object

Looking at this JavaScript object var items = [{ content: 'A_lvl0', }, { content: 'B_lvl0', }, { content: 'C_lvl0', children: [{ content: 'C_1_lvl1', }, { content: 'C_2_lvl1& ...

Can I construct an html table-esque layout employing fabric js?

https://i.stack.imgur.com/Zwkj3.jpg I'm in the process of developing a schema builder inspired by vertabelo. To achieve this, I've opted to utilize fabric.js for its interactive features. My main challenge lies in creating an HTML table-like str ...