Question

I’m using this jquery code to detect unsaved changes and warn users before they navigate away.

    var _changesMade = false;
    $(document).ready(function () {

        $('form').bind($.browser.msie ? 'propertychange' : 'change', function () {
            _changesMade = true;
        });

        $(window).bind('beforeunload', function () {
            if (_changesMade)
                return 'There are unsaved changes which will be lost if you continue.';
        });
    });

It works fine except on a page where I have a cascading dropdownlist. I added this code to the asp:DropDownList control

onChange = "_changesMade=false; return false;"

and it stops the warning, but it also stops the OnSelectedIndexChanged server code from executing, so now the second drop down is not being populated with the correct data. How can I prevent the popup and still execute the server code when the dropdownlist is changed?

Answer 1

The problem is the return false on your cascading dropdowns. That will stop the SelectedIndexChanged from firing so you need a solution that doesn’t use that.

What about putting a marker on the controls that you don’t want to participate in your change tracking such as the parent on the cascading drop down. I might be tempted to use a class such as notrack (arbitary name) that I can pop on to any controls I don’t want to track.

Your tracking bind would then become

 $(':input').not('.notrack').bind($.browser.msie ? 'propertychange' : 'change', function ()
 {             
    _changesMade = true;         
 }); 

This would mean that you wouldn’t put on

onChange = "_changesMade=false; return false;" 

It is the return false in this instance that is causing the problem and that is what needs to go

Incidentally I don’t think you need to do any specific browser checking for the bind. JQuery will take this into account. I believe the code below should be sufficient

 $(':input').not('.notrack').bind('change', function ()
 {             
    _changesMade = true;         
 }); 

Incidently if you need the _changesMade flag tracked between postbacks (which from your description it looks like you might) then consider storing the value in a hidden field. If you make the hidden field runat="server" then you could also manipulate this through the server side code which you might find helpful.

EDIT:

This works slightly differently to what you intended. This tracks the change of every form element and flags the form as changed if any change. This is how I have got this kind of thing working in the past. I don’t think tracking the form as a whole would work in this instance as you need to exclude certain fields. I would also use a hidden field to track your changes.