I have made a JQuery Dialog, but for some reason the code which executes, when the 'ok' button is clicked is not functioning properly.

I would like there to be a “Confirm Dialog”, after a person clicks on the edit button which would fundamentally warn the user that they are going to edit something that perhaps they shouldn't be editing.

Furthermore, if the user clicks the “Ok” button, I want the edit input to be editable, whilst hiding the edit button.

Nevertheless, everything else is working the way it should. For example when users click on the close or cancel button, the dialog is closed correctly, and when users clicks on the ok button, the alert works, and the dialog is closed properly. So the only thing that isn't working correctly is the code between the alert and the dialog close.

function ShowDialogBox(title, content) {
        $("#lblMessage").html(content);
        $("#dialog").dialog({
            resizable: false,
            title: title,
            modal: true,
            width: '400px',
            height: 'auto',
            bgiframe: false,
            hide: { effect: 'fade', duration: 400 },
            buttons: [
                {
                    text: 'OK',
                    "class": 'showcss',
                    click: function () {
                        alert('hello');
                        $("#edit_input").attr("readonly", false);
                        $("#edit_input").focus();
                        $('#edit_button').hide();
                        $("#dialog").dialog('close');
                    }
                },
                {
                    text: 'Cancel',
                    "class": 'showcss',
                    click: function () {
                        $("#dialog").dialog('close');
                    }
                }
            ]
        });
    }

The problem is that the property name readOnly is case sentitive.

Code using prop instead of attr:

function ShowDialogBox(title, content) {
    $("#lblMessage").html(content);
    $("#dialog").dialog({
        resizable: false,
        title: title,
        modal: true,
        width: '400px',
        height: 'auto',
        bgiframe: false,
        hide: {
            effect: 'fade',
            duration: 400
        },
        buttons: [{
            text: 'OK',
                "class": 'showcss',
            click: function () {
                alert('hello');
                $("#edit_input").prop("readOnly", false);
                $("#edit_input").focus();
                $('#edit_button').hide();
                $("#dialog").dialog('close');
            }
        }, {
            text: 'Cancel',
                "class": 'showcss',
            click: function () {
                $("#dialog").dialog('close');
            }
        }]
    });
}