BlockUI on button click with spinner

Question

I have that form that renders PartialView for me (on button click). All works ok:

        <div class="form-group">
            @Html.LabelFor(m => m.Code, new { id = "Code", @class = "col-md2 control-label" })
            <div class="col-md-12">
                @Html.TextAreaFor(m => m.Code, new { @class = "form-control", @cols = 100, @rows = 20 })
                @Html.ValidationMessageFor(m => m.Code, null, new { @class = "text-danger" })
            </div>
        </div>          
        <div class="form-group">
            <div class="col-md-offset-0 col-md-10">
                <br />
                <input id="submit" type="button" class="btn btn-default" value="Submit" />
            </div>
            <br /><br />
            <div class="result" id="Result">
            </div>
        </div>

@section Scripts {
<script>
    $(document).ready(function () {
        $("#submit").click(function () {
            var url = "@Url.Action("Controller", "Home")"
            var code = $("#Code").val();
            $("#Result").load(url, { code: code });
        });
    });
</script>

What i want to do, is on button click block ui until i dont get rendered PartialView that appear in div id="Result". How to block UI on button click until load func on script will render my PartialView and show spinner or progession bar until it will done? This script wont work:

<script>
    $(document).ready(function () {
        $("#submit").click(function () { 
            $.blockUI();
            var url = "@Url.Action("Controller", "Home")"
            var code = $("#Code").val();
            $("#Result").load(url, { code: code });
            $.unblockUI();
        });
    });
</script>

I dont want to use Ajax.BeginForm because cshtml above work pretty ok. If i ned use Ajax for it, i will need to change a lot from my html?

Can you please check this link (https://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery) — Nirav Vasoya, Apr 15 '19 at 07:10

score 2 · Accepted Answer · answered Apr 15 '19 at 07:09

Replace with below code. The function is a callback function that is executed when the request to the server is complete.

$("#Result").load(url, { code: code }, function(){
            $.unblockUI();
});

The callback function can have below additional parameters related to response.

function(String responseText, String textStatus, jqXHR jqXHR)
{
   //  Code to be executed after server response.
}

score 1 · Answer 2 · answered Apr 15 '19 at 07:26

Why not put an ajax call inside your click function?

JS

<script>
        $(document).ready(function () {
            $("#submit").click(function () { 
                   $.ajax({
                    url: "/Controller/action/", //to get the partial view
                    beforeSend: function() {
                    },
                    complete: function() {
                        alert("ajax complete event")

                    }
            });
        });
</script>

then block UI and add loading gif on ajax start/stop requests?

var $loading = $('#loadingDiv').hide(); //add your spinner via css
$(document)
  .ajaxStart(function () {
    $loading.show();
    $.blockUI(); 
  })
  .ajaxStop(function () {
    $loading.hide();
    $.unblockUI(); 
  });

CSS

 .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba( 255, 255, 255, .8 ) 50% 50% no-repeat;
        background-image: url('../../Content/ajax-loader.gif');
    }

    /* When the body has the loading class, we turn
    the scrollbar off with overflow:hidden */
    body.loading .modal {
        overflow: hidden;
    }

    /* Anytime the body has the loading class, our
    modal element will be visible */
    body.loading .modal {
        display: block;
    }

BlockUI on button click with spinner

2 Answers2