Going For AJAX: figure

Monday, March 26, 2012

How Do I Dynamically Update a TabPanel?

New to Ajax, .net and dotnetnuke. I'm trying to figure out something with TabContainers/TabPanels. I want to be fill some form fields on one TabPanel of a TabContainer based on the selected item in a DropDownList on another TabPanel.

Suppose I have something like the code that follows and wanted to put the selected value from the drop down list on Tab 1 into the text box on Tab 2. How would I do that? I am not sure how to access fields on a sibling tab.

Any help would be greatly appreciated.

<asp:UpdatePanel ID="up1" runat="server">

<cc1:TabContainerID="TabContainer1"runat="server"Visible="false">

<cc1:TabPanelID="TabPanel1"runat="server">

<asp:DropDownListID="shopDropDownList"runat="server"

DataSourceID="ShopsDataSource"DataTextField="text"DataValueField="value"

OnSelectedIndexChanged="shopDropDownList_change"AutoPostBack="true" />

</ContentTemplate>

</cc1:TabPanel>

<cc1:TabPanelID="TabPanel2"runat="server">

<asp:TextBox ID="TextBox1" runat="server" />

</ContentTemplate>

</cc1:TabPanel>

</cc1:TabContainer>

</asp:UpdatePanel>

If you need to do this on the client, something like this should work for you:

<scripttype="text/javascript"language="javascript">function pageLoad() {var ddl = $get("<%=DropDownList1.ClientID %>"); $addHandler(ddl,"change", changeHandler); }function changeHandler(e) {debugger;var ddl = $get("<%=DropDownList1.ClientID %>");var tb = $get("<%=TextBox1.ClientID %>"); tb.value = ddl.value; }</script>

-yuriy

Hi bob,

Here is a simple sample. Hope it helps.

ASPX Code

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="TabTest.aspx.cs" Inherits="Tab_TabTest" %>
<!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="up1" runat="server">
<ContentTemplate>
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
<HeaderTemplate>Tab1</HeaderTemplate>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel2" runat="server">
<HeaderTemplate>Tab2</HeaderTemplate>
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

C# Code

using System;using System.Data;using System.Configuration;using System.Collections;using System.Collections.Generic;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partialclass Tab_TabTest : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e) {if (!IsPostBack) { List<int> myList =new List<int>(); myList.Add(1); myList.Add(2);this.DropDownList1.DataSource = myList;this.DropDownList1.DataBind(); } }protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) {this.TabContainer1.ActiveTabIndex = 0;this.Label1.Text =this.DropDownList1.SelectedValue; }}

If I misunderstood you, please let me know.

the provided code works fine for me (it does asynchronous postback to the server and updates the label).

what do you need to change?

-yuriy

Yes. It helps a lot. Thanks.

Saturday, March 24, 2012

How do I add a popup window within an AJAX UpdatePanel

Hi, I am new to AJAX and trying to figure out the following:

I am trying to display a popupwindow within an AJAX UpdatePanel, but when I used the following code with ajax no popup window appears. When I take it out of the update panel it works fine.

Any help would be much appreciated! Thanks.

PublicSub DisplayMessage(ByVal objPageAs System.Web.UI.Page,ByVal messageAsString) 'Replace end of line characters with JavaScript \n newline character. message = Replace(message, vbCrLf,"\n") message = Replace(message, vbCr,"\n") message = Replace(message, vbLf,"\n") message = Replace(message,"""","\""") 'Replace ugly database tags with (slightly) more meaningful text. message = Replace(message,"[DataDirect ADO Sybase Provider]","Sybase Error:") message = Replace(message,"Native Warning code","Error #:") Dim pageTypeAs Type = objPage.GetType() Dim displayNameAsString ="displayMessage" Dim csAs System.Web.UI.ClientScriptManager = objPage.ClientScript If (Not cs.IsStartupScriptRegistered(pageType, displayName))Then Dim displayTextAsString ="alert(""" & message &""");" cs.RegisterStartupScript(pageType, displayName, displayText,True) EndIf EndSub

#########################################################################

The above code is getting called from the below code.

IfNot IsDate(txtStartDate.Text)Then

DisplayMessage(Page,"Please enter a valid start date.")

ReturnFalse

EndIf

unfortunently, when firing server side functions from inside an updatepanel, it cannot make changes to the page, only to objects on the page that are inside the updatepanel. With this said, trying to write a startup script or any type of javascript block from a updatepanel partial postback will not work, probably for the same reason you cannot use the response.write method. You will either need to deal with the full page postback or handle the popup window in the javascript events.

-ALan

Hi,

to inject JavaScript during a partial postback, you should use the RegisterXXX methods of the ScriptManager control.

Hi Garbin,

Even I' looking for a similar kind issue. and I tried your suggestion, but not getting it properly. I'm getting an exception like

The Script tag registered for tpe 'ASP.sections_events_myPage_aspx' and key 'Key' has invalid characters outside of the script tags: alert();. Only properly formated script tags can be registered.

In the code behind I'm calling the function as

ScriptManager.RegisterClientScriptBlock(Me.Page, Me.GetType(), "key", "alert();", False)

I think my parameters are not right. Can you give an example of this function or explain its parameters. I saw the doc on msdn but did't understand it perfectly.

Thanks,

Mehul Mistry

Hi,

Can you please check the following...

Dim script As String = "function test()" & _
" { " & _
" alert('test');" & _
" } "

ScriptManager.RegisterClientScriptBlock(Me, GetType(Page), "TestFunction", script, True)

I did the above stuff in the method which is called on asyncronous callback in AJAX. It gets executed but there is no alert() msg displayed...

Is this the correct way to do it?

Thanks,

Mehul Mistry

Hiorlash,

I think I figured out the solution.Its working for me. For your situation, What you can do is make a small js file or if you have one then add your window opening javasript function inside the js file. ( Make your javascript function take one string parameter to display your msg from code behind, Like you are doing above ).

Now in you aspx page, you must be having ScriptManager. add one element to the script manager... as follows,

<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Scripts>
<asp:ScriptReference Path="MyJavascriptFile.js" />
</Scripts>
</asp:ScriptManager>

and in the code behind, whichever method is called by the asyncronous call of AJAX, call your function as...

ScriptManager.RegisterClientScriptBlock(Me, GetType(Page), "OpenWindow", "fnOpenWindow('myMsg');", True)

This should do the job. Its working for me.

Any better ideas and comment are always welcome :-)

Hiorlash,

Above thing works great... Alternately if you don't want to create a js file then then add your javascript function in your aspx page only in the head section as

// or you can use alert

// alert(myMsg);
}
</script>

and in the DisplayMessage function after you build your message string call the function as

ScriptManager.RegisterClientScriptBlock(Me, GetType(Page), "OpenWindow", "fnOpenWindow(' " & message & " ');", True)

This will also work.

Thanks Mehul,

That works great for me now.

Thanks again,
Orla

Hi, sory to pick up the conversation, but i've got the same problem.

Putting the Javascript on an .JS at the head of the control worked for me. The thing is that i'm using a composite control and i had the javascript inside it. By taking the code and creating an .Js i'm creating dependencies for it.

Is there any way to create the .js, but keeping it inside the composite control?

Thank you.

Monday, March 26, 2012

How Do I Dynamically Update a TabPanel?

Saturday, March 24, 2012

How do I add a popup window within an AJAX UpdatePanel

Going For AJAX

Blog Archive

About Me