Alert on dropdown change in gridview

Question

I have a gridview with dropdown and whenever a change is made in a grid dropdown and the user navigates to another page without clicking save button I display an alert stated in the JS below. If the user clicks ok it allows you to navigate to another page and this scenario workd fine.

Problem part:

If the user clicks cancel in the displayed alert it will not allow to navigate to another page and will remain in the same page. And now if I navigate to another page without hitting save the alert doesn't come, the second time I am not able to give an alert on cancel action.

Save Button:

 <asp:Button ID="btnSave" runat="server"  OnClick="Save_Click" Text="Save"
       CssClass="button" OnClientClick="MySuperDuper.globalChange = false;" />

Grid Dropdown:

<asp:TemplateField HeaderText="Product">
<ItemTemplate>
<asp:DropDownList ID="ddlProduct" runat="server" Enabled="True"
DataTextField="Prod" DataValueField="Prod" OnSelectedIndexChanged="ddlProduct_Change"
onchange="MySuperDuper.globalChange = true;">
</asp:DropDownList>
</asp:TemplateField>

Javascript:

 <script type="text/javascript">

    var MySuperDuper = new function () {
        var _this = this;

        this.saving;
        this.navigateAwayMessage = "You have made some changes which" +
                           " will be lost if you leave this page. " +
                           "Do you want to leave this page?";

        this.checkForChanges = function () {
            if (!_this.saving && typeof (_this.globalChange) !=
               "undefined" && _this.globalChange) {
                if (document.all && event) {
                    MySuperDuper.globalChange = false;
                    event.returnValue = _this.navigateAwayMessage;
                }
                else {
                    MySuperDuper.globalChange = false;
                    return _this.navigateAwayMessage;
                }
            }
        }
    }

    window.onbeforeunload = function () {
        return MySuperDuper.checkForChanges();
    }

</script>

Answer 1

Why are you setting your MySuperDuper.globalChange to false on the click? It would seem, by doing this, the only way you can set it to true again would be to change the dropdown - which sets it to true .

Have you tried calling the following instead:

<asp:Button ID="btnSave" runat="server"  OnClick="Save_Click" Text="Save"
       CssClass="button" OnClientClick="return MySuperDuper.checkForChanges()" />

This is asking your button to return the result of your method. If true then your button will continue its normal course - in this case Save_Click - if false it won't.

And in your function, instead of returning a message return the result of a confirmation box (which would be true or false )- show the confirmation box in your method.

To return the result of a confirmation box you would simply do something like:

return = confirm(this.navigateAwayMessage);

Either that, or simply remove the OnClientClick event and let your current onbeforeunload method take care of the rest.

Answer 2

protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)
{
foreach (GridViewRow gvRow in GridView2.Rows)
{
    Control ctrl = gvRow.FindControl("ddl_jd");
    DropDownList ddl = ctrl as DropDownList;
    if (ddl != null)
        ddl.SelectedIndex = DropDownList3.SelectedIndex;
}
}

Also make sure to set AutoPostBack="true" for DropDownList3.

Another approach (that is not very clean or simple) is to add the following code into the Page_Load method (and remove the script block containing onJDSelection function from the .aspx file):

if (!Page.IsPostBack)
{
    string functionContent = "<script language=javascript> function onJDSelection()" + 
        "{ var selectedIndex = document.getElementById('" + DropDownList3.ClientID + "').selectedIndex;" + 
        "var grid = document.getElementById('" + GridView2.ClientID + "');  " +
        "for (var i = 1; i < grid.rows.length; i++) " +
            "{ var selObj = grid.rows[i].cells[0].getElementsByTagName(\"*\")[0]; selObj[selectedIndex].selected = true;} "+
        "}</script>";
    Page.RegisterStartupScript("MyScript", functionContent);
    DropDownList3.Attributes.Add("onchange", "onJDSelection()");
}.

Note that is this case the ID used for retrieving DropDownList3 and GridView2 in javascript are sent from code behind as is not very safe to rely on server control ID's generated by ASP .NET. In case you want to save the dropdownlists values (that are changed using javascript) you will also need additional code.