Changes to label and image in updatepanel are lost after ajax call

Question

0.00/5 (No votes)

See more:

I am working on ASP.NET web page. The page has a UpdatePanel and a label, image and a link button inside its content template. On linkbutton, I am making an ajax call and based on its response, I am updating the text of label and image url. The issue is that after successful response, the label and image does gets updated on the page for a blink of a second but reverts back to original state after. I am not able to debug why the label and image are not retaining their changes. I thought if updating panel is an issue so I used __doPostBack(<<panel id="">>) but still not working

Any help would be appreciated

TIA

What I have tried:

<asp:ScriptManager ID="MainScriptManager" runat="server" />
	<asp:UpdatePanel runat="server" ID="SavePanel" UpdateMode="Conditional">
	   <Triggers>
	     <asp:AsyncPostBackTrigger ControlID="chkSave" EventName="CheckedChanged" />
	   </Triggers>
	   <ContentTemplate>
	     <div>
		<table>
		  <tr><td><asp:CheckBox ID="chkSave" AutoPostBack="true" runat="server" Text="Save" OnCheckedChanged="chkSaveSearch_CheckedChanged"/></td></tr>
		  <tr>
		     <td>
			<div>
			  <div class="select">														 
                            <asp:Image ID="imgSave" runat="server" ImageUrl="" style="margin-left:10px;" /><asp:Label runat="server" Text="" ID="lblSaveResult"/>
			    <asp:LinkButton ID="lnkSave" runat="server" Text="Save" OnClientClick="Save();"></asp:LinkButton						 
                          </div>
			</div>
		     </td>
		 </tr>
	       </table>
	    </div>
	</ContentTemplate>
</asp:UpdatePanel>

JS Save();

function Save() { 
			$.ajax({
				type: "POST",
				url: "some url", 
				data: 'some arguments'  
				contentType: "application/json; charset=utf-8",
				dataType: "json",
				success: OnSuccess,
				failure: function (response) {
					alert(response);
				}
			});
		}

		function OnSuccess(response) {
			var msg = $("#<%=lblSaveResult.ClientID%>")[0];
			msg.style.display = "block";
			var img = $("#<%=imgSave.ClientID%>")[0];
			switch (response.d) {
				case "1":
					msg.style.color = "green";
					msg.innerHTML = "Saved!";
					img.src = <<some image source>>
                    __doPostBack("<%=SavePanel.UniqueID %>", "");
					break;
			}
		}

Posted 3-Dec-20 16:22pm

Ankush Khurana

Updated 3-Dec-20 22:13pm

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2020-12-03T22:13:00

Consider the sequence of events:

You click the LinkButton;
You fire off an AJAX request, which will run asynchronously, and return control to the browser;
The LinkButton fires a partial postback to update the UpdatePanel;
After a few milliseconds:
- Your AJAX request completes, changes the status message, and triggers another postback;
- The UpdatePanel updates with the HTML returned by the server;
Some time after that, the second postback completes, and the contents of the UpdatePanel are once again replaced with the content returned by the server;

Since you are only changing the status label on the client side, every time your UpdatePanel updates, those changes are lost.

It would seem that you don't want either postback to occur. Remove the _doPostBack call from your OnSuccess function, and either cancel the click event on the LinkButton, or replace it with a regular <a> element which doesn't cause a postback:

ASP.NET

<div class="select">
    <asp:Image ID="imgSave" runat="server" ImageUrl="" style="margin-left:10px;" />
    <asp:Label runat="server" Text="" ID="lblSaveResult"/>
    <a href="#" onclick="Save(); return false;">Save</a>
</div>