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>