ASP.NET MVC / Jquery Unobtrusive Ajax, trying to check if element is loaded with Jquery after the html data is returned

Question

Using the jquery unobtrusive ajax library with ASP.NET MVC3, after clicking the ajax actionlink and when the response (html data) from the server is returned it automatically gets put into the designated target #id. In my case this data also carries elements for which the browser will then get the images. All I want to do is once this data is returned is to keep it hidden until all images are loaded, displaying a loading div in the meantime. The default loadingelementid and duration ajax options won't cut it in my case since it doesn't check if images have loaded and the div that is having its contents replaced contains the ajax.actionlink's. The problem is no $.load is executed for some reason when trying hook into the OnBegin, OnSuccess etc. events for the ajax response.

.ColumnContainer is inside #BodyContent and contains the images that need to be loaded.

 <a data-ajax="true" data-ajax-mode="replace" data-ajax-begin="OnBegin" data-ajax-success="OnSuccess"   data-ajax-update="#ContentBody" 
data-ajax-url="/Store/StoreContent/@Model.category/@(Model.PagingInfo.CurrentPage - 1)" href="/@Model.category/page/@(Model.PagingInfo.CurrentPage - 1)">  <img src="/Content/extremepc/leftarrow.png" /></a>






function OnBegin() {
$('.ColumnContainer').hide();
$('#LoadingLayer').css('display', 'inline-block');}


     function OnSuccess(data) {

    $('.ColumnContainer').hide();
    $('#LoadingLayer').css('display', 'inline-block');


    FinishIt();


    }

    function FinishIt() {

        $('.ColumnContainer').load(function () { alert('This code does not execute :( '); });

        $('#LoadingLayer').css('display', 'none');


    }

Answer 1

You could use the waitForImages plugin:

var onSuccess = function (result) {
    $('#result').html('loading...');
    $(result).waitForImages(function () {
        $('#result').html(this);
    });
};

Where you would have a DOM element to harbor the new DOM:

<div id="result"></div>

and in your AjaxOptions you would specify the OnSuccess event only, you should not use UpdateTargetId as it will immediately inject the new contents into the DOM without waiting for images to be loaded:

@Ajax.ActionLink("click me", "LoadAction", new AjaxOptions
{
    OnSuccess = "onSuccess",

})

Answer 2

I'm not quite sure what you are doing, but there are a couple of things I see wrong here that should be fixed to better help us understand your intent:

1. Your OnBegin and OnSuccess have the same code. Which effectively hides your ColumnContainer.
2. In FinishIt you are loading content into ColumnContainer (which is still hidden).
3. load expects the form .load(url, function) and probably fails for this reason.
4. If you are using unobtrusive ajax, why are you trying to .load?