code_junkie

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

Nov 12th, 2011
67
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.83 KB | None | 0 0
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. panelsLoaded = 1;
  4. Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded)
  5. });
  6.  
  7. function PageLoaded(sender, args) {
  8. console.log("I have occured " + panelsLoaded++ + " times!");
  9.  
  10. var panelsCreated = args.get_panelsCreated();
  11. for (var i = 0; i < panelsCreated.length; i++) {
  12. console.log("Panels Updating: " + panelsCreated[i].id);
  13. }
  14.  
  15. var panelsUpdated = args.get_panelsUpdated();
  16. for (var i = 0; i < panelsUpdated.length; i++) {
  17. console.log("Panels Updating: " + panelsUpdated[i].id);
  18. }
  19. }
  20. </script>
  21.  
  22. ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "foo", scriptText, true);
  23.  
  24. <title>Mirant</title>
  25.  
  26. <script language="javascript" type="text/javascript">
  27.  
  28. var oldgridSelectedColor;
  29.  
  30. var prm = Sys.WebForms.PageRequestManager.getInstance();
  31.  
  32. prm.add_pageLoaded(pageLoaded);
  33.  
  34. prm.add_beginRequest(beginRequest);
  35.  
  36. prm.add_initializeRequest(Init):
  37.  
  38. Sys.WebForms.PageRequestManager.getInstance().add_endRequest(setscrollPos);
  39.  
  40. var postbackElement;
  41.  
  42.  
  43.  
  44. // This Script is used to maintain Grid Scroll on Partial Postback
  45.  
  46.  
  47.  
  48. function setMouseOverColor(element) {
  49.  
  50. oldgridSelectedColor = element.style.backgroundColor;
  51.  
  52. //element.style.backgroundColor = '#FF6699';
  53.  
  54. element.style.cursor='hand';
  55.  
  56. element.style.textDecoration='none';
  57.  
  58. }
  59.  
  60.  
  61.  
  62. function setMouseOutColor(element)
  63.  
  64. {
  65.  
  66. element.style.backgroundColor=oldgridSelectedColor;
  67.  
  68. element.style.textDecoration='none';
  69.  
  70. }
  71.  
  72. function Init(sender, args) {
  73.  
  74. alert('init');
  75.  
  76. }
  77.  
  78.  
  79.  
  80. function setscrollPos(sender, args) {
  81.  
  82. alert('got it');
  83.  
  84. $get("divScroll").scrollTop = $get("hdnScrollTop").value;
  85.  
  86. }
  87.  
  88. function beginRequest(sender, args) {
  89.  
  90. postbackElement = args.get_postBackElement();
  91.  
  92. }
  93.  
  94.  
  95.  
  96. function pageLoaded(sender, args) {
  97.  
  98. alert('got it');
  99.  
  100. var updatedPanels = args.get_panelsUpdated();
  101.  
  102. if (typeof (postbackElement) == "undefined") {
  103.  
  104. alert('ERROR');
  105.  
  106. return;
  107.  
  108. }
  109.  
  110. if (postbackElement.id.toLowerCase().indexOf('gridviewapprovals') > -1) {
  111.  
  112.  
  113.  
  114. $get("divScroll").scrollTop = $get("hdnScrollTop").value;
  115.  
  116. }
  117.  
  118. }
  119.  
  120. function scroll(pos) {
  121.  
  122.  
  123.  
  124. $get('hdnScrollTop').value = pos;
  125.  
  126. alert($get('hdnScrollTop').value)
  127.  
  128. }
  129.  
  130. </script>
  131.  
  132. <style type="text/css">
  133.  
  134. .WrapperDiv {
  135.  
  136. width:800px;height:400px;border: 1px solid black;
  137.  
  138. }
  139.  
  140. .WrapperDiv TH {
  141.  
  142. position:relative;
  143.  
  144. }
  145.  
  146. .WrapperDiv TR
  147.  
  148. {
  149.  
  150. /* Needed for IE */
  151.  
  152. height:0px;
  153.  
  154. }
  155.  
  156.  
  157.  
  158. .HeaderText
  159.  
  160. {
  161.  
  162. font-family: tahoma;
  163.  
  164. font-size: medium;
  165.  
  166. font-weight: bold;
  167.  
  168. color: #0000FF;
  169.  
  170. }
  171.  
  172. .NormalText
  173.  
  174. {
  175.  
  176. font-family: tahoma;
  177.  
  178. font-size: small;
  179.  
  180. color: #0000FF;
  181.  
  182. }
  183.  
  184. .DetailText
  185.  
  186. {
  187.  
  188. font-family: tahoma;
  189.  
  190. font-size: large;
  191.  
  192. font-weight: bold;
  193.  
  194. color: #0000FF;
  195.  
  196. }
  197.  
  198. .modalBackground {
  199.  
  200. background-color:Gray;
  201.  
  202. filter:alpha(opacity=70);
  203.  
  204. opacity:0.7;
  205.  
  206. }
  207.  
  208.  
  209.  
  210. .ModalPopup
  211.  
  212. {
  213.  
  214. font-family: tahoma;
  215.  
  216. background-color: #CCFFFF;
  217.  
  218. border: thick groove #0000FF;
  219.  
  220. padding: 4px;
  221.  
  222. margin: 5px 10px 5px 10px;
  223.  
  224. }
  225.  
  226. background-color: Navy;
  227.  
  228. border-bottom: groove 4 Blue;
  229.  
  230. z-index:0;
  231.  
  232. color: White
  233.  
  234. </style>
  235.  
  236. <form id="form1" runat="server" title="Assigned Approvals">
  237.  
  238. <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" />
  239.  
  240.  
  241.  
  242. <asp:UpdatePanel ID="updatePanel1" runat="server" UpdateMode="Conditional">
  243.  
  244. <ContentTemplate>
  245.  
  246.  
  247.  
  248. <cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender2"
  249.  
  250. runat="server"
  251.  
  252. TargetControlID="instructionsPanel"
  253.  
  254. VerticalSide="Top" VerticalOffset="0"
  255.  
  256. HorizontalSide="Right" HorizontalOffset="0"
  257.  
  258. ScrollEffectDuration=".1" >
  259.  
  260. </cc1:AlwaysVisibleControlExtender>
  261.  
  262. <asp:Panel runat="server" ID="instructionsPanel" Width="100%" BackColor="White"
  263.  
  264. BorderColor="#3333CC" BorderStyle="Groove" BorderWidth="2px">
  265.  
  266. <span class="HeaderText">Instructions </span>
  267.  
  268. <br />
  269.  
  270. <span class="NormalText" >1. Select either Approve, Remove, or Change Access for
  271.  
  272. each row.
  273.  
  274. <br />
  275.  
  276. 2. If you selected Change, you must provide a description of the modification.
  277.  
  278. <br />
  279.  
  280. 3. Click the Complete button at the bottom of the screen after you&#39;ve reviewed
  281.  
  282. ALL of your approvals.
  283.  
  284. <br />
  285.  
  286. <span class="HeaderText" />
  287.  
  288. <br />
  289.  
  290. NOTE: THIS DOES NOT REMOVE THE USER. THIS APPLICATION JUST SENDS NOTIFICATION TO
  291.  
  292. THE APPLICATION OWNERS TO PERFORM YOUR SUGGESTED ACTIONS.
  293.  
  294. </asp:Panel>
  295.  
  296. <div align="center" style="padding: 4px; margin: 4px; width:auto; height:600px; overflow: visible;" runat="server">
  297.  
  298. <table width="100%" style="margin-top: 145px;" runat="server">
  299.  
  300. <tr>
  301.  
  302. <td colspan="2">
  303.  
  304. <asp:Panel runat="server" ID="spaceSaver" BackColor="Green"
  305.  
  306. BorderStyle="Groove" BorderWidth="4" BorderColor="Blue" >
  307.  
  308. </asp:Panel>
  309.  
  310. </td>
  311.  
  312. </tr>
  313.  
  314. <tr style="position: absolute; top: 10px">
  315.  
  316. <td style="border: medium groove #0000FF; width: 50%; position: absolute;" class="NormalText"
  317.  
  318. bgcolor="#CCFFFF" >
  319.  
  320. <input type="hidden" id="hdnScrollTop" runat="server" value="0" />
  321.  
  322. <div id="divScroll" style="width:500px;height:400px; overflow:scroll;" onscroll="$get('hdnScrollTop').value = this.scrollTop;" runat="server" >
  323.  
  324.  
  325.  
  326. <asp:GridView ID="GridViewApprovals" runat="server" AutoGenerateColumns="False"
  327.  
  328. DataSourceID="soaDataSource" DataKeyNames="Id"
  329.  
  330. onrowdatabound="GridViewApprovals_RowDataBound"
  331.  
  332. onselectedindexchanged="GridViewApprovals_SelectedIndexChanged"
  333.  
  334. Width="100%" AllowPaging="False">
  335.  
  336. <HeaderStyle CssClass="HeaderFreez" />
  337.  
  338.  
  339.  
  340. <Columns>
  341.  
  342. <asp:BoundField DataField="Id" HeaderText="Id" SortExpression="Id" />
  343.  
  344. <asp:BoundField DataField="AuditableApplicationName" HeaderText="Application"
  345.  
  346. SortExpression="AuditableApplicationName" />
  347.  
  348. <asp:BoundField DataField="UserFullName" HeaderText="User"
  349.  
  350. SortExpression="UserFullName" />
  351.  
  352. <asp:TemplateField HeaderText="Continue" SortExpression="ContinueAccess">
  353.  
  354. <ItemTemplate>
  355.  
  356. <asp:CheckBox ID="cbContinueAccess" runat="server"
  357.  
  358. Checked='<%# Bind("ContinueAccess") %>'
  359.  
  360. oncheckedchanged="cbContinueAccess_CheckedChanged" />
  361.  
  362. </ItemTemplate>
  363.  
  364. </asp:TemplateField>
  365.  
  366. <asp:TemplateField HeaderText="Remove" SortExpression="RemoveAccess">
  367.  
  368. <ItemTemplate>
  369.  
  370. <asp:CheckBox ID="cbRemoveAccess" runat="server"
  371.  
  372. Checked='<%# Bind("RemoveAccess") %>'
  373.  
  374. oncheckedchanged="cbRemoveAccess_CheckedChanged" />
  375.  
  376. </ItemTemplate>
  377.  
  378. </asp:TemplateField>
  379.  
  380. <asp:TemplateField HeaderText="Change" SortExpression="ChangeAccess">
  381.  
  382. <ItemTemplate>
  383.  
  384. <asp:CheckBox ID="cbChangeAccess" runat="server"
  385.  
  386. oncheckedchanged="cbChangeAccess_CheckedChanged" CausesValidation="true"
  387.  
  388. />
  389.  
  390. </ItemTemplate>
  391.  
  392. </asp:TemplateField>
  393.  
  394. </Columns>
  395.  
  396. <SelectedRowStyle BackColor="#6699FF" />
  397.  
  398. </asp:GridView>
  399.  
  400. <asp:ObjectDataSource ID="soaDataSource" runat="server"
  401.  
  402. SelectMethod="GetApprovals"
  403.  
  404. TypeName="SOABuddy.Silverlight.Web.ApprovalItemsProvider">
  405.  
  406. </asp:ObjectDataSource>
  407.  
  408. </div>
  409.  
  410. </td>
  411.  
  412. <td style="border: medium groove #000080; width: 50%;" class="NormalText" valign="top"; >
  413.  
  414. <cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1"
  415.  
  416. runat="server"
  417.  
  418. TargetControlID="authDetails"
  419.  
  420. VerticalSide="Top" VerticalOffset="150"
  421.  
  422. HorizontalSide="Right" HorizontalOffset="10"
  423.  
  424. ScrollEffectDuration=".1">
  425.  
  426. </cc1:AlwaysVisibleControlExtender>
  427.  
  428.  
  429.  
  430. <asp:Panel runat="server" ID="authDetails" style=" padding: 10px ; border: thick groove #0000FF;
  431.  
  432. width: 400px; height: 380px; background-color: #CCFFFF; "
  433.  
  434. BackColor="#CCFFFF" >
  435.  
  436. <table class="NormalText" id="tableDetails">
  437.  
  438. <tr>
  439.  
  440. <td style="overflow: auto; width: 15%;">
  441.  
  442. User Name:
  443.  
  444. </td>
  445.  
  446. <td class="DetailText" style="border: medium groove #0000FF; width: 30%;" >
  447.  
  448. <asp:Literal ID="userName" runat="server"></asp:Literal>
  449.  
  450. </td>
  451.  
  452.  
  453.  
  454. </tr>
  455.  
  456. <tr>
  457.  
  458. <td>
  459.  
  460. User ID:</td>
  461.  
  462. <td class="DetailText">
  463.  
  464. <asp:Literal ID="userId" runat="server"></asp:Literal>
  465.  
  466. </td>
  467.  
  468. </tr>
  469.  
  470. <tr>
  471.  
  472. <td>
  473.  
  474. Application User ID:</td>
  475.  
  476. <td class="DetailText">
  477.  
  478. <asp:Literal ID="applicationUserId" runat="server"></asp:Literal>
  479.  
  480. </td>
  481.  
  482. </tr>
  483.  
  484. <tr>
  485.  
  486. <td>
  487.  
  488. Application Resource:</td>
  489.  
  490. <td class="DetailText">
  491.  
  492. <asp:Literal ID="applicationResource" runat="server"></asp:Literal>
  493.  
  494. </td>
  495.  
  496. </tr>
  497.  
  498. <tr>
  499.  
  500. <td>
  501.  
  502. Last Login:</td>
  503.  
  504. <td class="DetailText">
  505.  
  506. <asp:Literal ID="lastLogin" runat="server"></asp:Literal>
  507.  
  508. </td>
  509.  
  510. </tr>
  511.  
  512. <tr>
  513.  
  514. <td>
  515.  
  516. Roles</td>
  517.  
  518. <td class="NormalText">
  519.  
  520. <asp:ListBox ID="listBoxRoles" runat="server" Width="95%"></asp:ListBox>
  521.  
  522. </td>
  523.  
  524. </tr>
  525.  
  526. <tr >
  527.  
  528. <td>
  529.  
  530. &nbsp;</td>
  531.  
  532. <td class="NormalText">
  533.  
  534. &nbsp;</td>
  535.  
  536. </tr>
  537.  
  538. <tr style="height: 100px;">
  539.  
  540. <td>
  541.  
  542. Change Comments</td>
  543.  
  544. <td class="NormalText">
  545.  
  546. <asp:TextBox ID="tbChangeComments" runat="server" Height="100"
  547.  
  548. TextMode="MultiLine" Width="95%" BorderColor="White"></asp:TextBox>
  549.  
  550. </td>
  551.  
  552. </tr>
  553.  
  554. </table>
  555.  
  556. </asp:Panel>
  557.  
  558. </td>
  559.  
  560. </tr>
  561.  
  562. <tr>
  563.  
  564. <td class="NormalText">
  565.  
  566. footer
  567.  
  568. <asp:LinkButton ID="dummy" runat="server" ></asp:LinkButton>
  569.  
  570. <cc1:ModalPopupExtender ID="Comments_ModalPopupExtender" runat="server"
  571.  
  572. TargetControlID="dummy"
  573.  
  574. CancelControlID="ButtonCommentsCancel"
  575.  
  576. OkControlID="ButtonCommentsOK"
  577.  
  578. BackgroundCssClass="modalBackground"
  579.  
  580. PopupControlID="PanelComments"
  581.  
  582. OnOkScript="saveComment"
  583.  
  584. DropShadow="true">
  585.  
  586.  
  587.  
  588. </cc1:ModalPopupExtender>
  589.  
  590. <asp:Panel ID="PanelComments" runat="server" CssClass="ModalPopup"
  591.  
  592. BorderColor="#0033CC" BorderStyle="Groove" BorderWidth="4px"
  593.  
  594. Width="400" Height="150">
  595.  
  596. <span class="HeaderText" />
  597.  
  598. Enter comments for the change request:<br />
  599.  
  600. <br />
  601.  
  602.  
  603.  
  604. <asp:TextBox ID="tbComments" runat="server" Height="54px" TextMode="MultiLine"
  605.  
  606. class="NormalText" Width="97%"></asp:TextBox>
  607.  
  608. <br />
  609.  
  610. <br />
  611.  
  612. <asp:Button ID="ButtonCommentsOK" runat="server" Text="OK"
  613.  
  614. onclick="ButtonCommentsOK_Click" Width="100px" UseSubmitBehavior="False" />
  615.  
  616. &nbsp;&nbsp;&nbsp;
  617.  
  618. <asp:Button ID="ButtonCommentsCancel" runat="server" Text="Cancel"
  619.  
  620. Width="100px" />
  621.  
  622. </asp:Panel>
  623.  
  624. </td>
  625.  
  626. </tr>
  627.  
  628. </table>
  629.  
  630. </div>
  631.  
  632. </ContentTemplate>
  633.  
  634. </asp:UpdatePanel>
  635.  
  636.  
  637.  
  638. <%--<asp:Panel ID="PanelChangeComments" runat="server" CssClass="HeaderText"
  639.  
  640. Height="213px" Width="530px" Visible="False">
  641.  
  642. Enter change comments:<br />
  643.  
  644. <br />
  645.  
  646. <asp:TextBox ID="tbEnterChangeComments" runat="server" Height="119px"
  647.  
  648. TextMode="MultiLine" Width="525px"></asp:TextBox>
  649.  
  650. <br />
  651.  
  652. <br />
  653.  
  654. <span class="NormalText"></span>
  655.  
  656. <asp:Button ID="btnChangeCommentsOK" runat="server" Text="OK"
  657.  
  658. onclick="btnChangeCommentsOK_Click" />
  659.  
  660. <asp:Button ID="btnChangeCommentsCancel" runat="server" Text="Cancel" />
  661.  
  662. </asp:Panel>--%>
  663.  
  664.  
  665.  
  666. </form>
  667.  
  668. var pageLoaded = Function.createDelegate(this, pageLoaded);
  669. prm.add_pageLoaded(pageLoaded);
Add Comment
Please, Sign In to add comment