Change visible accordion panel client side

How can I change which accordion panel is visible using javascript?

Try this ..

function OpenPane(paneIndex) {var accHost = $get(<AccordionID>).AccordionBehavior ;accHost.set_SelectedIndex( paneIndex );}The "AccordionBehavior" lets you access the methods as you would do with a BehaviorID.

Please mark my reply as an answer if this solves the issue

Thanks for the response. I added alerts to the javascript as shown below, because nothing was happening. The first alert works, but the second alert is never displayed.

function

OpenPane(paneIndex)

{

alert(paneIndex);

var accHost = $get('Accordion1').AccordionBehavior;

alert(accHost);

accHost.set_SelectedIndex( paneIndex );

}

What's wrong?

Hi,

If you dont get the second alert , you should have an error at the line $get('Accordion1').AccordionBehavior.

Can you check if $get('Accordion1') is a valid object .

change the code to be

functionOpenPane(paneIndex)

{

alert(paneIndex);

var accord = $get('Accordion1');

var accHost ;

if( accord != null)

{

accHost = accord.AccordionBehavior;

}

alert( accord );

alert(accHost);

accHost.set_SelectedIndex( paneIndex );

}

and also , what is the ID of the Accordion You are using , "Accordion1" ?

That code should work. If you're not getting to the second alert(), my guess is that "$get('Accordion1')" is returning null. Are you sure you have the correct ID of your Accordion?

If "Accordion1" is the server ID, you probably want: $get('<%= Accordion1.ClientID %>') in case the client ID is different (because it's inside a naming container, for example).

Excellent. Between Phanatic and Steve it is now working properly. Thanks very much, both of you.

Hi,
Need your help.
I am using the Accordion Panel. I have tried your code, but unfortunately couldnt get it to work.

I am getting error in accessing the property AccordionBehavior.

"accHost = accord.AccordionBehavior;"
accHostalways contain undefined value.

any help would be apprecitated..

Thanks in advance.

--Saurabh

.

Change Tab Panel on Validation Failed.

Hai Guys,

I have 4 tab panels. The first panel contains all required fields. The other tabs having optional fields. My problem is, if some of the required fields are empty then the first tab is not shown, Its shows only currently selected tab. SetFocusOnError property is set to true in Required Field Validator. Tab container is placed inside UpdatePanel control. Please help me on this issue. Thanks in advance

Hi pbarunkumar,

The behavior you are expierencing is not the default behavior.

Could you please post a working code example which replicates this behavior? This way I can easily look into the problem!

Kind regards,
Wim

Hi Pbarunkumar,

The key to your problem is how to hide a Tab , so you should see my reply onthis thread. I have shown how to do it on the client and server side. Please be careful about the ActiveTabIndex property. When you hide the first tab, ActiveTabIndex must not be 0.

Best regards,

Jonathan

Change full postback action from inner update panel...

Hi,

Is there a way to alter full postback to partial postback caused by outer update panels from usercontrol?...I tried to add button control as an AsyncPostBackTrigger. No effect to change from a full page postback to partial one. No change whether I set properties like ChildrenAsTriggers to false/true and UpdateMode to Always/Conditional inner update panel, when a button or any control causes a postback action is pressed, it causes a full postback.

Parent:

<asp:UpdatePanel ID="upanelPage" ChildrenAsTriggers="false" UpdateMode="Conditional" runat="server">
<Triggers>
</Triggers>
<ContentTemplate>
<asp:UpdatePanel ID="upanelMainContent" ChildrenAsTriggers="false" UpdateMode="Conditional" runat="server">
<Triggers>
</Triggers>
<ContentTemplate>
<!-- Main Content --> <<-- my user control or other are displayed
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>

User Control loaded to Parent...

<asp:UpdatePanel ID="updatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" >
<ContentTemplate>
<ajaxToolkit:TabContainer ...>
<ajaxToolkit:TabPanel ...>
<asp:MultiView...>
<asp:View...>
...
<asp:LinkButton...></asp:LinkButton>
<asp:Button...></asp:Button>
<asp:UpdatePanel ...>
<Triggers>
<asp:AsyncPostBackTrigger ControlID=.../>
</Triggers>
<ContentTemplate>
...
<asp:GridView...>
</asp:GridView>
...
</ContentTemplate>
</asp:UpdatePanel>
...
</asp:View...>
<asp:View...>
...controls...
</asp:View>
</asp:MultiView>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ...>

</ajaxToolkit:TabPanel>
...
</ajaxToolkit:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>

UpdatePanel causes a Full Post Back no matter what properties you set on it.

If you are looking for better performing alternatives, look out for ScriptCallbacks or JSON Based Calls and this would require "some" work compared to ourmagic updatepanel!

Huh??ScriptCallbacks?JSon Based Calls?...Does not know what are they or how to start with them? ..thanks for the reply..

Huh??ScriptCallbacks?JSon Based Calls?...Does not know what are they or how to start with them? I was trying to control the postback action of outer update panel from the inside user control..thanks for the reply..

Hi,den2005

I found that the following code worked.

The Page:

<%@. Page Language="C#" %>

<%@. Register src="http://pics.10026.com/?src=WebUserControl2.ascx" TagName="WebUserControl2" TagPrefix="uc1" %>
<!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 id="Head1" runat="server">
<title>UpdatePanel Tutorial</title>
<style type="text/css">
#UpdatePanel2 {
position: relative;
margin: 2% 5% 2% 5%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ChildrenAsTriggers="False" ID="UpdatePanel1" UpdateMode="Conditional"
runat="server">
<ContentTemplate>
<fieldset>
<legend>Parent UpdatePanel</legend>Last refresh
<%=DateTime.Now.ToString() %>
<br />
<asp:Button ID="Button1" runat="server" Text="Refresh Outer Panel" />
<uc1:WebUserControl2 ID="WebUserControl2_1" runat="server" />
</fieldset>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

The UserControl:

<%@. Control Language="C#" ClassName="WebUserControl2" %>
<asp:UpdatePanel ChildrenAsTriggers="False" ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<fieldset>
<legend>Nested UpdatePanel</legend>Last refresh
<%=DateTime.Now.ToString() %>
<br />
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
</fieldset>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Calendar1" />
</Triggers>
</asp:UpdatePanel>

Hope this help.

Best regards.

Jin-Yu Yin

Change event in Ajax Update Panel

Dear All

If any event contains inside of the update panelthen after post back focus is lost. More clearly, LetTextbox1 and TextBox2 inside of the update panel.TextBox1 containsTextChanged event andthis event contains TextBox2.Focus(). But after post back it lost the focus.

Thanks

Aminul Bari

It should work just fine. Let me see if I understand what you are saying:

You've got an updatepanel.

Try to use SetFocus of ScriptManager

http://www.asp.net/AJAX/Documentation/Live/mref/O_T_System_Web_UI_ScriptManager_SetFocus.aspx

Thanks. Its working fine.

Change contents of an external update panel from within a seperate accordian panel?

I am trying to update the contents of an update panel from the event of changing the panel in the accordian control (located outside of the update panel I wish to update). When I try to creat a trigger the update panel does not see the button located inside the accordian control. Any suggestions?

Let me see if I can clarify my question further. I have a content container on a master page. Inside the content container I have a table with two cells. In the first cell I have am using the accordian control. when I click on one of the headers in the accordian control I want it to update an update panel in cell number 2. The content of the accordian panel will be just a brief headline and overview of what is displayed in the update panel in cell #2. My issue is that when trying to define triggers in the update panel in cell #2 it does not see any of the controls in cell #1. Any suggestions?

Thanks for any help you can provide.

Certain events not firing on server (but they are in dev)

I have a small web app that uses an update panel. Its asyncpostback event fires and updates a session variable. In the process, the pageload event fires and repopulates the elements within my update panel. This works in my dev environment, but doesn't work when I publish the site to my website.

The session variable is updated like it should via asyncpostback, but the pageload event isn't fired. Thus my chart within the updatepanel isn't redrawn. I have ajax installed on the server and the appropriate dll's are in the bin folder.

Any idea why this is happening?

The only thing I can think of is there are differences in your web.config file.

The web.config goes along with the publish (I've even manually copied the file over)

hello.

that is strange because the load event will always fire during a postback. have you tried hosting the app in IIS in your development environment?

Yeah I knew the web.config file went though with the Publish, but I wans't sure if you were using the Publish option in Visual Studio or if you were manually publishing it by copying the dll and aspx files. I had a few ideas as to what might be causing the problem but I keep throwing those ideas out because it is working in your test environment. At this point, I can only take guesses. I dont think AJAX.net is the problem because your session is getting updated aysnc. Since all the code is the same in both environments, that ww know of, I would next try to figure out what is different. Are the dll files different in any way, specifically the ajax dll's. Also try manually deploying the site. I have had some publshing problems with Visual Studio 2005 when publishing to ftp (The host I was using had users experieincing problems with the publish not publishing correctly.) Although the problem I and my host had was more to deal with Visual Studio stopming over some security permssions.. dont ask me how, it just did.

I have manually copied the files to the server as well (it is sitting right next to my desktop on the same domain).

hum...well, not sure on the response your chart is returning from the server. there shoudln't be any problems with it since you're seeing it work on the dev machine. anyway, how about using fiddler to see the response returned from the server ?

fiddler.. hmmm... thats a new one on me. I'll check it out.

it's an http proxy. really good to see the contents sent to and from the browser:

http://www.fiddlertool.com/

It is weird, Have you fixed it?

No, not yet. It's strange that the async call works but the page load isn't firing.

CCS getting lost while doing partial rendering with update panel......

hi !!

Problem :: CSS style lost when upatepanel does Partial Rendering..

I have made one navigation menu in javascript.. And i have onmouseover and onmouseout script...

In this script i m chaning the font and background image of <td>

The code is like this :

<tdid="menuid1" class="menuFont"onmouseover="show_popup(1)"onmouseout="javascript:m_show=0;">

<aid="mlink1" class="menuLink"href="#">Link1</a>

</td>

And the style is like bolow...

<styletype="text/css">

.menuFont1{font-size:11px;background:url(jsInclude/images/menu/nav_off_bg.gif)repeat-x;style=CURSOR:pointer;COLOR:#000000;FONT-FAMILY:Tahoma,Verdana,Arial,Helvetica,ans-serif;TEXT-ALIGN:center;TEXT-DECORATION:none}

.menuLink {color:#666666;TEXT-DECORATION:none;font-weight:bold}

.submenuLink{COLOR:#FFFFFF;TEXT-DECORATION:none}

.submenuFont{font-size:11px;COLOR:#ffffff;FONT-FAMILY:Tahoma,Verdana,Arial,Helvetica,sans-serif;height:16px;background-COLOR:#7885FF;TEXT-ALIGN:left}

</style>

Now in my form i have one text box and on its text_changed event i m doing partial rendering with update panel...

But when the response comes..the CSS of menu got lost...

Can any one help me what is the reason for this?

There has to be a boat out on the horizon somewhere. ,

Cause a JavaScript Function to run after update (update panel postback)

Hello,

I ran into a problem that im not sure if the Atlas framework addresses.

I need to fire off a javascript function (which is decided server side)on a postback. To do this I am going to be using a hidden input field.(since I already have one on the form I use to send information forserver use.) From the server side, I can place the function names intothe hidden input field. But I can't cause them to run, on each postback.

I suppose that is confusing, let me try something simpler.

1. I fire off a postback in javascript - This is done using the__dopostback() and the server side fires off its if statements and doesits functions based on what has been placed into my hidden input field.(this is all good so far) (if I had to I could use the body's on formload ability to fire off the javascript functions I desire, but thatwont work for the next step, and is really ugly)

2. I include Atlas to make my postback not refresh the whole page. This is done by using UpdatePanels.

3. On the server side I need to somehow tell it to run certainjavascript functions when that postback finishes loading. (so like onpartial page load)

How do I do step 3?<script type="text/javascript">
function AfterPostback()
{
alert("This is where we check the hidden input and run the functions.");
}

function PageRequestManagerPropertyChanged(sender, args)
{
if (args.get_propertyName() == "inPostBack")
{
if (!$object("_PageRequestManager").get_inPostBack())
AfterPostback();
}
}

function pageLoad()
{
$object("_PageRequestManager").propertyChanged.add(PageRequestManagerPropertyChanged);
}
</script
<div>
<atlas:ScriptManagerEnablePartialRendering="true" ID="ScriptManager1" runat="server">
</atlas:ScriptManager>
<atlas:UpdatePanel runat="server" Mode="Conditional" ID="UpdatePanel1">
<ContentTemplate>
<%= DateTime.Now.ToLongTimeString() %>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTrigger ControlID="UpdateTime" EventName="Click"/>
</Triggers>
</atlas:UpdatePanel>
<asp:Button ID="UpdateTime" runat="server" Text="Update Time" />
</div
Thats the solution I rigged up.
Hi,

Thanks for posting your solution. It works very well and solves a whole bunch of missing stuff with AtlasPanels. One problem dough. I had to move the call to JS function pageLoad() to the end of the html file part instead of putting it to body onload event.
Another option for doing this is theUpdateProgressSignup extension.

Catch a Sys.WebForms.PageRequestManagerServerErrorException that occurs when server is dow

Hello,

I have an ajax timer control that updates an update panel every couple of seconds. When/if the server is down, there is an error message in a popup that says

"Sys.WebForms.PageRequestManagerServerErrorException: An unknown error ocurred while processing the request
on the server. The status code reutrned from the server was: 12029"

Basically I want to be able to catch this exception so that the popup does not continue to occur.

Is this possible?

Thanks in advance.

Take a look at the following posts on my blog:

http://fredrik.nsquared2.com/viewpost.aspx?PostID=395&showfeedback=true

http://fredrik.nsquared2.com/viewpost.aspx?PostID=394&showfeedback=true

You can also use the PageRequestManager, for example (This code should be located on the client):

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args)
{
if (args.get_error() != undefined)
{
var errorMessage;
if (args.get_response().get_statusCode() == '200')
{
errorMessage = args.get_error().message;
}
else
{
errorMessage = 'An unspecified error occurred. ';
}
args.set_errorHandled(true);
alert(errorMessage);
}
}

That's just what I needed. Thank you.

CascadingDropDowns cant fire OnSelectedIndexChanged client events?

Greetings, all...

I've got a page with a CascadingDropDown setup. On the third dropdown, I want to fire an update panel event to fetch data.

For whatever reason, it does not appear that I can get any of the three dropdowns in the cascade to recognize a client-side OnSelectedIndexChanged event - even when added programmatically in the code file.

The event/action are emitted correctly to the control, but it doesn't seem to fire the event.

I've been trying to find the answer in previous posts and Google, but I don't seem to be finding the answers anywhere. I'm hoping there's someone out in forumland that has seen this before and knows how to resolve the issue.

Thanks in advance for the help,

Ric Castagna

Unless I'm mistaken, OnSelectedIndexChanged is a server-side event, not a client-side one.