How to block targetUpdateId using Blockui using ajax.actionLink or ajax.beginForm

Question

I want to develop an ajax pipeline such that whenever there is any ajax request made through ajax.beginform or ajax.actionLink it should start with my ajax.start function in which i can be able to read the targetupdateid so that i can shoew blockui and any developer should not bother about this ajax.start.I was trying to use this piece of code but itis not working

$(document).ajaxStart(function (xhr, setting) {
    console.log(this.activeElement);
    if (this.activeElement.type == 'submit') {
        activeElement = this.activeElement.form.attributes["data-ajax-update"].value;

    } else {
       / activeElement = this.activeElement.attributes["data-ajax-update"].value;
    }
    if (activeElement != null) {
        $(activeElement).blockUI();
    }

});

Any help would highly be appreciated.

Answer 1

Thanks for the solution but i want to block the UpdateTargetId which i resolve by adding a listener to the click .

  var activeElement,
    targetElement,
    callbackfunc = function (event) {
        activeElement = event.target || event.srcElement;
    };
window.addEventListener('click', callbackfunc, true);
$(document).ajaxStart(function () {if (activeElement !== null && activeElement !== undefined) {
        if (activeElement.type == 'submit') {
            targetElement = activeElement.form.attributes["data-ajax-update"].value;
        }
        if (activeElement.tagName == 'A') {
            targetElement = activeElement.attributes["data-ajax-update"].value;
        }
    }

    if (targetElement !== undefined || targetElement !== null) {
        $(targetElement).block({
            showOverlay: false,
            css: { border: '0px', width: '40px', height: '40px' },
            message: '<div class="progress"><div>'
        });
    }

});

Answer 2

try this

   <div id="mainbody">
   </div>  

    <div id="SomeId" style="display:none">

        // put you style to block the UI here 
        // or put loader image
        <img src="@Url.Content("~/Content/themes/base/images/ajax_loader_big.gif")" alt="" />
    </div>


    @Ajax.BeginForm("Index", "Search", new AjaxOptions { UpdateTargetId = "mainbody", HttpMethod = "Post", LoadingElementId = "SomeId" })

you can use Ajax-Loader or some css style with loader image which will block the UI. you need to paas that div Id in LoadingElementId which block the UI until ajax functionality is not completed.