Ajax error: tab

Showing posts with label tab. Show all posts

Wednesday, March 28, 2012

Accessing controls in a tab control using javascript

Hi ,

Im my project im using tab control.I wat to access the controls inside the content template using javascript.

How is this done?

Anyone please help.

Thanks n regards

Prathibha

prathibhaa:
Im my project im using tab control.I wat to access the controls inside the content template using javascript.

You need to know the client id of the control you want to access. You can get the client id of the control using the ClientID property.

Then in javascript you do this

document.getElementById(<id of control>) to get reference to the control

i tried it.

I have a textbox "txtEmpCode" placed in the content template of tab control.then i tried to access it as follows

document.getElementById("txtEmpCode")

But im getting null value

prathibhaa:
I have a textbox "txtEmpCode" placed in the content template of tab control.then i tried to access it as follows
document.getElementById("txtEmpCode")

Because the text box is in the tab control it may get a different client ID. Best way to check is to view the HTML source on the rendered page and look for the exact ID.

Alternatively you can go textbox.ClientID to get the client rendered ID of the text box control.

i tried this code

document.getElementById("<%=txtEmpCode.ClientID%>")

But I am getting an exception

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

Description:Anunhandled exception occurred during the execution of the current webrequest. Please review the stack trace for more information about theerror and where it originated in the code.

Exception Details:System.Web.HttpException:The Controls collection cannot be modified because the control containscode blocks (i.e. <% ... %>).

Source Error:

An unhandled exception was generated during the execution of thecurrent web request. Information regarding the origin and location ofthe exception can be identified using the exception stack trace below.

Stack Trace:

[HttpException (0x80004005): The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).]
 System.Web.UI.ControlCollection.Add(Control child) +127
 AjaxControlToolkit.ScriptObjectBuilder.RegisterCssReferences(Control control) in d:\E\AjaxTk-AjaxControlToolkit\Release\AjaxControlToolkit\ExtenderBase\ScriptObjectBuilder.cs:293
 AjaxControlToolkit.ScriptControlBase.OnLoad(EventArgs e) in d:\E\AjaxTk-AjaxControlToolkit\Release\AjaxControlToolkit\ExtenderBase\ScriptControlBase.cs:260
 System.Web.UI.Control.LoadRecursive() +74
 System.Web.UI.Control.LoadRecursive() +158
 System.Web.UI.Control.LoadRecursive() +158
 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +3036

Please help

Thanks and regards

prathibha

prathibhaa:
i tried this code
document.getElementById("<%=txtEmpCode.ClientID%>")
But I am getting an exception

Where are you adding that code to?

You can always just inject the javascript doing this

StringBuilder sb =new StringBuilder();sb.Append("function getTextBox()");sb.Append("{");sb.Append("var textbox;");sb.Append("textbox = document.getElementById();");sb.Append("return textbox;");sb.Append("}");ClientScript.RegisterClientScriptBlock(this.GetType(),"mytextboxscript", sb.ToString());//now you have a javascript function that returns the textbox

Hi Prathibha,

prathibhaa:
document.getElementById("<%=txtEmpCode.ClientID%>")
But I am getting an exception
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
Description:An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

That's because you put the document.getElementById("<%=txtEmpCode.ClientID%>") in the wrong position. For example,

<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
function getName(){

var labelValue = "<%=Label1.ClientID %>";
}
</script>
</head>

<body>
You will get the same error. So you should put it at the end of your form(or other proper position). By the way, you can use$get instead of document.getElementById() if you have added a ScriptManager before. They are the same but is much terser.

Best regards,

Jonathan

hi Jonathan,

Thank you.

can u please tell me where i have to give the javascript and how?

i got the javascript correctly when i gave the client id directly.

regards

Prathibha

Monday, March 26, 2012

Access the control in Tabpanel on TabpanelContainer?

My second tab have some controls, ex. Textbox1, how can i access the value of Textbox1 in Tabpanel2 ?

Thanks,

I believe that Textbox1.Text should work for you... but I cannot try because I'm on diferent machine.

Hi,

Here is an example of referencing it with the help of FindControl method.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server">
 protected void Page_Init(object sender, EventArgs e)
 {
 TextBox tb = Panel2.FindControl("TextBox1") as TextBox;
 tb.Text = DateTime.Now.ToString();
 }</script
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
 <title>Untitled Page</title>
</head>
<body>
 <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
 <div><asp:Button runat="server" Text="Button" ID="Button1"></asp:Button>
 <ajaxToolkit:TabContainer runat="server" Height="150px" ID="tbcPlanOverview" >
 <ajaxToolkit:TabPanel runat="Server" ID="Panel1" HeaderText="Tab One">
 <ContentTemplate>
 PAGE ONE - Sample HTML Content for Tab
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 <ajaxToolkit:TabPanel runat="Server" ID="Panel2" HeaderText="Tab Two" >
 <ContentTemplate>
 PAGE TWO - Sample HTML Content for Tab
 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
 </ContentTemplate>
 </ajaxToolkit:TabPanel
 <ajaxToolkit:TabPanel runat="Server" ID="Panel3" HeaderText="Tab Three">
 <ContentTemplate>
 PAGE THREE - Sample HTML Content for Tab
 </ContentTemplate>
 </ajaxToolkit:TabPanel>
 </ajaxToolkit:TabContainer> <br />
 <asp:Image ID="Image1" runat="server" />
 <asp:TextBox ID="txtTabSelect" runat="server" />
 </div>
 </form>
</body>
</html>

Saturday, March 24, 2012

A simple problem with the Tab Control.

I did my homework and researched the control failing to fire child events...

http://forums.asp.net/p/1176424/1982365.aspx#1982365

I have a TabPanel with 3 DDL's on it..(1) CardType, (2) expiration Month and (3)Year

none of the SelectedIndexChanged events fire, regardless of the property settings.

I checked the SampleWebsite and was alarmed that the sample shows most of the

common control typesEXCEPT a dropdown list..?? Comments? Solution? Tongue Tied

Thanks in advance.. Cool

As of version10920 the only practical way to do it is to put them on the

page separatley and make themvisible / notvisible as you need them

in theActiveTabChanged event. The events of those DDL's will then fire. Big Smile

I thank myself for my input.. Cool

Wednesday, March 21, 2012

A lil tab issue

I have a selection of ajax tabs each containing diffrent gridviews of data. Each gridview has a template feild with a linkbutton inside of it, the link buttons command ends with a page reload if you will that looks something like this :

Response.Redirect("~/Home/Editor?pid=" + QueryStringPID);

When i click the linkbutton the page doesnt go back to the editor?pid=1 for example. even though that line is within the code... i dont understand it. i tryed putting an update panel within the tab to see if that would help but it doesnt seem to work. The link buttons on_click event isnt strickly an on_click as its a RowCommand. It simply checks the command name and changes it from 1 to 0 or 0 to 1, it worked perfectly well out side of the tab. which is confusing.

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
SqlConnection Connection = new SqlConnection(ConfigurationManager.ConnectionStrings["BlinkConnectionString"].ToString());
SqlCommand Command = new SqlCommand();
Command.Connection = Connection;
Connection.Open();
if (e.CommandName == "0")
{
Command.CommandText = "UPDATE Profile SET " + e.CommandArgument + " = '1' WHERE UserID = " + QueryStringPID;
Command.ExecuteNonQuery();
}
else if (e.CommandName == "1")
{
Command.CommandText = "UPDATE Profile SET " + e.CommandArgument + " = '0' WHERE UserID = " + QueryStringPID;
Command.ExecuteNonQuery();
}
Connection.Close();
Response.Redirect("~/Home/Editor?pid=" + QueryStringPID);
}

Any ideas all are welcome! thanks si!

ps does anyone know how to force a postback for an update panel? thanks si!

sorted it, no worries thanks for anyone who was making an attempt at sorting it! si!

Wednesday, March 28, 2012

Accessing controls in a tab control using javascript

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

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

Monday, March 26, 2012

Access the control in Tabpanel on TabpanelContainer?

Saturday, March 24, 2012

A simple problem with the Tab Control.

Wednesday, March 21, 2012

A lil tab issue

Ajax error

Blog Archive

About Me