ASP.NET AJAX Postback Not Updating DOM?
-
Hello fellow coders, I am having a strange problem which I've never run in to previously. The Problem: I am getting back the new HTML in the AJAX postback, but the DOM / page isn't updating. How it happens:: Whenever a user clicks the button 'Add Comment' the the following code is called:
button_click(...) { ... IXmsComment cmt = new IXmsComment(); cmt.content = content; cmt.date = DateTime.Now; cmt.username = tbxUsername.Text; AddComment(cmt); if (divComments.Visible == false) divComments.Visible = true; updateComments.Update(); } ... AddComment(IXmsComment cmt) { HtmlGenericControl divComment = new HtmlGenericControl("div"); //divComment.ID = "divAddedComment"; HtmlGenericControl divAuthor = new HtmlGenericControl("div"); HtmlGenericControl divDate = new HtmlGenericControl("div"); HtmlGenericControl divDescrip = new HtmlGenericControl("div"); //Assign CSS Classes to Controls: divComment.Attributes.Add("class", "comment"); divAuthor.Attributes.Add("class", "commentAuthor"); divDate.Attributes.Add("class", "commentDate"); divDescrip.Attributes.Add("class", "commentDescription"); //Add Content to each Control: divAuthor.InnerText = cmt.username; //text only divDate.InnerText = cmt.date.ToString(); //text only divDescrip.InnerHtml = cmt.content; //html allowed //Add Controls to parent: divComment.Controls.Add(divAuthor); divComment.Controls.Add(divDate); divComment.Controls.Add(divDescrip); //add divComment to master div: divComments.Controls.Add(divComment); xms.Utils.scriptCalls.AnimateStatus(divComment.ClientID, updateComments); UpdateProgress1.Visible = false; }Here is the update panel html:<asp:UpdatePanel ID="updateComments" runat="server" UpdateMode="Conditional"> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" /> </Triggers> <ContentTemplate> <div id="divComments" class="commentCollection" runat="server"></div> <div id="divNewComment" class="newComment" runat="server" visible="false"> <fieldset> -
Hello fellow coders, I am having a strange problem which I've never run in to previously. The Problem: I am getting back the new HTML in the AJAX postback, but the DOM / page isn't updating. How it happens:: Whenever a user clicks the button 'Add Comment' the the following code is called:
button_click(...) { ... IXmsComment cmt = new IXmsComment(); cmt.content = content; cmt.date = DateTime.Now; cmt.username = tbxUsername.Text; AddComment(cmt); if (divComments.Visible == false) divComments.Visible = true; updateComments.Update(); } ... AddComment(IXmsComment cmt) { HtmlGenericControl divComment = new HtmlGenericControl("div"); //divComment.ID = "divAddedComment"; HtmlGenericControl divAuthor = new HtmlGenericControl("div"); HtmlGenericControl divDate = new HtmlGenericControl("div"); HtmlGenericControl divDescrip = new HtmlGenericControl("div"); //Assign CSS Classes to Controls: divComment.Attributes.Add("class", "comment"); divAuthor.Attributes.Add("class", "commentAuthor"); divDate.Attributes.Add("class", "commentDate"); divDescrip.Attributes.Add("class", "commentDescription"); //Add Content to each Control: divAuthor.InnerText = cmt.username; //text only divDate.InnerText = cmt.date.ToString(); //text only divDescrip.InnerHtml = cmt.content; //html allowed //Add Controls to parent: divComment.Controls.Add(divAuthor); divComment.Controls.Add(divDate); divComment.Controls.Add(divDescrip); //add divComment to master div: divComments.Controls.Add(divComment); xms.Utils.scriptCalls.AnimateStatus(divComment.ClientID, updateComments); UpdateProgress1.Visible = false; }Here is the update panel html:<asp:UpdatePanel ID="updateComments" runat="server" UpdateMode="Conditional"> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" /> </Triggers> <ContentTemplate> <div id="divComments" class="commentCollection" runat="server"></div> <div id="divNewComment" class="newComment" runat="server" visible="false"> <fieldset>Probably not the case but I see that your UpdatePanel is set to ConditionalUpdate referring to btnSubmit's onclick event. OnClick is set to "btnSubmit_Click" however your update logic is within "button_click"! Also, if above is not true, what exactly is Save() function doing which is being called onClientClick?
-
Probably not the case but I see that your UpdatePanel is set to ConditionalUpdate referring to btnSubmit's onclick event. OnClick is set to "btnSubmit_Click" however your update logic is within "button_click"! Also, if above is not true, what exactly is Save() function doing which is being called onClientClick?
Hi Student :) Thank you for the fast reply, alas I just 'shortcuted' the text to make it more readable, yes the button_Click method is actually btnSubmit_Click. I was just trying to follow the guidelines and make the code as small as possible. The update panel is set to conditional, and at the very end of the event handler you will notice I called
updateComments.Update();. I am using tinyMCE inside the update panel (<uc1:xmsRichEditor ID="xmsRichEditor1" runat="server" UseFullEditor="false" />) and in order to reset the textbox with the value inside tinyMCE I need to do the following before posting back to the server:document.getElementById("aspnetForm").elements["<%= xmsRichEditor1.UniqueID %>"].value = tinyMCE.get('<%= xmsRichEditor1.ClientID %>').getContent(); //this code works perfectly fine, has been for a whileIf you want to see this page in its live environment you can see it here: http://blabberjax.com/singlePage.aspx?id=3[^] The thing is that If I add one comment, the AJAX postback works, and the new comment is added in a new div inside of divComments (divComments.Controls.Add(divComment);). But after posting one comment, if I try to post another one the Response I receive from the server (using firebug to inspect it) has the new divComment in the response html, but the html is never actually injected into the DOM. To make sure that there was not some unhandled exception, I debugged the code. It works identically both times, and the Response from the server is identical each time (except the second time it includes a new div with the second comment) though the html in the update is not refreshed on the second postback.modified on Monday, November 9, 2009 7:45 PM
-
Hi Student :) Thank you for the fast reply, alas I just 'shortcuted' the text to make it more readable, yes the button_Click method is actually btnSubmit_Click. I was just trying to follow the guidelines and make the code as small as possible. The update panel is set to conditional, and at the very end of the event handler you will notice I called
updateComments.Update();. I am using tinyMCE inside the update panel (<uc1:xmsRichEditor ID="xmsRichEditor1" runat="server" UseFullEditor="false" />) and in order to reset the textbox with the value inside tinyMCE I need to do the following before posting back to the server:document.getElementById("aspnetForm").elements["<%= xmsRichEditor1.UniqueID %>"].value = tinyMCE.get('<%= xmsRichEditor1.ClientID %>').getContent(); //this code works perfectly fine, has been for a whileIf you want to see this page in its live environment you can see it here: http://blabberjax.com/singlePage.aspx?id=3[^] The thing is that If I add one comment, the AJAX postback works, and the new comment is added in a new div inside of divComments (divComments.Controls.Add(divComment);). But after posting one comment, if I try to post another one the Response I receive from the server (using firebug to inspect it) has the new divComment in the response html, but the html is never actually injected into the DOM. To make sure that there was not some unhandled exception, I debugged the code. It works identically both times, and the Response from the server is identical each time (except the second time it includes a new div with the second comment) though the html in the update is not refreshed on the second postback.modified on Monday, November 9, 2009 7:45 PM
Yeah I didn't think that was the case but I just wanted to make sure. Sometimes small things like that can cause major issues :) Also, I looked at your website ... nice design. Unfortunately I wasn't able to get much in terms of, behavior or test data, from the comment page as I wasn't able to add a comment at all. It seemed like it worked at first but then I kept getting a 404 error. I have never worked with tinMCE .... but if time allows I'll try to download tinyMCE and see if I can get it to work in a relatively simpler example similar to yours. Sorry wish I could be of more help. Good luck.
-
Yeah I didn't think that was the case but I just wanted to make sure. Sometimes small things like that can cause major issues :) Also, I looked at your website ... nice design. Unfortunately I wasn't able to get much in terms of, behavior or test data, from the comment page as I wasn't able to add a comment at all. It seemed like it worked at first but then I kept getting a 404 error. I have never worked with tinMCE .... but if time allows I'll try to download tinyMCE and see if I can get it to work in a relatively simpler example similar to yours. Sorry wish I could be of more help. Good luck.
Yup thats exactly the problem I'm having. The first time I submit a comment, it will add it to the page, after that, each sequential postback will send the correct response, but the html inside the update panel doesn't update...