Show yes/no instead of OK in confirmation dialog

Question

How can I show yes instead of OK in simple javascript confirmation dialog. I don't have more knowledge in javascript,so what is the easiest way to do this? I tried some of code but did not get result.

function doConfirm("Are you sure?", yesFn, noFn) {
    var confirmBox = $("#confirmBox");
    confirmBox.find(".message").text(msg);
    confirmBox.find(".yes,.no").unbind().click(function () {
        confirmBox.hide();
        confirmBox.prev().remove();
    });
    confirmBox.find(".yes").click(yesFn);
    confirmBox.find(".no").click(noFn);
    confirmBox.show();
    var overlay = $("<div>").css({
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: "rgba(255,255,255,0.5)"
    }).insertBefore(confirmBox);
}

$(function () {
    $("form").submit(function (e) {
        e.preventDefault();
        var form = this;
        doConfirm("Are you sure?", function yes() {
            form.submit();
        }, function no() {
           return false;
        });
    });
});

body { font-family: sans-serif; }
#confirmBox
{
    display: none;
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #aaa;
    position: fixed;
    width: 300px;
    left: 50%;
    margin-left: -150px;
    padding: 6px 8px 8px;
    box-sizing: border-box;
    text-align: center;
}
#confirmBox .button {
    background-color: #ccc;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #aaa;
    padding: 2px;
    text-align: center;
    width: 80px;
    cursor: pointer;
}
#confirmBox .button:hover
{
    background-color: #ddd;
}
#confirmBox .message
{
    text-align: left;
    margin-bottom: 8px;
}

<form method="post" action="">
    <input type="hidden" name="html" value="&lt;p&gt;Your data has been deleted&lt/p&gt;" />
    <input type="submit" value="Delete My Data" />
</form>
<div id="confirmBox">
    <div class="message"></div>
    <span class="button yes">Yes</span>
    <span class="button no">No</span>
</div>

Also tried this http://jsfiddle.net/Xtreu/269/

http://jsfiddle.net/Xtreu/270/ but still I don't get it. Need help!

Answer 1

you can use ajax call in script tag as follow:

            $('#divDeleteDialog').dialog({
                title: "Delete User",
                resizable: false,
                draggable: false,
                width: "400px",
                modal: true, // only this dialog is active
                buttons: {
                    "Yes": function () {
                        $('#txtDID').html('');
                        $.ajax({
                            url: "WebService.asmx/DeleteUser",
                            type: "post",
                            contentType: "application/json; charset=utf-8",
                            data:
                                JSON.stringify(
                                 { "id": $('#txtDID').val() }

                                ), // parameters
                            beforeSend: function () {
                                $('#loader').html('<img src="Images/loading.gif" />');
                            },

                            success: function (result) {
                                $('#loader').html('');

                            },
                            error: function () {
                                alert('error Deleteing user');
                            }
                        });
                        //  modify existing data 


                        $('#txtDID').val('');
                        $('#txtDFName').val('');
                        $('#txtDLName').val('');
                        $('#txtDEmail').val('');

                        $('#divDeleteDialog').dialog('close');
                        tr.fadeOut(2000);
                    },
                    "No": function () {
                        $('#divDeleteDialog').dialog('close');
                    }
                }
            });

the Dialog box to present data and two buttons(Yes,No):

   <div id="divDeleteDialog" style="display:none">
        <h4>  you are going to permenantly delete this user ?  </h4>
         <div class="form-group-sm">
            <label for="txtDID">ID</label>
            <input type="text" id="txtDID" class="form-control" disabled/>
        </div>
        <div class="form-group-sm">
            <label for="txtDFName">First Name</label>
            <input type="text" id="txtDFName" class="form-control" disabled/>
        </div>
        <div class="form-group-sm">
            <label for="txtDLName">Last Name</label>
            <input type="text" id="txtDLName" class="form-control" disabled/>
        </div>
         <div class="form-group-sm">
            <label for="txtDEmail">Email
            </label>
            <input type="text" id="txtDEmail" class="form-control" disabled/>
        </div>
              <h4>  are you sure?  </h4>
    </div>

Answer 2

In the #confirmBox html you should define your buttons with <A> like this :

<a class='button' href="#" title="some text for tooltip" onclick="doYesAction)"> Yes  </a>
<a class='button' href="#" title="some text for tooltip" onclick="doNoAction)"> No  </a>