Question

I want to raise a jQuery Dialog box which has 2 buttons. So that the user can decide to continue with the overwrite operation or not.

One button, the “no” button should do nothing except close the dialog window. The “Yes” button should call a function that make a jQuery post call to an action method on my controller.

The problem is that my action method appears to be run on page load, its not waiting for the dialog box to even show.

Here is the markup for the dialog

 <div id="dialog" title="My Dialog Box">
        <p>
            Ballance Already Exsists. Do you wish to overwrite?</p>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#dialog").dialog({ bgiframe: true, autoOpen: false, modal: true, buttons: { 'OK': overWriteBalance(), 'NO': $(this).dialog('close') }
            });
        });

    </script>

and here are the functions

    balanceCheckPost = function (data) {
        $("#existCheck").val(data);
        if (data) {
            // Does Exist
            $("#existCheck").val("Exist");
            // raise confirmation popup 


            $('#dialog').dialog("open");

        }
        else {
            // Does Not Exist
            $("#existCheck").val("NOT Exist");

            // insert Item
            var balance = {};
            balance.date = $("#bal_Date").val();
            balance.amount = $("#bal_Amount").val();
            $.post("balance/insert",
               balance,
                confirmChange
                 );
        }

    };



    function overWriteBalance() {
        // insert Item
        var balance = {};
        balance.date = $("#bal_Date").val();
        balance.amount = $("#bal_Amount").val();
        $.post("balance/edit",
               balance,
                confirmChange
                 );
    };

and here is the code in my controller.

   public void edit(Balance bal)
    {
        var dataContext = new DataDataContext();
        var balToEdit = dataContext.Balances.Single(b => b.Date == bal.Date);
        balToEdit.Amount = bal.Amount;
        dataContext.SubmitChanges();
    }

The problem is that the edit function in my controller is runing on page load.

Is it because I have the definition of my dialog buttons in $(document).ready, so its running the method or something.

Thanks

Answer 1

Remove the brackets on overWriteBalance

$(document).ready(function () {
        $("#dialog").dialog({ bgiframe: true, autoOpen: false, modal: true, buttons: { 'OK': overWriteBalance, 'NO': $(this).dialog('close') }
        });
    });

Because of the brackets overWriteBalance is being executed inline and the result assigned to the OK ‘event’ rather than being executed on the OK button click.