How to call a client side javascript function after a specific UpdatePanel has been loaded

Question

How is is possible to call client side javascript method after a specific update panel has been loaded?

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler) does not work for me because this will fire after ANY update panel finishes loading, and I can find no client side way to find which is the one

ScriptManager.GetCurrent(Page).AsyncPostBackSourceElementID AsyncPostBackSourceElementID does not work for me as this is a server side object, and i want Client Side

The ClientSide .Net framework must know which UpdatePanel it is updating in order to update the correct content. Surely there is a way to hook into this event?

Any help appreciated

Answer 1

You can hook the PageRequestManager.beginRequest event and inspect the BeginRequestEventArgs.postBackElement property.

Note that it doesn't really give you the UpdatePanel, but the control inside of the UpdatePanel. That should be good enough, though.

Edit: Even better, the PageRequestManager.pageLoaded event gives you PageLoadedEventArgs.panelsUpdated (and panelsCreated) properties.

Answer 2

Thanks - both good answers. I went with the client side script "pageloaded" in the end. That is a fairly buried method that google did not reveal to me. For those who are interested, this code works with FireBug to give a good demo of the PageLoaded method working to find the updated panels:

<script type="text/javascript">
     $(document).ready(function() {
      panelsLoaded = 1;
      Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded)
     });

     function PageLoaded(sender, args) {
      console.log("I have occured " + panelsLoaded++ + " times!");

      var panelsCreated = args.get_panelsCreated();
      for (var i = 0; i < panelsCreated.length; i++) {
       console.log("Panels Updating: " + panelsCreated[i].id);
      }

      var panelsUpdated = args.get_panelsUpdated();
      for (var i = 0; i < panelsUpdated.length; i++) {
       console.log("Panels Updating: " + panelsUpdated[i].id);
      }
     }
    </script>

Answer 3

I have a similar issue. None of the events of the PageRequestManager are firing for me. I attempted to wire up to the initialize, begin and end request methods but they do not seem to fire.

link href="Stylesheet1.css" rel="stylesheet" type="text/css" />

<title>Mirant</title>

<script language="javascript" type="text/javascript">

    var oldgridSelectedColor;

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_pageLoaded(pageLoaded);

    prm.add_beginRequest(beginRequest);

    prm.add_initializeRequest(Init):

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(setscrollPos);

    var postbackElement;



    // This Script is used to maintain Grid Scroll on Partial Postback



    function setMouseOverColor(element) {

        oldgridSelectedColor = element.style.backgroundColor;

        //element.style.backgroundColor = '#FF6699';

        element.style.cursor='hand';

        element.style.textDecoration='none';

    }



    function setMouseOutColor(element)

    {

        element.style.backgroundColor=oldgridSelectedColor;

        element.style.textDecoration='none';

    }

    function Init(sender, args) {

        alert('init');

    }



    function setscrollPos(sender, args) {

        alert('got it');

        $get("divScroll").scrollTop = $get("hdnScrollTop").value;

    }

    function beginRequest(sender, args) {

        postbackElement = args.get_postBackElement();

    }



    function pageLoaded(sender, args) {

        alert('got it');

        var updatedPanels = args.get_panelsUpdated();

        if (typeof (postbackElement) == "undefined") {

            alert('ERROR');

            return;

        }

        if (postbackElement.id.toLowerCase().indexOf('gridviewapprovals') > -1) {



            $get("divScroll").scrollTop = $get("hdnScrollTop").value;

        }

    }

    function scroll(pos) {



        $get('hdnScrollTop').value = pos;

        alert($get('hdnScrollTop').value)

    }

</script>

<style type="text/css">

     .WrapperDiv {

            width:800px;height:400px;border: 1px solid black;

        }        

        .WrapperDiv TH {

            position:relative;

        }

        .WrapperDiv TR 

        {

            /* Needed for IE */

            height:0px;

        } 



    .HeaderText

    {

        font-family: tahoma;

        font-size: medium;

        font-weight: bold;

        color: #0000FF;

    }

    .NormalText

    {

        font-family: tahoma;

        font-size: small;

        color: #0000FF;

    }

    .DetailText

    {

        font-family: tahoma;

        font-size: large;

        font-weight: bold;

        color: #0000FF;

    }

    .modalBackground {

        background-color:Gray;

         filter:alpha(opacity=70);

        opacity:0.7;

    }



    .ModalPopup

    {

        font-family: tahoma;

        background-color: #CCFFFF;

        border: thick groove #0000FF;

        padding: 4px;

        margin: 5px 10px 5px 10px;

    }

.HeaderFreez

{

position:relative ;

top:expression(this.offsetParent.scrollTop);

z-index: 10;

background-color:  Navy;

border-bottom: groove 4 Blue;

z-index:0;

color: White

}

    </style>

<form id="form1" runat="server" title="Assigned Approvals">

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True"  />



<asp:UpdatePanel ID="updatePanel1" runat="server" UpdateMode="Conditional">

<ContentTemplate>



<cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender2" 

    runat="server"

     TargetControlID="instructionsPanel" 

     VerticalSide="Top" VerticalOffset="0" 

     HorizontalSide="Right" HorizontalOffset="0" 

      ScrollEffectDuration=".1" >

</cc1:AlwaysVisibleControlExtender>  

<asp:Panel runat="server" ID="instructionsPanel" Width="100%" BackColor="White" 

        BorderColor="#3333CC" BorderStyle="Groove" BorderWidth="2px">

                    <span class="HeaderText">Instructions </span>

                    <br />

                    <span class="NormalText" >1. Select either Approve, Remove, or Change Access for 

                    each row.

                    <br />

                    2. If you selected Change, you must provide a description of the modification.

                    <br />

                    3. Click the Complete button at the bottom of the screen after you&#39;ve reviewed 

                    ALL of your approvals.

                    <br />

                    <span class="HeaderText"  />

                    <br />

                    NOTE: THIS DOES NOT REMOVE THE USER. THIS APPLICATION JUST SENDS NOTIFICATION TO 

                    THE APPLICATION OWNERS TO PERFORM YOUR SUGGESTED ACTIONS. 

                </asp:Panel>

<div align="center" style="padding: 4px; margin: 4px; width:auto; height:600px; overflow: visible;" runat="server">

       <table width="100%" style="margin-top: 145px;" runat="server">

        <tr>

            <td colspan="2">

                <asp:Panel runat="server" ID="spaceSaver" BackColor="Green"

                 BorderStyle="Groove" BorderWidth="4" BorderColor="Blue" >

                </asp:Panel>

            </td>

        </tr>

        <tr style="position: absolute; top: 10px">

            <td style="border: medium groove #0000FF; width: 50%; position: absolute;" class="NormalText" 

                bgcolor="#CCFFFF" >

                <input type="hidden" id="hdnScrollTop" runat="server" value="0" /> 

                <div id="divScroll"  style="width:500px;height:400px; overflow:scroll;"  onscroll="$get('hdnScrollTop').value = this.scrollTop;" runat="server" >



                    <asp:GridView ID="GridViewApprovals" runat="server" AutoGenerateColumns="False" 

                        DataSourceID="soaDataSource" DataKeyNames="Id" 

                        onrowdatabound="GridViewApprovals_RowDataBound" 

                        onselectedindexchanged="GridViewApprovals_SelectedIndexChanged" 

                        Width="100%"  AllowPaging="False">

                        <HeaderStyle CssClass="HeaderFreez" />



                        <Columns>

                            <asp:BoundField DataField="Id" HeaderText="Id" SortExpression="Id" />

                            <asp:BoundField DataField="AuditableApplicationName" HeaderText="Application" 

                                SortExpression="AuditableApplicationName" />

                            <asp:BoundField DataField="UserFullName" HeaderText="User" 

                                SortExpression="UserFullName" />

                            <asp:TemplateField HeaderText="Continue" SortExpression="ContinueAccess">

                                <ItemTemplate>

                                    <asp:CheckBox ID="cbContinueAccess" runat="server" 

                                        Checked='<%# Bind("ContinueAccess") %>' 

                                        oncheckedchanged="cbContinueAccess_CheckedChanged" />

                                </ItemTemplate>

                            </asp:TemplateField>

                            <asp:TemplateField HeaderText="Remove" SortExpression="RemoveAccess">

                                <ItemTemplate>

                                    <asp:CheckBox ID="cbRemoveAccess" runat="server" 

                                        Checked='<%# Bind("RemoveAccess") %>' 

                                        oncheckedchanged="cbRemoveAccess_CheckedChanged" />

                                </ItemTemplate>

                            </asp:TemplateField>

                            <asp:TemplateField HeaderText="Change" SortExpression="ChangeAccess">

                                <ItemTemplate>

                                    <asp:CheckBox ID="cbChangeAccess" runat="server" 

                                        oncheckedchanged="cbChangeAccess_CheckedChanged" CausesValidation="true" 

                                        />

                                </ItemTemplate>

                            </asp:TemplateField>

                        </Columns>

                        <SelectedRowStyle BackColor="#6699FF" />

                    </asp:GridView>

                    <asp:ObjectDataSource ID="soaDataSource" runat="server" 

                        SelectMethod="GetApprovals" 

                        TypeName="SOABuddy.Silverlight.Web.ApprovalItemsProvider">

                    </asp:ObjectDataSource>

                </div>

            </td>

            <td  style="border: medium groove #000080; width: 50%;" class="NormalText" valign="top";   >

                <cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" 

                        runat="server"

                         TargetControlID="authDetails" 

                         VerticalSide="Top" VerticalOffset="150" 

                         HorizontalSide="Right" HorizontalOffset="10"

                          ScrollEffectDuration=".1">

                    </cc1:AlwaysVisibleControlExtender>    



                <asp:Panel runat="server" ID="authDetails" style=" padding: 10px ; border: thick groove #0000FF; 

                     width: 400px; height: 380px; background-color: #CCFFFF; " 

                    BackColor="#CCFFFF" >

                      <table class="NormalText" id="tableDetails">

                        <tr>

                            <td style="overflow: auto; width: 15%;">

                                User Name:

                            </td>

                            <td class="DetailText" style="border: medium groove #0000FF; width: 30%;" >

                                <asp:Literal  ID="userName" runat="server"></asp:Literal>

                            </td>



                        </tr>

                        <tr>

                            <td>

                                User ID:</td>

                            <td class="DetailText">

                                <asp:Literal ID="userId" runat="server"></asp:Literal>

                            </td>

                        </tr>

                        <tr>

                            <td>

                                Application User ID:</td>

                            <td class="DetailText">

                                <asp:Literal ID="applicationUserId" runat="server"></asp:Literal>

                            </td>

                        </tr>

                        <tr>

                            <td>

                                Application Resource:</td>

                            <td class="DetailText">

                                <asp:Literal ID="applicationResource" runat="server"></asp:Literal>

                            </td>

                        </tr>

                        <tr>

                            <td>

                                Last Login:</td>

                            <td class="DetailText">

                                <asp:Literal ID="lastLogin" runat="server"></asp:Literal>

                            </td>

                        </tr>

                        <tr>

                            <td>

                                Roles</td>

                            <td class="NormalText">

                                <asp:ListBox ID="listBoxRoles" runat="server" Width="95%"></asp:ListBox>

                            </td>

                        </tr>

                        <tr >

                            <td>

                                &nbsp;</td>

                            <td class="NormalText">

                                &nbsp;</td>

                        </tr>

                        <tr style="height: 100px;">

                            <td>

                                Change Comments</td>

                            <td class="NormalText">

                                <asp:TextBox ID="tbChangeComments" runat="server" Height="100" 

                                    TextMode="MultiLine" Width="95%" BorderColor="White"></asp:TextBox>

                            </td>

                        </tr>

                    </table>

                </asp:Panel>

            </td>

        </tr>

        <tr>

            <td class="NormalText">    

                footer

                <asp:LinkButton ID="dummy" runat="server" ></asp:LinkButton>

                <cc1:ModalPopupExtender ID="Comments_ModalPopupExtender" runat="server" 

                        TargetControlID="dummy" 

                        CancelControlID="ButtonCommentsCancel"

                        OkControlID="ButtonCommentsOK" 

                        BackgroundCssClass="modalBackground"

                        PopupControlID="PanelComments" 

                        OnOkScript="saveComment"

                        DropShadow="true">



                    </cc1:ModalPopupExtender>

                <asp:Panel ID="PanelComments" runat="server" CssClass="ModalPopup"

                    BorderColor="#0033CC" BorderStyle="Groove" BorderWidth="4px"

                     Width="400"  Height="150">

                    <span class="HeaderText" />

                    Enter comments for the change request:<br />

                    <br />



                    <asp:TextBox ID="tbComments" runat="server" Height="54px" TextMode="MultiLine" 

                       class="NormalText" Width="97%"></asp:TextBox>

                    <br />

                    <br />

                    <asp:Button ID="ButtonCommentsOK" runat="server" Text="OK" 

                        onclick="ButtonCommentsOK_Click" Width="100px" UseSubmitBehavior="False" />

                    &nbsp;&nbsp;&nbsp;

                    <asp:Button ID="ButtonCommentsCancel" runat="server" Text="Cancel" 

                        Width="100px" />

                </asp:Panel>

            </td>

        </tr>

    </table>

</div>

</ContentTemplate>

</asp:UpdatePanel>



<%--<asp:Panel ID="PanelChangeComments" runat="server" CssClass="HeaderText" 

    Height="213px" Width="530px" Visible="False">

    Enter change comments:<br />

    <br />

    <asp:TextBox ID="tbEnterChangeComments" runat="server" Height="119px" 

        TextMode="MultiLine" Width="525px"></asp:TextBox>

    <br />

    <br />

    <span class="NormalText"></span>

       <asp:Button ID="btnChangeCommentsOK" runat="server" Text="OK" 

        onclick="btnChangeCommentsOK_Click" />

       <asp:Button ID="btnChangeCommentsCancel" runat="server" Text="Cancel" />

</asp:Panel>--%>



</form>

any ideas?

Answer 4

@lisa:

Try creating delegates for you functions first, and then add them to the event queue:

var pageLoaded = Function.createDelegate(this, pageLoaded);
prm.add_pageLoaded(pageLoaded);