Click here to Skip to main content
15,921,841 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have an Ajax Tab Panel on my webpage with three tabs in it.
On my first tab i have some textboxes.
Now I want to give Alert message to user if user navigates to another tab after changing value of any of the text box.
I want to perform this task using Javascript if possible.
Or else any other solutions are acceptable.

Below Image shows my tab panel structure


<img src="http://www.eggheadcafe.com/FileUpload/1619491694/myprofile.png"/>
Posted
Updated 3-Mar-11 10:45am
v2

1 solution

For example

XML
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager runat="server"></asp:ScriptManager>
    <script type="text/javascript" language="javascript">
        var changedElements = new Array();
        var previousTabIndex=null;
        function notification(obj, args) {
            if (previousTabIndex==null || previousTabIndex==0) {
                var msg = "Text changed in these elements ";
                var length = changedElements.length;
                for (i = 0; i < length; i++) {
                    msg = msg + ", " + changedElements[i].id;
                }
                if (msg.length > 31) {
                    alert(msg);
                }
                changedElements.length = 0;
            }
            previousTabIndex = obj.get_activeTabIndex();
        }
        function addToNotify(textbox) {
            changedElements.push(textbox);
        }
    </script>
    <asp:TabContainer  OnClientActiveTabChanged="notification" ID="TabContainer1" runat="server" ActiveTabIndex="0">
        <asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
            <ContentTemplate>
                <asp:TextBox runat="server" ClientIDMode="Static"   ID="Text101"></asp:TextBox>
                <asp:TextBox runat="server" ClientIDMode="Static"   ID="Text102"></asp:TextBox>
                <asp:TextBox runat="server" ClientIDMode="Static"   ID="Text103"></asp:TextBox>
                <asp:Button runat="server" ID="button101" />
            </ContentTemplate>
        </asp:TabPanel>
       <asp:TabPanel runat="server" HeaderText="TabPanel2" ID="TabPanel2">
            <ContentTemplate>
                <asp:TextBox runat="server" ID="TextBox1"></asp:TextBox>
            </ContentTemplate>
        </asp:TabPanel>

    </asp:TabContainer>

</asp:Content>


In the code behind page_load event assign those text boxes a script on the blur event

C#
protected void Page_Load(object sender, EventArgs e)
 {
     Text101.Attributes.Add("onblur", "addToNotify(this);");
     Text102.Attributes.Add("onblur", "addToNotify(this);");
 }


Now in the tab container first panel enter some text in the box 1 and 2 and select box 3 and then click the second panel. You will get the alert.
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900