kendo ui confirm dialog box in jsp file jquery

Question

I have a jsp file. I need to add confirm dialog box when user clicks on delete button

currently script has simple confirm, but i want kendo ui confirm box. I am not sure how confirm box is in jsp file.

function deleteRow(rowdata) {
if(confirm("Are you sure want to delete this record ?")){
        if(finalRowval){
            $.ajax({
                type : 'DELETE',
                url : "${pageContext.request.contextPath}/mvc/abc" + finalRowval.id + "/xyz",
                dataType : 'text/html',
                data : "",
                async : true,
            });
        }
    }
}

SKJ · Accepted Answer · 2024-07-02 13:14:31Z

0

You need to modify your deleteRow function to use Kendo UI Dialog.

Edit : improved debug version of the deleteRow function

function deleteRow(rowdata) {
// Create a Kendo UI Dialog
$("<div></div>").kendoDialog({
    width: "450px",
    title: "Confirm",
    closable: false,
    modal: true,
    content: "<p>Are you sure you want to delete this record?</p>",
    actions: [
        { text: 'Cancel' },
        { 
            text: 'Delete', 
            primary: true, 
            action: function(e) {
                // Log rowdata to debug
                console.log("rowdata:", rowdata);
                if (rowdata) {
                    $.ajax({
                        type: 'DELETE',
                        url: "${pageContext.request.contextPath}/mvc/abc/" + rowdata.id + "/xyz",
                        dataType: 'html',
                        success: function(response) {
                            // Handle success response
                            console.log("Record deleted successfully.");
                            // Possibly refresh the table or remove the row from the DOM
                        },
                        error: function(xhr, status, error) {
                            // Handle error response
                            console.error("Error deleting record:", error);
                            alert("Failed to delete the record. Please try again.");
                        }
                    });
                } else {
                    console.error("Invalid rowdata:", rowdata);
                }
            }
        }
    ]
}).data("kendoDialog").open();

}

edited Jul 2, 2024 at 13:14

answered Jun 14, 2024 at 21:23

SKJ

2,4371 gold badge16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adil Over a year ago

Thanks for the reply. I am getting this error. TypeError: name.toLowerCase is not a function at Object.eval [as action] (eval at compile (kendo.js?5.0.9:298:22), <anonymous>:3:159) I am not using any name.toLowerCase anywhere.

SKJ Over a year ago

I edited my code, please inspect rowdata Structure: Ensure rowdata.id exists and is a valid value. @Adil

Collectives™ on Stack Overflow

kendo ui confirm dialog box in jsp file jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related