mvc ajax.actionlink with jquery dialog confirm

Question

I have a table with some rows of data items. For each row it will be some actionlinks that will call some methods (delete dataitem, change status dataitem etc...)

Before each user clicks the button i want a jquery dialog to show up and give the user a dialog with some info, a OK and Cancel button.

Some example code of the ajax.actionlink that will call the ChangeStatus method:

<%= Ajax.ActionLink(item.Status, "ChangeStatus", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "ListReturns-Div", OnBegin = "StartChangeStatus", OnSuccess = "EndChangeStatus", OnFailure = "FailureChangeStatus" }, new { @class = "StatusBtn" })%>

This is the jquery function that is called:

 function StartChangeStatus(e) {
            $('#dialog-confirm').dialog({
                resizable: false,
                height: 200,
                modal: true,
                buttons: {
                    'Continue': function () {
                        $(this).dialog('close');
                        $('#Loading-Div').show('slow');
                    },
                    Cancel: function () {
                        $(this).dialog('close');
                        e.preventDefault();
                    }
                }
            });
        }

The actionlink and jquery functions work. But the problem is that i cannot pause/stop the current action when the actionlink is clicked. When the button is clicked now the hole process is running and the dialog confirm button is ignored. So my question is how to change the actionlink or the jquery function to work as wanted with a dialog confirmation before proceeding?

Answer 1

I have also tried your code, getting the same behavior. I have modified your code to display confirm box.

<%= Ajax.ActionLink("Link", 
                    "ChangeStatus", 
                    new { id = 3 }, 
                    new AjaxOptions { UpdateTargetId = "ListReturns-Div", 
                                      HttpMethod = "Post", 
                                      Confirm = "confirmClick" }, 
                                      new { @class = "StatusBtn" }
                   )
%>

and it is displaying the javascript confirm. Need to find the reason why it is not working.