ASP.NET MVC / Jquery Ненавязчивый Ajax, пытающийся проверить, загружен ли элемент с Jquery после того, как html-данные возвращены - PullRequest
Новая
       87

ASP.NET MVC / Jquery Ненавязчивый Ajax, пытающийся проверить, загружен ли элемент с Jquery после того, как html-данные возвращены

1 голос
/ 22 февраля 2012

Используя ненавязчивую библиотеку ajax jquery с ASP.NET MVC3, после щелчка на ссылке действия ajax и при возврате ответа (html-данных) с сервера он автоматически помещается в назначенный целевой #id.В моем случае эти данные также содержат элементы, для которых браузер получит изображения.Все, что я хочу сделать, это как только эти данные будут возвращены, это сохранить их скрытыми до тех пор, пока не будут загружены все изображения, отображая при этом загрузочный div.Параметры ajax загрузки по умолчанию и продолжительности в моем случае не уменьшат его, так как он не проверяет, загружены ли изображения, а div, содержимое которого заменяется, содержит ссылку ajax.actionlink.Проблема в том, что $ .load не выполняется по какой-то причине при попытке подключиться к событиям OnBegin, OnSuccess и т. Д. Для ответа ajax.

.ColumnContainer находится внутри #BodyContent и содержит изображения, которые должны бытьзагружен. 

 <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');


    }

Ответы [ 2 ]

3 голосов
/ 22 февраля 2012

Вы можете использовать плагин waitForImages : 

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

Где у вас будет элемент DOM, чтобы скрыть новый DOM: 

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

и в ваших AjaxOptions вы указали бы только событие OnSuccess, вы не должны использовать UpdateTargetId, поскольку он сразу же вставит новое содержимое в DOM, не дожидаясь загрузки изображений: 

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

})
0 голосов
/ 22 февраля 2012

Я не совсем уверен, что вы делаете, но есть несколько вещей, которые я вижу здесь неправильно, которые должны быть исправлены, чтобы лучше помочь нам понять ваши намерения:

  1. Your OnBegin и OnSuccessиметь тот же код.Который эффективно скрывает ваш ColumnContainer.
  2. В FinishIt вы загружаете контент в ColumnContainer (который все еще скрыт).
  3. load ожидает форму .load (url, function) и, вероятно, по этой причине дает сбой..
  4. Если вы используете ненавязчивый AJAX, почему вы пытаетесь .load?
...