How do I Disable the Cancel button in MODAL View

Question

Please I need assistance to hide/disable the Cancel Button on Modal View.

It should show on the modal popup when the {Delete} Button is pressed. As shown below:

When the Delete Button is pressed it will activate a Modal Popup as shown below.

As soon as [Yes!] is clicked the [Cancel] button must disappear while the text in the [Yes] button changes to [Deleting...] and is disabled to disallow the User from re-clicking it again as shown below.

Please,

1. how do I remove the Cancel button circled in red above? I have tried so many options including giving the button an id which I tried to hide in jQuery but it still remains.
2. how do I make the text "Do you really want to Delete Debit Note №" to be a blinking alert to the User?
3. The Information Icon before the text Do you really want to Delete Debit Note № is now showing well, how do I make it more attractive?

Below are my HTLM and Javascript.

  <button type="button" class="btn btn-info btn-danger" hide-footer="true" data-backdrop="static" data-keyboard="false" style="float:right;" title="Deletion Confirmation" data-toggle="modal" data-target="#deleteTrans">Delete</button>


    <div class="row">
        <div class="col-md-12 col-sm-8 col-xs-12 col-xs-offset-0">
                <div id="deleteTrans" tabindex="-1" role="dialog" aria-labelledby="dialog3Label" aria-hidden="true" class="modal fade">
                    <div class="modal-dialog">
                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title">Deletion Confirmation</h4>
                            </div>
                                @using (Html.BeginForm("PrintDebitNote", "Utilities", FormMethod.Post))
                                { 
                                <div class="modal-body">
                                    <div class="alert alert-warning" role="alert">
                                        <div class="alert-warning">
                                            @if (ViewBag.ActionType != "Done")
                                            {
                                                <span class="glyphicon glyphicon-warning-sign"></span> <strong> Do you really want to delete this?</strong>
                                            }
                                            else
                                            {
                                                <span class="glyphicon glyphicon-warning-sign"></span> <strong> Are you Done?</strong>
                                            }
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="modal-footer">
                                    <button type="button" id="cancelButton"  class="btn btn-primary" data-dismiss="modal">Cancel</button>
                                     <button type="submit" id="submitButton" class="btn btn-danger"   onclick="return DisplayProgressMessage(this, 'Deleting...');">Yes</button>  
                                      <div class="submit-progress hidden">
                                        <i class="fa fa-2x fa-spinner fa-spin"></i>
                                        <label>Wait while deleting @ViewBag.DebitNoteNo...</label>
                                    </div>
                                </div>
                                }
                        </div>
                    </div>
                </div>
          </div>
       </div>




       Javascript

        function DisplayProgressMessage(ctl, msg) {
            //Turn off the "Save" button and change text
            $(ctl).prop("disabled", true).text(msg);
            //Hide the CalcelButton on Click
            $("#cancelButton").hide();
            // Wrap in setTimeout so the UI can update the spinners
            $(".submit-progress").removeClass("hidden");
            //submit the form.
            setTimeout(function () {
                $("form").submit();
            }, 2000);

           return true;
        }

Thank you so much for your anticipated assistance

Best regards,

Abiodunajai

Answer 1

Hi @abiodunajai,

how do I remove the Cancel button circled in red above? I have tried so many options including giving the button an id which I tried to hide in jQuery but it still remains.

I tested the code you provided so far and the functionality to hide the cancel button works.

how do I make the text "Do you really want to Delete Debit Note №" to be a blinking alert to the User?

You can use the following code:

<div id="txtblnk" style="font-size:25px"><strong> Do you really want to delete this?</strong></div>

 $(function () {
        blinkeffect('#txtblnk');
    })
    function blinkeffect(selector) {
        $(selector).fadeOut('slow', function () {
            $(this).fadeIn('slow', function () {
                blinkeffect(this);
            });
        });
    }

The Information Icon before the text Do you really want to Delete Debit Note № is now showing well, how do I make it more attractive?

You can use Bootstrap Alerts.

 <div class="alert alert-danger">
                                            <span class="glyphicon glyphicon-warning-sign"></span> 
                                        </div>

The following are all the codes and renderings I tested.

<button type="button" class="btn btn-info btn-danger" hide-footer="true" data-backdrop="static" data-keyboard="false" style="float:right;" title="Deletion Confirmation" data-toggle="modal" data-target="#deleteTrans">Delete</button>


<div class="row">
    <div class="col-md-12 col-sm-8 col-xs-12 col-xs-offset-0">
        <div id="deleteTrans" tabindex="-1" role="dialog" aria-labelledby="dialog3Label" aria-hidden="true" class="modal fade">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Deletion Confirmation</h4>
                    </div>
                    @using (Html.BeginForm("PrintDebitNote", "Utilities", FormMethod.Post))
                    {
                        <div class="modal-body">
                            <div class="alert alert-warning" role="alert">
                                <div class="alert-warning">
                                    @if (ViewBag.ActionType != "Done")
                                    {
                                        <div class="alert alert-danger">
                                            <span class="glyphicon glyphicon-warning-sign"></span> 
                                        </div>
                                            <div id="txtblnk" style="font-size:25px"><strong> Do you really want to delete this?</strong></div>
                                        }
                                        else
                                        {
                                            <span class="glyphicon glyphicon-warning-sign"></span> <strong> Are you Done?</strong>
                                        }
                                </div>
                                </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" id="cancelButton" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                            <button type="submit" id="submitButton" class="btn btn-danger" onclick="return DisplayProgressMessage(this, 'Deleting...');">Yes</button>
                            <div class="submit-progress hidden">
                                <i class="fa fa-2x fa-spinner fa-spin"></i>
                                <label>Wait while deleting @ViewBag.DebitNoteNo...</label>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
    function DisplayProgressMessage(ctl, msg) {
        //Turn off the "Save" button and change text
        $(ctl).prop("disabled", true).text(msg);
        //Hide the CalcelButton on Click
        $("#cancelButton").hide();
        // Wrap in setTimeout so the UI can update the spinners
        $(".submit-progress").removeClass("hidden");
        //submit the form.
        setTimeout(function () {
            $("form").submit();
        }, 2000);

        return true;
    }
    $(function () {
        blinkeffect('#txtblnk');
    })
    function blinkeffect(selector) {
        $(selector).fadeOut('slow', function () {
            $(this).fadeIn('slow', function () {
                blinkeffect(this);
            });
        });
    }
</script>

Best regards,

Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

you are doing two submits. turn your submit button to a button

<button type="button" id="submitButton" class="btn btn-danger" onclick="return DisplayProgressMessage(this, 'Deleting...');">Yes</button>