Updatepanel and Page IsDirty Check

Hi, I m new to ajax and .net 2.0. I have an update panel with several textboxes on it. If I change the value of one of the textboxes, I am calling the textbox changed event and populating a bunch of labels in the panel.

protectedvoid txtPNumber_TextChanged(object sender,EventArgs e)

This is all located on one tab. On the tab changed event I am calling some javascript to see if there have been any changes to the data on the page. It is comparing the current value of the textboxes with the default value like so:

var oElem = oForm.elements[i];

if ("text" == oElem.type ||"TEXTAREA" == oElem.tagName)

{

if (oElem.value != oElem.defaultValue) return true; etc....

This works fine for all changes to data on any tab except for the above case where I am running the TextChanged event with the update panel. As I said, I am new to update panels and this is also an existing application I have been brought in to fix bugs on. I am unsure what to do about this. I was hoping I could somehow access the update panel in the javascript, but I don't see if when I dd an alert naming all elements on the form. I also tried a hidden field on the tab - outside the update panel, setting it in the TextChanged event and checking it in the javascript, but that isn't working either.

Any help or even pointing me in another direction would be appreciated. Hope everyone out there is having an easy day!

Sorry! It is in

window.onbeforeunload =function (oEvent)

that the isDirty check is being run.

hello.

hum, when you set the autpostback property to true and the textbox is inside the updatepanel, you'll automatically get a partial postback. are you saying that you need to intercept that partial postback? if so, then check the beginRequest event generated by the client javascript PageRequestManager object.

another thing: the updatepanel will only generate a span or a div in the client side. if you need to intercept requests, then you need to interact with the client pagerequestmanager object.

Hi Luis,

Thank you for your reply. Correct me if I am wrong, but there is no place to access the updatepanel from javascript except for the beginRequest event of the PageRequestManager object? I was hoping to be able to do it from window.onbeforeunload. I wanted to check that there had been changes to information inside the updatepanel. What I ended up doing was to create a hidden field on the tab and useScriptManager.RegisterClientScriptBlock in the onTextChanged event to set it and then check it's value in window.onbeforeunload.

I have been working with the first version of .net since 2002 on basically the same app and I am finding this quite different.

Thanks again,

Melanie

hello.

well, you're not really correct. even though the updatepanel seems to be a very important element, the truth is that on the client side its only function is to be used as a placeholder that delimits a place that can be updated through partial postbacks (on the server side it does perform more actions, but on the client, it's really limited to that).

when you're working on the client side and you're using asp.net ajax, you should keep a few things in mind:

* if you're interested in getting envolved with the client side events, then you should take a look at the Sys.Application object and at the Sys.WebForms.PageRequestManager class. if you're using an updatepanel, the second is really an important object.

* when you have a partial postback (ie, you have updatepanels that are going to be refreshed) there are at least 2 important events fired by the pagerequestmanager class: beginrequest and endrequest. if you handle the 1st, you can cancel the postback if you want. the second event willl be fired when the partial postback has finished and the client platform has loaded the html and the js you've sent back from the server

i still haven't understood what you're trying to do so i'm just trying to give some info about how things work on the client side...

Hi Luis,

Thank you for explaining some of this to me.

I will post some code. Here is the javascript we are using to check if the page is dirty:

var bSubmitted=false;

function isDirty(oForm)

{

if(bSubmitted)

{

bSubmitted =false;returnfalse;

}

var iNumElems = oForm.elements.length;

for (var i=0;i<iNumElems;i++)

{

var oElem = oForm.elements[i];if ("text" == oElem.type ||"TEXTAREA" == oElem.tagName)

{

if (oElem.value != oElem.defaultValue)returntrue;

}

elseif ("checkbox" == oElem.type ||"radio" == oElem.type)

{

if (oElem.checked != oElem.defaultChecked)returntrue;

}

elseif ("SELECT" == oElem.tagName)

{

var oOptions = oElem.options;

var iNumOpts = oOptions.length;for (var j=0;j<iNumOpts;j++)

{

var oOpt = oOptions[j];

if (oOpt.selected != oOpt.defaultSelected)returntrue;

}

}

}

returnfalse;

}

window.onbeforeunload =function (oEvent)

{

if (!oEvent) oEvent = window.event;if(isDirty(document.forms[0]) ==true)

{

oEvent.returnValue ='WARNING: You have chosen to navigate away from this page. You have UNSAVED CHANGES in this form. Do you really want to continue?';

returnfalse;

}

}

Now, when I make a change to a texbox inside the update panel that has the following event handler:

protectedvoid txtPNumber_TextChanged(object sender,EventArgs e)

there is a buch of code there that sets labels and other textboxes in other update panels. When I then click on another tab, the IsDirty function is returning false. I put a bunch of alerts in there and found that oElem.value is always equal to oElem.defaultValue even though I just changed the value of the textbox on the form. This javascript is working for any other controls that aren't in updatepanels.

With my lack of experience and knowledge with ajax, I thought there might be a way to determine in the IsDirty function if the update panel itself had anything done to it. But, as it is only a placeholder, like you said, there isn't anything I can do with that.

Sorry for the confusion and thanks again for your expertise,

Melanie

hello again.

so, what you're saying is that you're using some sort of tab control and each tab has an updatepanel and when you get the textchanged event you're also updating elements that are placed on another tab but those changes aren't sticking. is that it? if so, have you configured your updatepanels so that their mode is set to conditional? if you have done that, you need to call the update method over the non visible tabs...

Hi Luis,

You posted:

"when you get the textchanged event you're also updating elements that are placed on another tab but those changes aren't sticking."

Actually, in the textchanged event I am updating textboxes on that same update panel in the same tab. Then, when I click on another tab (without saving), my IsDirty() function is returning false and lets me go to the other tab. What I want it to do is popup my alert saying:

'WARNING: You have chosen to navigate away from this page. You have UNSAVED CHANGES in this form. Do you really want to continue?'

Then I can click yes to move to the other tab and lose my changes, or I can click No and stay on the tab where I made the changes and hit the save button.

Thanks again,

Melanie

hello again.

ok, so if everything (tab and container) is wrapped inside an updatepanel, then it's simple: handle the initializeRequest (I think i've said beginRequest in previous post. that was wrong, sorry)event and ask that question inside the method that handles the event. if the answer is positive, do nothing, if it is not, then cancel the partial postback. here's a sample page that always cancels a partial postback:

<%@. Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="manager">

</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="panel">
<contenttemplate>
<%=DateTime.Now.ToString() %>
<asp:Button runat="server" ID="bt" Text="post" />
</contenttemplate>
</asp:UpdatePanel>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(initialize);
function initialize(sender,e){
e.set_cancel(true);
}
</script>
</form>
</body>
</html>

Using the InitializeRequest handler is working excellently!

Thanks for your help, patience, and additional explanation on how updatepanels work,

Melanie