Postbacktrigger problem

I am creating a vb.net/asp.net 2005 app using a tabcontrol and I am trying to use a button inside the updatepanel and inside the tab and I am using the following syntax:

<CODE>

<asp:UpdatePanelID="pnlTest"runat="server"RenderMode="Inline"UpdateMode="Conditional">

<Triggers>

<asp:AsyncPostBackTriggerControlID="TabContainer1"EventName="ActiveTabChanged"/>

<asp:PostBackTriggerControlID="btnPreview"/>

</Triggers>

<ContentTemplate>

....everything else here...tab control...

</ContentTemplate>

</CODE>

But I keep getting an error as follows:

<ERROR>

A control with ID 'btnPreview' could not be found for the trigger in UpdatePanel 'pnlTest'.

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.

Exception Details:System.InvalidOperationException: A control with ID 'btnPreview' could not be found for the trigger in UpdatePanel 'pnlTest'.

</ERROR>

I am very confused because I know the control is there and when I go to the vb code-behind I am able to see the code in the dropdownlist that contains all controls for the aspx page. Does anyone have an idea what I'm doing wrong? thanks

Since your button is in the UpdatePanel you do not need to create trigger for it.

Hi Myroncope,

Here is my sample code which was written in c#. It has been tested and works fine. If you install a tool named "Web Development helper", maybe an error dialog will be sent to you, don't mention it.Press continue!

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="UpdatePanelTest2.aspx.cs" Inherits="UpdatePanelTest2" %><%@. 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>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline" UpdateMode="Conditional"> <Triggers> <asp:AsyncPostBackTrigger ControlID="TabContainer1" EventName="ActiveTabChanged" /> <asp:PostBackTrigger ControlID="btnPreview" /> </Triggers> <ContentTemplate><%=DateTime.Now.ToString()%> <cc1:TabContainer ID="TabContainer1" runat="server" OnActiveTabChanged="TabContainer1_ActiveTabChanged" AutoPostBack="True" > <cc1:TabPanel ID="TabPanel1" runat="server" > <HeaderTemplate> 1111</HeaderTemplate> <ContentTemplate><%=DateTime.Now.ToString()%></ContentTemplate> </cc1:TabPanel> <cc1:TabPanel ID="TabPanel2" runat="server"> <HeaderTemplate> 2222</HeaderTemplate> <ContentTemplate><%=DateTime.Now.ToString("yyyy-MM-dd")%></ContentTemplate> </cc1:TabPanel> </cc1:TabContainer>  <asp:Button ID="btnPreview" runat="server" Text="btnPreview" /> </ContentTemplate> </asp:UpdatePanel> </form></body></html>

 By the way, my AJAX Control Toolkit version is 10618. If an error occured while you execute the code above. Suggest you check your AJAX Control Toolkit version.

If the error information still exist, please let me know.

MyronCope:

I am very confused because I know the control is there and when I go to the vb code-behind I am able to see the code in the dropdownlist that contains all controls for the aspx page. Does anyone have an idea what I'm doing wrong? thanks

Are btnPreview visible?

You could also try to use the ClientID or UniqueID value of btnPreview for postbacktrigger's ControlID attribute. Maybe one of them works.

And finally you could also tryRegisterPostBackControl(Control) method of scriptmanager in code-behind.

Hi, MyronCope

You can add an invisible button out of the updatePanel,set the invisible button as aPostBackTrigger of theUpdatePanel.

Then on the client-side click event of the 'btnPreview', trigger the click event of that invisible button.

<div style="visibility:hidden"><asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" UseSubmitBehavior="false" /></div>

<input type="button" onclick="javascript:document.getElementById('Button1').click();" name="Button1" value="Button" id="'btnPreview'" /></div>

The same solution solved all of this kind issue!

Check the following links:

http://forums.asp.net/t/1116956.aspx

http://forums.asp.net/t/1117770.aspx

http://forums.asp.net/t/1115934.aspx

http://forums.asp.net/t/1116851.aspx

Hope this helps.

Let me know if you need more info.

Posting from Tab Control does not work

Hi all,

I am new to AJAXtoolkit and I tried the following code it runs fine but does not input values in textbox nor updates the image

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<script type="text/javascript">
function PanelClick(sender, e) {
}

function ActiveTabChanged(sender, e) {
__doPostBack('<%= Tabs.ClientID %>', sender.get_activeTab().get_headerText());
}
</script>
<div>
<ajaxToolkit:TabContainer runat="server" ID="Tabs" Height="150px"
OnClientActiveTabChanged="ActiveTabChanged"
OnActiveTabChanged="ActiveTabChangedServer">
<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
</ContentTemplate>
</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanel runat="Server" ID="Panel3" OnClientClick="PanelClick" 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>

in the code behind I have this:

protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(Tabs);
}

protected void ActiveTabChangedServer(object sender, EventArgs e)
{
if (Tabs.ActiveTab == Panel1)
{
Image1.ImageUrl = "~/Images/HomeEnabled.jpg";
txtTabSelect.Text = "Selected Panel 1";

}

if (Tabs.ActiveTab == Panel2)
{
Image1.ImageUrl = "~/Images/ProductsEnabled.jpg";
txtTabSelect.Text = "Selected Panel 2";
}

if (Tabs.ActiveTab == Panel3)
{
Image1.ImageUrl = "~/Images/SupportEnabled.jpg";
txtTabSelect.Text = "Selected Panel 3";
}

}

Please do tell me what am I doing wrong. I tried debugging, the watch shows that the values are present but do display.
Thanks,

do you have the autopostback property on the tabs container set to true?

Hi,

ajaxToolkit:TabContainer does not have the property and I did try adding AutoPostBack="true", compiled it and ran but it still does not work. what baffles me is it calls the

protected void ActiveTabChangedServer(object sender, EventArgs e)
{
.....

}

on the server and I can see the values in the watch window but when the page reloads, the values are not there

I have this in the page load event

if (!Page.IsPostBack)
{
ScriptManager1.RegisterAsyncPostBackControl(Tabs);
}

Thanks,

Hi,

It's caused by not calling __dopostback method in a correct way. I suggest using a hidden button to trigger postback. Here is a sample:

<%@. 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_Load(object sender, EventArgs e) { //ScriptManager1.RegisterAsyncPostBackControl(Tabs); } protected void ActiveTabChangedServer(object sender, EventArgs e) { if (Tabs.ActiveTab == Panel1) { Image1.ImageUrl = "~/Images/HomeEnabled.jpg"; txtTabSelect.Text = "Selected Panel 1"; } if (Tabs.ActiveTab == Panel2) { Image1.ImageUrl = "~/Images/ProductsEnabled.jpg"; txtTabSelect.Text = "Selected Panel 2"; } if (Tabs.ActiveTab == Panel3) { Image1.ImageUrl = "~/Images/SupportEnabled.jpg"; txtTabSelect.Text = "Selected Panel 3"; } //Response.Write(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> <script type="text/javascript"> function PanelClick(sender, e) { } function ActiveTabChanged(sender, e) { $get("<%= Button1.ClientID%>").click();// __doPostBack('<%= Tabs.ClientID%>', sender.get_activeTab().get_headerText()); } </script> <div><asp:Button runat="server" style="display:none;" Text="Button" ID="Button1"></asp:Button> <ajaxToolkit:TabContainer runat="server" ID="Tabs" Height="150px" OnClientActiveTabChanged="ActiveTabChanged" OnActiveTabChanged="ActiveTabChangedServer"> <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 </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel runat="Server" ID="Panel3" OnClientClick="PanelClick" 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>

Hi Raymond Wen,

I tried your approach too.. but the error occurs again.

It gives me "Microsoft JScript runtime error: 'this.get_element().style' is null or not an object". I dont know what it is and why does it occur as I have not written this piece of code.

upon using a debugger it shows as this "this.get_element().style.visibility = 'visible';" which is present in the

_app_onload funtion like this:

_app_onload : function(sender, e)
{

.... this.get_element().style.visibility = 'visible';

}

Thanks for you help,
Stephen

Can you create a simple page to reproduce it?

preventing the tab index change if certain conditions exist

Hello,

I have a form with a tab panel control

Tab container name (client id) : Tabs

I would like to know how to set and prevent the tab from moving from index 0 if the request.querystring("pid") is empty or null.

Here is my current javascript:

<scripttype="text/javascript">function PanelClick(sender, e) {

var mpid = gup('pid');

if (mpid=="") {

SetActiveTab("Tabs",0);

}

}

function ActiveTabChanged(sender, e) {var mpid = gup('pid');

if (mpid=="") {

alert("Please choose a page or create a new page first");

returnfalse;

}

}

function SetActiveTab(tabControl, tabNumber)

{

var ctrl = $find(tabControl);

ctrl.set_activeTab(ctrl.get_tabs()[tabNumber]);

}

function gup( name ){name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");

var regexS ="[\\?&]"+name+"=([^&#]*)";

var regex =new RegExp( regexS );

var results = regex.exec( window.location.href );

if( results ==null )return"";

else

return results[1];}

</script>

I guess all I need is the javascript reference to the active tab...

can anyone help me with this?

Ok, through a little more research, I found out how to navigate or prevent navigation of the tabs control via javascript:

Here's the code

<scripttype="text/javascript">

/

function ActiveTabChanged(sender, e) {

var mpid = gup('pid'); // get the querystring in the url by calling the gup function below... good little snippet for querystrings in javascript.

var activeTab = $get("Tabs"); // gets the element by the id of "Tabs" and defines the control variable activeTab.

activeTab.value = sender.get_activeTabIndex(); // gets the active tab index of the control.

if (mpid=="" && activeTab.value!=0) { // if the conditions aren't right then don't allow the user to navigate to any other tab.

alert("Please choose a page or create a new page first"); // alert the user.

SetActiveTab("Tabs",0); // sets the active tabreturnfalse; // doesn't allow the process to go to another tab.

}

}

function SetActiveTab(tabControl, tabNumber)

{

var ctrl = $find(tabControl);

ctrl.set_activeTab(ctrl.get_tabs()[tabNumber]);

}

function gup( name ){name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");

var regexS ="[\\?&]"+name+"=([^&#]*)";

var regex =new RegExp( regexS );

var results = regex.exec( window.location.href );

if( results ==null )return"";

else

return results[1];}

</script>

I hope that the scripts above can help someone else.