MVC html.ActionLink with JQuery UI Dialog Confirm with dynamic buttons

See more:

Javascript

jQuery

dialog

MVC3

I'm trying to implement confirmation for an Html.ActionLink via jQuery UI Dialog.

I'll start from a link example to better explain; the actionlink generated will call the controller function to delete the item specified by id:

@Html.ActionLink("linkText", "actionName", "controller", new { id = Model.id }, new { @class = "action-confirm", title = "Confirmation Required", message = "Delete Item?", buttons = "btn1:btnAction1;btn2:Cancel" })
//buttons is a "csv" string that contains "button:action" pairs; Cancel is reserved and it means 'do nothing and close the dialog'

what I want-to do is to write a reusable function in jQuery that reads some specified attributes (title, message and buttons) and use them as parameters to load the jQueryUI Dialog.. here's that I'have done

$('.action-confirm').click(
       function (event) {
           event.preventDefault();

           actionLinkObj = $(this);
           
           //create the ConfirmDialog div with specified message
           ConfirmDialog = $("<div class='ConfirmDialog'>" + actionLinkObj.attr("message") + "</div>").insertAfter($("#center"));

           //split the buttons attribute in array containing each button text:action pair
           var buttons = actionLinkObj.attr("buttons");

           var stringButtons = new Array();
           stringButtons = buttons.split(";");

           
           var dialogButtons = {};

           for (i = 0; i < stringButtons.length; i++) {

               var btnName = stringButtons[i].split(":")[0];
               var callBackFunction = stringButtons[i].split(":")[1];

               //if function name is "Cancel", close the diolog without other actions
               if (callBackFunction == "Cancel") {
                   dialogButtons[btnName] = {
                       text: btnName,
                       click: function () {
                           ConfirmDialog.dialog("close");
                           ConfirmDialog.remove();
                       }
                   }
               }
               else {
                   dialogButtons[btnName] = {
                       text: btnName,
                       click: function () {
                           //execute the action specified by the Html.ActionLink
                           $.post(actionLinkObj[0].href, function (data) {
                                   //When done, execute the specified callBack Function 
                                   executeFunctionByName(callBackFunction, window, data);//here's the problem, callbak function is the "last" function defined in the "buttons" attribute, in the example he always tries to call "Cancel" function;
                               });
                           ConfirmDialog.dialog("close");
                           ConfirmDialog.remove();
                       }
                   }
               }
           }

           ConfirmDialog.dialog({ title: actionLinkObj.attr("title"), modal: true, buttons: dialogButtons });

       }
   );

The "logic" of the function is correct (maybe not the most elegant solution, but it works), the only problem is the function passed as callBackFunction for the $.post(): as the comment says, the callback function is the one defined in the last element of the buttons attribute;

I.e: if the buttons attribute is

Confirm:Function1; Cancel:Cancel; Confirm2: Action2

the function the callbackfunction fired is Action2 both for Confirm and Confirm2 buttons.

Any suggestion to correct the function?

Thank's in advance,
Alberto