Как я могу выполнить JavaScript из моего кода после того, как моя UpdatePanel закончила загрузку своих элементов DOM?

Question

У меня есть UpdatePanel с ретранслятором, который привязывается после того, как пользователь добавляет к нему элемент через модальное всплывающее окно.

Когда они нажимают кнопку, чтобы добавить новую строку в ретранслятор,code-behind выглядит примерно так:

protected void lbtnAddOption_Click(object sender, EventArgs e)
{               
    SelectedOption = new Option()
    {
        Account = txtAddOptionAccountNumber.Text,
        Margin = chkAddOptionMargin.Checked,
        Symbol = txtAddOptionSymbol.Text,
        Usymbol = txtAddOptionUsymbol.Text,
     };

     Presenter.OnAddOption(); // Insert the new item
     RefreshOptions(); // Pull down and re-bind all the items
     mpeAddOptionDialog.Hide(); // Hide the modal 

     // ... Make call to jQuery scrollTo() method here?

}

Это отлично работает, и новая строка будет быстро отображаться через UpdatePanel.

Однако часто бывают сотни строк и там, где новыеодин добавляется в зависимости от текущего используемого столбца сортировки.

Итак, я хотел использовать это как шанс для использования плагина jQuery ScrollTo .Я знаю, что если я дам ему идентификатор моего переполненного контейнера div и идентификатор элемента внутри него, он будет плавно прокручиваться прямо к недавно добавленной строке пользователя.

Однако есть две проблемы:

1. Мне нужно найти соответствующую строку, чтобы я мог получить для нее ClientID.
2. Мне нужно выполнить фрагмент кода jQuery из моего кода, чтобы мой недавно обновленный ретранслятор прокрутился до правой строки.

Я решил # 1.У меня есть надежный метод, который будет производить ClientID новой добавленной строки.

Однако проблема № 2 оказывается сложной.Я знаю, что могу просто позвонить ScriptManager.RegisterStartupScript() из моего кода и он выполнит JavaScript на моей странице.

Проблема, с которой я столкнулся, заключается в том, что кажется, что он выполняет этот кусок JavaScript раньше (Я догадываюсь) недавно обновленные элементы DOM полностью загружены.Так что, хотя я передаю соответствующую строку jQuery для прокрутки до нужного элемента, для меня это ошибка, потому что он пока не может найти этот элемент.

Вот строка, которую я используюв конце описанного выше метода:

     string clientID = getClientIdOfNewRow();  
     ScriptManager.RegisterStartupScript(this, typeof(Page), "ScrollScript", String.Format("$(\"#optionContainer\").scrollTo(\"{0}\", 800);", clientID), true);

Что мне нужно сделать, чтобы я мог убедиться, что эта строка JavaScript не вызывается до тех пор, пока страница с UpdatePanel действительно не будет готова?

Answer 1

Если материал, который нужно обработать, находится на панели обновлений, то вам нужно запустить JS после загрузки этой панели. Я использую add_endRequest для этого. Это ниже взломано от чего-то более сложного. Он запускается один раз на готовом документе, но устанавливает обработчик end ajax, который запускается каждый раз, когда обновляется ваша панель обновлений. И к тому времени, когда он срабатывает, это все для вас.

var prm = Sys.WebForms.PageRequestManager.getInstance();
jQuery(document).ready(function () {
    prm.add_endRequest(EndRequestHandler);
});

function EndRequestHandler(sender, args) {
  // do whatever you need to do with the stuff in the update panel.
}

Очевидно, что вы можете добавить это из кода, если хотите.

Answer 2

Вы можете использовать событие Sys.Application.load , которое возникает после загрузки всех сценариев и создания и инициализации объектов в приложении.

Таким образом, ваш код будетбыть:

string clientID = getClientIdOfNewRow();         
ScriptManager.RegisterStartupScript(this, typeof(Page)
    ,"ScrollScript"
    ,String.Format("Sys.Application.add_load(function(){{$(\"#optionContainer\").scrollTo(\"{0}\", 800);}});"
    , clientID)
    , true);