UpdatePanel Only Works on Initial Partial Postback
Hello,
I have a Master Page that has various placeholders that loads user controls for different content. A header would be one and the main page content another. Within the main content user control, it loads various other user controls based on what page is needing displayed.
Master Page
<%@ Master Language="C#" AutoEventWireup="true" EnableViewState="true" CodeBehind="Admin.Master.cs" Inherits="SitefinityWebApp.Admin" %><%@ Import Namespace="SitefinityWebApp.Model.Session" %>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"></head><body> <form id="form1" runat="server">
<!-- start of header --> <section id="header"> <asp:ContentPlaceHolder ID="cph_header" runat="server" /> </section>
<!-- Site Content --> <section id="contentWrapper"> <asp:ContentPlaceHolder ID="cph_content" runat="server" /> </section> </form></body></html>
The following page gets loaded into content
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CorpPendingApproval.ascx.cs" Inherits="SitefinityWebApp.userctrls.Admin.Dashboard.Corporate.CorpPendingApproval" %><asp:UpdatePanel ID="PendingApprovalList" UpdateMode="Always" runat="server"> <ContentTemplate> <asp:HiddenField ID="hf_currentPage" runat="server" value="0" /> <asp:HiddenField ID="hf_totalResults" runat="server" value="0" /> <h2>Pending Approvals</h2> <div class="corporateAdminPagination"> <a ID="topPageBack" class="leftArrow" runat="server" onserverclick="PageBack"></a> <asp:Label ID="topCurrentPageInfo" Text="" runat="server" /> <a ID="topPageForward" class="rightArrow" runat="server" onserverclick="PageForward"></a> </div> <!-- Table Start --> <table class="corporateAdminPendingApprovals" cellspacing="0"> <!-- Table Heading --> <!-- Example Binding Setup --> <asp:Repeater ID="LowPriority" runat="server"> <ItemTemplate> <tr class="pendingApprovalListItem" <!-- Repeater Bindings Here --> </tr> </ItemTemplate> </asp:Repeater> <!-- Table Footer --> <tr class="pendingApprovalsFooter"> <!-- Footer Pagination --> <td width="221" class="corporateAdminPagination"> <a ID="bottomPageBack" class="leftArrow" runat="server" onserverclick="PageBack"></a> <asp:Label ID="bottomCurrentPageInfo" Text="" runat="server" /> <a ID="bottomPageForward" class="rightArrow" runat="server" onserverclick="PageForward"></a> </td> </tr> </table> <!-- Table End --> </ContentTemplate></asp:UpdatePanel>Code behind for the above user control
namespace SitefinityWebApp.userctrls.Admin.Dashboard.Corporate public partial class CorpPendingApproval : System.Web.UI.UserControl public int CurrentPage get return int.Parse(hf_currentPage.Value); set hf_currentPage.Value = value.ToString(); public int TotalResults get return int.Parse(hf_totalResults.Value); set hf_totalResults.Value = value.ToString(); //Sets default page values for pagination results protected void Page_Load(object sender, EventArgs e) if (!IsPostBack) CurrentPage = 0; TotalResults = GetResultSetCount(); PopulatePageInfoTexts(); PopulatePageWithResultSet(); //Returns the count of the entire result set private int GetResultSetCount() //Returns List<T> //Omitted for brevity //Moves the pagination back one page protected void PageBack(object sender, EventArgs e) if (CurrentPage > 0) CurrentPage--; PopulatePageInfoTexts(); PopulatePageWithResultSet(); //Moves the pagination forward one page protected void PageForward(object sender, EventArgs e) if (CurrentPage < (int)(TotalResults / ((CurrentPage + 1) * 20))) CurrentPage++; PopulatePageInfoTexts(); PopulatePageWithResultSet(); //Displays info about number of results/pages for pagination private void PopulatePageInfoTexts() //Logic omitted for brevity //Displays result set based on current viewing page private void PopulatePageWithResultSet() //Logic omited for brevity //Bind to repeaters TopPriority.DataSource = topPriority; TopPriority.DataBind(); Basically, when a pageForward or pageBack button is clicked, it changes the value in the hidden fields, and request data from DB with a new offset, and binds that data to the Repeater in the UpdatePanel. I expect it call the server, increment the current page, and display the new results. This only works the first time any button is clicked. After that, the HTML is returned correctly when looking at the network calls and responses in Chrome's DevTools, but the HTML never gets re-rendered on the page after the first post back...?
There is an error that is thrown when this starts happening, and it is from jquery.cookie.js. The include for this file is no where to be found in the entire project, so I am guessing SiteFinity includes it somewhere in one of the bundled DLLs. I don't know if this is the root cause of the problem, but I expect it has something to do with it. The following is the error that shows up in DevTools
Uncaught TypeError: undefined is not a function: Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl09_TSM&compress=0&_TSM_CombinedScripts_=%3b%3bT…:559_checkBrowseAndEditState:function()browseAndEditState=jQuery.cookie(this._browseAndEditCookieName);How exactly is one supposed to use an UpdatePanel within Sitefinity with Partial PostBacks? This example works fine in a local environment...?
Hello Daniel,
I can see that the exception is thrown from a control named BrowseAndEditPageMenu. What version of Sitefinity are you running and where did you put the user control? Is it inside of another widget?
Regards,
Boyko Karadzhov
Telerik
Its just a master page, with usercontrols inside. No widgets. I figured out the problem to any future visitors who might have the same problem, it was that jquery.cookie was not defined anywhere in the project, but called in certain places. I just added the js plugin into the master page and everything now works fine.
Hi Daniel,
Thank you for the response.
I'm glad that you have found a solution. The control should have taken care of all of its js dependencies in most scenarios.
Regards,
Boyko Karadzhov
Telerik