Need some simple explanation about dialog in jquery ?

Question

I just started to learn jquery and JavaScript so i can implement it with my current asp.net project. However i have a hard time to grasp the idea how to make a dialog that will show up when user attempt to push delete button and then if user chose button "Yes" it will go for the delete function in code behind of asp.net or if user chose "No" then it will be terminated and no action will be taken.

NOTE: I don't look for somebody to teach me, I just would like some explanation, code examples and links to information where i can read and understand and try on my own.

Thanks in advance.

Answer 1

In javascript you can use 'confirm' to prevent a form submission e.g.

<form onsubmit="return confirm('do you really want to delete this?');" method="post">
<input type="submit" value="click me">
</form>

The 'return' will return 'true' if you clicked [ok] in the confirm box and then the form will be submitted, or 'false' if you clicked [cancel] and then the form won't be submitted.

[EDIT] Some links that might be helpfull:

• ASP.NET Popup Dialog
• Adding Client-Side Message Boxes in your ASP.NET Web Pages

Answer 2

A simple example (which does not require jQuery) would be:

function deleteConfirm ()
{
    if ( confirm('Are you sure you want to delete this?') )
    {
        // do ajax call (jquery would be handy for this)
        // or redirect to delete script
    }

    return false;
}

This method uses the built-in javascript confirm() function. If you are planning on making an ajax call to access your asp.net code, then I suggest using jQuery's ajax function:

jQuery.ajax, jQuery.post, jQuery.get

Answer 3

I'm assuming that you want the delete to actually be the result of a postback that invokes the event handler. You could also do this with AJAX as some others have noted and it would be potentially easier to do.

The basic idea is to have the click function on the button pop up the dialog, then return false to stop the normal action. In your "Yes" callback handler, you'll need to set up the __EVENTTARGET and use __doPostback to simulate the button click.

See this reference on autopostback to see how it works and how you would simulate it.

Answer 4

jQuery UI 1.7 now has a dialog component built in.

Have a look at http://docs.jquery.com/UI/Dialog and http://jqueryui.com/demos/dialog/ for some examples of how to use it.

In particular, look at the second link and the "Confirmation Dialog" example. It demonstrates pretty much exactly what you want to do I think. Just click on the "View Source" link just below the demo.

Answer 5

Completely untested, but you should get the idea... This snippet binds the click event of all elements with the class "delete_user" to a confirmation dialog.

// Bind the click event to all
$('.delete_user').click(function () {
    // Find the user's ID which is the value of a hidden INPUT element with the
    // same parent as the deletion button.
    var userId = $(this).siblings(':hidden').eq(0).val();

    // Make the user confirm the deletion.
    var result = confirm('Are you sure?');

    // If the user has confirmed deletion, make an AJAX request to:
    // /delete_user/?user=<ID>
    if (result) {
        $.ajax({
            data: { user: userId },
            url: '/delete_user/',
            success: function () { alert('Successfully deleted user!'); },
            error: function () { alert('Error when trying to delete user!'); }
        });
    }

    // Don't ever do what the browser wants you to do by returning false.
    return false;
});