Ajax Tab Container issue

[benwizzle]

Ok so I am using the ajax control toolkit tabcontainer with 5 tab panels inside of it. Each tab contains areas where one must input information. The page also contains add, edit, and delete buttons with gridviews above them.

What I am trying to do is to make the user save or cancel changes when they change the activetab. I am using a javascript confirm box but I need to try to retrieve the value of what is pressed from the javascript box to decide whether to discard the changes or stay on the page and make the user finish the input. Is there any way to save the value from the javascript box into a variable so or must i try something else?

If you need any further explanation i will be more than glad to respond.

PS I wasnt sure whether to post this in the javascript section or the asp.net section since im using asp.net with c#.

This is kinda what im using but would like to turn it into a confirm box and pull the true or false value.

protected void TabContainerContent_ActiveTabChanged(object sender, EventArgs e)
    {
 
        if (TabContainerContent.ActiveTabIndex != 0)
        {
            btnDelete.Visible = false;
            btnDeleteOthers.Visible = true;
        }
        else
        {
            btnDelete.Visible = true;
            btnDeleteOthers.Visible = false;
        }
 
        btnDeleteOthers.Enabled = false;
 
        //check to make sure user has saved tab before moving on
         if (Convert.ToString(Session["buttonpressed"]) == "Add" || Convert.ToString(Session["buttonpressed"]) == "Edit" && Convert.ToString(Session["savepressed"]) == "No")
         {
 
             string tmp = "";
             tmp = "<script language='javascript'>";
             tmp += "alert('You must save or cancel to continue');";
             tmp += "</script>";
             Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript", tmp);
}
         Session["savepressed"] = "No";
 
 
 
    }
 

[Frinavale]

Use a JavaScript confirm instead of a JavaScript alert :)

[benwizzle]

yes i do use a javascript confirm but not in that code. i change it a confirm but im trying to save the confirm value to a variable in asp. If the user selects ok to save the work...i want to save the changes to the database. if they select cancel i want to discard the changes and allow them to move to another tab. my main problem is that i cant capture the value of the javascript confirmbox.

this is the javascript function in my html page:

function show_confirm()
        {
 
            var r=confirm("Press a button");
 
                if (r==true)
                {
                  //return the value               
                }
            else
                {
                   //return the value 
                }
        }
 

this is the code in my .cs page

protected void TabContainerContent_ActiveTabChanged(object sender, EventArgs e)
    {
 
        if (TabContainerContent.ActiveTabIndex != 0)
        {
            btnDelete.Visible = false;
            btnDeleteOthers.Visible = true;
        }
        else
        {
            btnDelete.Visible = true;
            btnDeleteOthers.Visible = false;
        }
 
        btnDeleteOthers.Enabled = false;
 
        //check to make sure user has saved tab before moving on
         if (Convert.ToString(Session["buttonpressed"]) == "Add" || Convert.ToString(Session["buttonpressed"]) == "Edit" && Convert.ToString(Session["savepressed"]) == "No")
         {
 
             string tmp = "";
             tmp = "<script language='javascript'>";
             tmp += "show_confirm();";
             tmp += "</script>";
             Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript", tmp);
             TabContainerContent.ActiveTabIndex = Convert.ToInt32(Session["activetab"]);
 
 
 
         }
         Session["savepressed"] = "No";
 
 
 
    }
 

the reason i want to save this value is because im not using a on_click button event. I'm firing this jscript when the active tab is changed.

[Frinavale]

Use a HiddenField to store the value that the user selected.
HiddenFields are accessible in JavaScript and in your C# code (use an ASP.NET HiddenField to make life easier).

Add an ASP.NET HiddenField to the page and give it an ID like "userSelectedYes" (or something that makes sense to you).

Then modify your JavaScript to retrieve this element and set the value when the user clicks yes or no. Then when the page submits the user's choice will be accessible in the userSelectedYes.Value.

JS:

function show_confirm(){
   var r=confirm("Press a button");
   //get the hidden field reference:
  var userSelectedYesElement = document.getElementById("<%=userSelectedYes.ClientID%>");
  if(userSelectedYesElement){
    //if the userSelectedYesElement exists, set it's value
    //to the user's selection
    userSelectedYesElement.value = r;
  }
 
  //returning what the user selected (because that is what you were doing)
  return r;
}

Please note my use of the ASP classic syntax <%= %>. That will print the value of the userSelectedYes HiddenField's ClientID into the page at that place. If you are dynamically generating this code in your C# code then you'll have the following code (which amounts to the same thing):

C# (generating JS)

StringBuilder script = New StringBuilder();
script.Append("function show_confirm(){ \n");
script.Append("  var r=confirm(\"Press a button\"); \n");
script.Append("   //get the hidden field reference: \n");
script.Append("  var userSelectedYesElement = document.getElementById("script.Append(\"");
script.Append(userSelectedYes.ClientID);
script.Append( "\"); \n");
script.Append("  if(userSelectedYesElement){ \n");
script.Append("    //if the userSelectedYesElement exists, set it's value \n");
script.Append("    //to the user's selection \n");
script.Append("    userSelectedYesElement.value = r; \n");
script.Append("  } \n");
script.Append(" \n");
script.Append("  //returning what the user selected (because that is what you were doing) \n");
script.Append("  return r; \n");
script.Append("} \n");

Now, in your Button Click event (or whatever) you can check what the user selected:

C# (Button Click Event handling method or whatever)

  Boolean userSelection = (Boolean) userSelectedYes.Value;
 

-Frinny

[benwizzle]

With this

protected void TabContainerContent_ActiveTabChanged(object sender, EventArgs e)
    {
 
        if (TabContainerContent.ActiveTabIndex != 0)
        {
            btnDelete.Visible = false;
            btnDeleteOthers.Visible = true;
        }
        else
        {
            btnDelete.Visible = true;
            btnDeleteOthers.Visible = false;
        }
 
        btnDeleteOthers.Enabled = false;
 
        //check to make sure user has saved tab before moving on
         if (Convert.ToString(Session["buttonpressed"]) == "Add" || Convert.ToString(Session["buttonpressed"]) == "Edit" && Convert.ToString(Session["savepressed"]) == "No")
         {
 
             string tmp = "";
             tmp = "<script language='javascript'>";
             tmp += "show_confirm();";
             tmp += "</script>";
             Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript", tmp);
             TabContainerContent.ActiveTabIndex = Convert.ToInt32(Session["activetab"]);
             string userSelection = userSelectedYes.Value;
             Label1.Text = userSelection; //just to post the value so i can see it
 
 
         }
         Session["savepressed"] = "No";
 
 
 
    }
 

and this

function show_confirm(){
       var r=confirm("Press a button");
       //get the hidden field reference:
      var userSelectedYesElement = document.getElementById("<%=userSelectedYes.ClientID%>");
      if(userSelectedYesElement){
        //if the userSelectedYesElement exists, set it's value
        //to the user's selection
        userSelectedYesElement.value = r;
      }
 
     //returning what the user selected (because that is what you were doing)
     return r;
   }
 
 

I am getting this error
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

[Frinavale]

Umm..never seen that error before.
Maybe it's because you're using C# and I didn't include a ";" at the end of the <%= %> statement.

Try changing it to:

      var userSelectedYesElement = document.getElementById("<%=userSelectedYes.ClientID;%>");

-Frinny

[benwizzle]

With the semicolon added it says:
Error 1 )
Error 2 Invalid expression term ')'

[Frinavale]

So, maybe you don't need a ";" (??)

In your original error....I don't understand where or why your control collection is being modified.......

-Frinny

[benwizzle]

It says that whenever I put <%= %> on any of my controls and try to modify them. Ive tried to do this to various textboxes and such just to test and cant seem to get any of them to work. Ive also tried with single quotes no single quotes, ect, ect. Basically all i want to do is retrieve one of my controls and then put something in it from the javascript.

[benwizzle]

i just read something about this would work if i took it out of the <head> tag. ill let you know how it goes

[benwizzle]

Ok so it compiles and such but the result is not being stored to the control. I tried using textbox, label, and hiddenfield to save the result and its not working. I just made a simple javascript function to see if i can write to any control and I cant....i must not be doing it right or something. Checking my error console on firefox shows that the userSelectedYesElement is null....so somehow the getelementbyid is not working.

[Frinavale]

I don't know why you're having a problem with this.
I use this technique all the time.

Mind you I'm not "modifying" controls.

Anyways, I just set up a test aspx page to try this out in C# (I mainly use VB.NET) and this is what I have (and it works fine).

ASPX code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test</title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
       <asp:Button ID="theButton" runat="server" OnClientClick="show_confirm();" OnClick="theButton_Click" Text="Click Me!" />
        <br />
        <asp:Label ID="UserSelectionResult" runat="server"></asp:Label>
        <asp:HiddenField ID="theHiddenField" runat="server" Value="nothing set" />
 
        <script type="text/javascript">
            function show_confirm() {
                var r = confirm("Press a button");
                //get the hidden field reference:
                var userSelectedYesElement = document.getElementById("<%=theHiddenField.ClientID%>");
                if (userSelectedYesElement) {
                    //if the userSelectedYesElement exists, set it's value
                    //to the user's selection
                    userSelectedYesElement.value = r;
                }
 
                //returning what the user selected (because that is what you were doing)
                return r;
            }
        </script>
 
    </div>
 
  </form>
</body>
</html>
 

In my C# code for the button click event I am just showing whether or not the user chose true (ok) or false (cancel):

protected void theButton_Click(Object sender, EventArgs e) {
  UserSelectionResult.Text ="You selected: " + theHiddenField.Value;  
}

Like I said...it works fine.

-Frinny

[benwizzle]

I think its because im using the ajax toolkit. When i put the function just inside the body it actually runs but it cant find the hidden field. When i place it inside of the tabcontainer tag...the firefox error console says show_confirm is not defined. I think half the problem is that im calling the function inside of the tab_index changed event. Im not using button clicks. I know i ran into a problem before where i needed to put another hidden field im using in a certain place or it couldnt be accessed and Im pretty sure its because of the toolkit.
This is what i have in the tabcontainer active tab changed event. This toolkit has added some nice features for me to use but also has its pitfalls.

protected void TabContainerContent_ActiveTabChanged(object sender, EventArgs e)
    {
 
        if (TabContainerContent.ActiveTabIndex != 0)
        {
            btnDelete.Visible = false;
            btnDeleteOthers.Visible = true;
        }
        else
        {
            btnDelete.Visible = true;
            btnDeleteOthers.Visible = false;
        }
 
        btnDeleteOthers.Enabled = false;
 
        //check to make sure user has saved tab before moving on
         if (Convert.ToString(Session["buttonpressed"]) == "Add" || Convert.ToString(Session["buttonpressed"]) == "Edit" && Convert.ToString(Session["savepressed"]) == "No")
         {
 
             string tmp = "";
             tmp = "<script language='javascript'> \n";
             tmp += "show_confirm(); \n";
             tmp += "</script>";
             Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript", tmp);
             TabContainerContent.ActiveTabIndex = Convert.ToInt32(Session["activetab"]);
            // string userSelection = userSelectedYes.Value;
 
 
 
         }
         Session["savepressed"] = "No";
 
 
 
    }
 
 

This is what i have in my html

<cc1:TabContainer ID="TabContainerContent" runat="server" ActiveTabIndex="4" Height="500px" BackColor="White" OnActiveTabChanged = "TabContainerContent_ActiveTabChanged" AutoPostBack="True" >
                    <script type="text/javascript">
    function show_confirm()
    {
      var r=confirm("Press a button");
       //get the hidden field reference:
       document.writeln("i made it to the function");
       var userSelectedYesElement = document.getElementById("<%=txttesting.ClientID%>");
        userSelectedYesElement.value = "yes";
      if(userSelectedYesElement)
      {
     //if the userSelectedYesElement exists, set it's value to the user's selection
        userSelectedYesElement.value = r;
      }
 
     //returning what the user selected (because that is what you were doing)
     return r;
   }
 
 
    </script>
 

I have everything setup almost word for word like you do except where im calling my function in the activetab event.

[Frinavale]

Ok there are 2 things that you can do to get this script to work.

The first thing is to try and add it in side the update panel that is going to be used.

The second thing is to dynamically generate the script in your C# code and register it with the ScriptManager on the page.

UpdatePanels make things a little trickier.

Please note that you MUST put the hidden field in the UpdatePanel!

[Frinavale]

Ok I tried it with the Tab Control and it still works fine for me.
Check out what I have:

(ASPX code markup)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test</title>
</head>
 <body>
  <form id="form1" runat="server">
    <asp:ScriptManager ID="smanager" runat="server"> </asp:ScriptManager>
    <asp:UpdatePanel ID="SectionUpdate" runat="server">
        <ContentTemplate>
            <cc1:TabContainer ID="TabContainerContent" runat="server" ActiveTabIndex="4" Height="500px"
                BackColor="White" OnActiveTabChanged="TabContainerContent_ActiveTabChanged" AutoPostBack="True"
                OnClientActiveTabChanged="show_confirm">
                <cc1:TabPanel ID="tab1" runat="server">
                    <HeaderTemplate>
                        Tab 1
                    </HeaderTemplate>
                    <ContentTemplate>
                        Content for tab 1
                    </ContentTemplate>
                </cc1:TabPanel>
                <cc1:TabPanel ID="tab2" runat="server">
                    <HeaderTemplate>
                        Tab 2
                    </HeaderTemplate>
                    <ContentTemplate>
                        Content for tab 2
                    </ContentTemplate>
                </cc1:TabPanel>
                <cc1:TabPanel ID="tab3" runat="server">
                    <HeaderTemplate>
                        Tab 3
                    </HeaderTemplate>
                    <ContentTemplate>
                        Content for tab 3
                    </ContentTemplate>
                </cc1:TabPanel>
                <cc1:TabPanel ID="tab4" runat="server">
                    <HeaderTemplate>
                        Tab 4
                    </HeaderTemplate>
                    <ContentTemplate>
                        Content for tab 4
                    </ContentTemplate>
                </cc1:TabPanel>
                <cc1:TabPanel ID="tab5" runat="server">
                    <HeaderTemplate>
                        Tab 5
                    </HeaderTemplate>
                    <ContentTemplate>
                        Content for tab 5
                    </ContentTemplate>
                </cc1:TabPanel>
            </cc1:TabContainer>
            <br />
            <asp:Label ID="UserSelectionResult" runat="server"></asp:Label>
            <asp:HiddenField ID="theHiddenField" runat="server" Value="nothing set" />
 
            <script type="text/javascript">
                function show_confirm() {
                    var r = confirm("Press a button");
                    //get the hidden field reference:
                    var userSelectedYesElement = document.getElementById("<%=theHiddenField.ClientID%>");
                    if (userSelectedYesElement) {
                        //if the userSelectedYesElement exists, set it's value
                        //to the user's selection
                        userSelectedYesElement.value = r;
                    }
 
                    //returning what the user selected (because that is what you were doing)
                    return r;
                }
            </script>
        </ContentTemplate>
    </asp:UpdatePanel>
  </form>
 </body>
</html>

(C# code)

protected void TabContainerContent_ActiveTabChanged(object sender, EventArgs e){
  UserSelectionResult.Text = "You selected: " + theHiddenField.Value;    
}

-Frinny

[benwizzle]

This worked for me now. The only problem is that I dont want the function to fire unless someone has hit the add or edit buttons. I have session variables saving which button has been pressed and only want this to run if someone actually has clicked them. Currently what we have here fires everytime a tab is changed regardless of if a button has been pressed. I do appreciate all the help though. You have helped me so much with all my questions so far.

[Frinavale]

There are 2 aspects to the Tab control: client side (run via JavaScript) and side.

This is what happens....

• The user selects a tab
• The JavaScript responsible for switching tabs is executed
• The JavaScript that displays the confirm is executed
• The JavaScript responsible for causing a Postback to the server is executed
• The page posts back to the server and your method that handles the tab index changed event is executed

Now, if you want the server side not to be executed you can wrap the contents of the server side Tab Index Changing event in an If block that checks if the user selected yes or no.

Something like:

protected void TabContainerContent_ActiveTabChanged(object sender, EventArgs e){
 Boolean userSelectedYes;
 Boolean.TryParse(theHiddenField.Value,userSelectedYes);    
 
  if(userSelectedYes){
    //Functionality here....
  }
}

If you want the client side stuff to not be executed that could require some figuring out :)

-Frinny