Prevent DropDownList selection when unsaved changes exist

Question

I have a page where I have four dropdown controls. Based on the selection, I show a grid of data with a text box on each row of the grid. I take input from user on each control and are saved to database upon clicking Save.

Problem:

I'm struggling to alert users when there is an unsaved change on the page and they try to change dropdown value, which results in showing different set of data on the grid.

I have a hidden field which captures when there is a change on the page

<asp:HiddenField ID="hfSaveFlag" runat="server" Value="false" ClientIDMode="Static" />

I have enabled textbox change function so every time there is a change, I enable this hidden field flag to true.

<asp:TextBox ID="txtRating" runat="server" Text='<%# Eval("rating") %>' Width="25" 
            ValidationGroup="rating" onchange="setPendingSaveFlag()" />

function setPendingSaveFlag(ctrl) {
    $("#hfSaveFlag").val('true');
}

This works fine so far and the value is set to true upon change of value in text box.

Now, my dropdown list is like below:

<asp:DropDownList ID="ddlRFP" Width="250" runat="server"  AutoPostBack="true" 
                  OnSelectedIndexChanged="ddlRFP_SelectedIndexChanged" />

I added onchange event in code behind

ddlRFP.Attributes.Add("onchange", "verifyPendingSave(this);");

My javascript for this onchange

function verifyPendingSave(ctrl) {
    if ($("#hfSaveFlag").val() == 'true') {
        alert('You have pending changes on the page.');
        return false;
    } else {
         __doPostback(ctrl, '');
         return true;
    }
}

My intention is if the value of the hidden flag is true, I show an alert, suppress postback and select whatever the value previously selected. Execute postback when it is false.

I see the alert but it is not stopping postback though I return false.

My else part never does postback. I see control id and the actual controls in this part but I guess since it is inside a gridview, it might not be able to find the even to postback. I am sure somehow I am missing something very trivial.

else {
    alert(ctrl.id);
    var control = document.getElementById(ctrl.id);
    __doPostback(control, '');
    return true;
}

I think this is caused by the `runat="server" AutoPostBack="true"` on the declaration of the dropdown list. — , Jan 18 '17 at 20:44
i'm not quietly sure but try this 'ddlRFP.Attributes.Add("onchange", "return verifyPendingSave(this);");' — Curiousdev, Jan 18 '17 at 20:45
@Curiousdev - There you go!! It looks like it is working. But, the selectedvalue is not going back to what it was. How do I make sure that the value changed is also reset on view? — techspider, Jan 18 '17 at 20:47
@Curiousdev - never mind; it is always stopping postback irrespective of value returned — techspider, Jan 18 '17 at 20:48
@arbitrarystringofletters - I tried already that but my else part is not doing postback. — techspider, Jan 18 '17 at 20:51
@techspider i think we don't need _Dopostback in else part just return true in else part because if we have already set autopostback to true correct me if i'm wrong — Curiousdev, Jan 18 '17 at 20:55
@Curiousdev - You are right. I was also of the same impression. But, it doesn't postback even if I return true or false after adding "return functionname" in change event. — techspider, Jan 18 '17 at 20:58
@techspider please find my answer below try something like that it'll solve your problem — Curiousdev, Jan 18 '17 at 21:01

score 1 · Answer 1 · answered Jan 18 '17 at 20:59

1

Please find below code just remove else part from javascript

function verifyPendingSave(ctrl) {
            if ($("#hfSaveFlag").val() == 'true') {
                alert('You have pending changes on the page.');
                return false;
            }
                return true;
        }

and your onchange function called on dropdown like this

Because of the return, __doPostBack will never be hit.

onchange="if(!verifyPendingSave()) return false;"

I hope this helps

answered Jan 18 '17 at 20:59

Curiousdev

5,668
3
24
38

You are absolutely correct. It worked. Though, the selected value on dropdown is not going back to what it was. Though post back is not happening when the alert came, it still sets the value to new value. Do I need to capture old value in javascript somehow and re-assign to make it appear that it didn't change selection? – techspider Jan 18 '17 at 21:05
@techspider ohh yes sorry i just lost your question you have asked in comments too, yes yes you have to save previous value in some hidden fields or on the fly for reference please find [this fiddle](http://jsfiddle.net/x5PKf/2458/) here is on focus method we set previous value on fly and if return false executed we set that value to the dropdown – Curiousdev Jan 18 '17 at 21:13
if I write jQuery change for value reset and javascript onchange for postback, would both execute? if so, is there an order of execution? – techspider Jan 18 '17 at 21:17
Remove onchange jquery function, fiddle is just for example [here](http://jsfiddle.net/x5PKf/2459/) is an updated one just focus jquery function need to add set previous value to hiddenfield and than if **hfSaveFlag** is true set that hidden-field value to dropdown – Curiousdev Jan 18 '17 at 21:22
I have tried various options but it never worked to retain the value – techspider Jan 18 '17 at 22:10
It selects the previous value into hidden element when focused, but it appears that when I change value, the focus is getting re-executed and new value is placed in hiddenvalue. So, at the end it is always showing new value instead of old value – techspider Jan 18 '17 at 22:25

Prevent DropDownList selection when unsaved changes exist

1 Answers1