Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Monday, March 26, 2012

Instantiating an object of a server-side class in client-side JavaScript

Sorry this might be an easy question, but I couldn't find how to do this.

I want to define an object like,

var myObj = new MyServerSideClass();

MyServerSideClass is defined in the cs code. Is this possible? If it is, how? Thanks in advance.

Checkout the Example of Passing and Returing Complex Types in this doc:
http://www.asp.net/AJAX/Documentation/Live/tutorials/ConsumingWebServicesWithAJAXTutorial.aspx

Intellisense needed for such complex client script library. otherwise, altas will not beco

both for the client control and javascript library.

providing intellisense for client control is probably easier. but for the javascript library?

I agree on that, i wouldnt use Atlas at all if i dont get FULL intellisense everywhere.
Hi,

Atlas is in its CTP stage at the moment, but I'm pretty sure that intellisense support will be added in a future release.

Saturday, March 24, 2012

Internet Explorer Mobile & ATLAS

Hi all,

I have a webservice and ASP.NET ATLAS enabled, and working with IE6. There is not ATLAS controls, it is very simple call from javascript, passing 3 arguments.

I am tying to make it works in Internet Explorer Mobile in a Smartphone with Windows Mobile 5.0, but when I press the button, nothing happens...

In theory, Explorer Mobile supports HTML 4.01 CSS and Extensible HTML (XHTML), and XMLHTTP Request...

Have any try this or something with similar scenario?

Thanks in advance

David

I don't believe the mobile version of internet explorer supports the xmlhttprequest object or has any AJAX support for that matter.

Please, see this bloghttp://blogs.msdn.com/iemobile/archive/2005/11/15/493200.aspx

If IE Mobile supports AJAX and this sentence
xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
, I can't undestand why ATLAS will not support IE Mobile....

This is the function inside WebResource.axd generated by ATLAS that creates XMLHTTPRequest object

window.XMLHttpRequest = function() {
var progIDs = [ 'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP' ];

for (var i = 0; i < progIDs.length; i++) {
try {
var xmlHttp = new ActiveXObject(progIDs[i]);
.....

Very similar no? I think that is imperative that ATLAS works for IE Mobile...


hello.

i really don't understand much about mobile devices...is there any sniffer that can capture the traffic between the browser and the server? (something like fiddler, that is)

InvalidOperationException : Request format is invalid : application/json charset=utf - 8

Can anybody help me guys with this one,

I'm tryng to invoke a web method in my web service from javascript but i keep on getting javascript response Error stating that my webmethod couldn't execute because of this Error (InvalidOperationException : Request format is invalid : application/json charset=utf - 8 )

here is my logic for my web service

[ScriptService]
[WebService(Namespace = "http://www.wipspace.com/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class svrCreateReal : System.Web.Services.WebService
{
private clsLibraryFile objF;
private clsWipReel objWipR;


public svrCreateReal ()
{
objF = new clsLibraryFile();
objWipR = new clsWipReel();
}

[WebMethod]
[ScriptMethod(UseHttpGet = false)]
public int createReelfileCollection(string reelID, string menuID, string fileID )
{
try
{
objWipR.reelID = Convert.ToInt32(Server.HtmlEncode(reelID));
objWipR.reelMenuID = Convert.ToInt32(Server.HtmlEncode(menuID));
objF.fileID = Convert.ToInt32(Server.HtmlEncode(fileID));
return objWipR.createReelMovieCollection(objWipR, objF);
}
catch
{
return -1;
}

}

From my aspx page i call a javascript function that invokes the web method like below

<asp:ScriptManager ID="scriptManager"
runat="server" >
<Services>
<asp:ServiceReference InlineScript="true" Path="adminWipService/svrCreateReal.asmx" />
</Services>
</asp:ScriptManager>

<script type="text/javascript">

function createReel( sender, e )
{
var container = e.get_container();
var item = e.get_droppedItem();
var position = e.get_position();
var fileID = parseInt(item.getAttribute("fileID"));
var menuID = parseInt(container.getAttribute("MenuID"));
var row = position;

var created = svrCreateReal.createReelfileCollection(6, menuID, fileID);

alert(created );

}

thnks very much in advance

cheers

Pay attention on Web.config of your application. It have to contain some declarations. Similarly to it:

-----

<?xml version="1.0"?>
<configuration>
<configSections>
<sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
<sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere" />
<section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" />
<section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" />
</sectionGroup>
</sectionGroup>
</sectionGroup>
</configSections
<system.web>
<pages>
<controls>
<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</controls>
</pages>
<!--
Set compilation debug="true" to insert debugging
symbols into the compiled page. Because this
affects performance, set this value to true only
during development.
-->
<compilation debug="false">
<assemblies>
<add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</assemblies>
</compilation
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers
<httpModules>
<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</httpModules>
</system.web
<system.web.extensions>
<scripting>
<webServices>
<!-- Uncomment this line to customize maxJsonLength and add a custom converter -->
<!--
<jsonSerialization maxJsonLength="500">
<converters>
<add name="ConvertMe" type="Acme.SubAcme.ConvertMeTypeConverter"/>
</converters>
</jsonSerialization>
-->
<!-- Uncomment this line to enable the authentication service. Include requireSSL="true" if appropriate. -->
<!--
<authenticationService enabled="true" requireSSL = "true|false"/>
--
<!-- Uncomment these lines to enable the profile service. To allow profile properties to be retrieved
and modified in ASP.NET AJAX applications, you need to add each property name to the readAccessProperties and
writeAccessProperties attributes. -->
<!--
<profileService enabled="true"
readAccessProperties="propertyname1,propertyname2"
writeAccessProperties="propertyname1,propertyname2" />
-->
</webServices>
<!--
<scriptResourceHandler enableCompression="true" enableCaching="true" />
-->
</scripting>
</system.web.extensions
<system.webServer>
<validation validateIntegratedModeConfiguration="false"/>
<modules>
<add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</modules>
<handlers>
<remove name="WebServiceHandlerFactory-Integrated" />
<add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode"
type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode"
type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
</handlers>
</system.webServer>
</configuration>

Invoke Javascript method after partial postback ?

Howdy All,

This might be an easy one but I don't seem to be able to figure it out.

Basically I have an update panel which contains a button that causes the partial postback. After the postback I'd like it to call a Javascript method.

I tried looking to set it on an atlas object and I even tried some hacks like putting a literal control in the Update Panel and setting the text to <script language=""Javascript"">testFunction();</script>" but still no cigar.

Any help would be greatly appreciated.

Try registering your script on the server-side, during the partial post. The script you register will be executed when the response is received from the partial postback.

Page.ClientScript.RegisterStartupScript

-Tony


in my callback function i havestring js = "alert('s');"; Page.ClientScript.RegisterStartupScript(GetType(), "key", js);It doesn't fire

casaubon:

in my callback function i have string js = "alert('s');"; Page.ClientScript.RegisterStartupScript(GetType(), "key", js); It doesn't fire

You need to wrap your js in <script type="text/javascript"> </script>, or use the overloaded RegisterStartupScript specifying "true" for the last parameter.

Hope this helps,

-Tony

Invoke JavaScript method after partial post back

  Hi,
 Im trying to invoke a javascript method after a partial update has occured from an update panel. I found some code for which i beleive works for an old version, but it doesn't work for the released version.
 Does anyone know how i can invoke a javascript method after post back?
 
 
1 function afterPostback()2 {10 }1112 function PageRequestManagerPropertyChanged(sender, args)13 {14if (args.get_propertyName() =="inPostBack")15 {16if (!$object("_PageRequestManager").get_inPostBack())17 afterPostback();18 }19 }2021 function pageLoad()22 {23 $object("_PageRequestManager").propertyChanged.add(PageRequestManagerPropertyChanged);24 }

You can handle _endRequest to do that. Try something like this:

var prm = Sys.WebForms.PageRequestManager.getInstance();prm.add_endRequest(afterPostback);function afterPostback(sender, args){}

Note: This code has to be placed below the ScriptManager control.


Brilliant, that works a treat.

Thanks

Invoke ModalPopupExtenders .Show() method within javascript code

Hi,

A colleague wrote an extender to validate an address (street name & postal code). He uses a web service for that BUT he didn't write the necessary code in the _onMethodFailed method !

In this method I woud like to display a popup containing 'yes' and 'no' buttons (to ask the customer if he wants to keep the wrong values or no).

Currently, I have an asp:panel with a ModalPopupExtender (which ID is 'AddressErrorPopup') linked on it.

So, in the address validation extender I would like to do something like that :

_onMethodFailed: function(err, response, context) { if (this._popupValue) { var popupExtender = $get(this._popupValue); if (popupExtender) popupExtender.Show(); }}


the _popupValue variable contains 'AddressErrorPopup' : the ID of the ModalPopupExtender.

Problem : the $get(this._popupValue) returns null...

Is there a way to invoke the Show() method of a ModalPopupExtender in the javascript code of an other extender on the same form ?

Thx for your answer...

You need to use $find instead of $get to locate ajax controls. $get is for DOM elements.

Also, make sure that the modalpopup has BehaviorID="AddressErrorPopup" as the actual client ID may be different depending on the naming container hierarchy. Store the BehaviorID in the _popupValue property and then you should find the popup OK regardless of the naming container.


Ok !

Thank you for your help, this is exactly what I needed.

I'm not good at javascript/ajax, sorry for thatConfused


No need to be sorry...that's an easy mistake to make. Working with the ajax toolkit, you will become good at javascriptSmile

Invoking a Web Service through JavaScript

Hi,

I keep getting the 'WebService is undefined' error when I try to

access my Web Service through JavaScript. I have made all necessary changes -added handlers to

the web.config file, included the DLL in the bin directory, included referernce through the

<ScriptManager> tag...

<atlas:ScriptManager ID="ScriptManager" runat="server" enablepartialrendering="true">
<Services>
<atlas:ServiceReference Path="/TestAJAXApp/MyWebService.asmx" />
</Services>
</atlas:ScriptManager>

<script type ="text/javascript">
function MyCustomFunction(MyRecordID, event)
{
var result = MyWebService.GetRecordDescription(MyRecordID, GetCallBack);
}
function GetCallBack(result)
{
Popup('Description' , result.value, false);
}
</script>

What could I be missing? Any suggestions appreciated.

Thanks!

The first thing to double check, is whether the request for the webservice proxy succeeded or not, use fiddler or whatever your favorite http traffic monitoring tool is, and verify that there indeed is a request to an url like /TestAJAXApp/MyWebService.asmx/js and that the response of that is the client javascript proxy for your webservice. My guess is that is failing in some way, and hopefully that will lead you to the problem...

Hope that helps,
-Hao

Invoking CascadingDropDown populate from javascript

Hi,

This question has problably been asked before but I was not able to find something relevant in my search.

I am using cascading dropdown control extenders. The are populated by a client web service method. I would like to invoke the cascading dropdown behaviour using javascript as opposed to user interaction.

Could somebody give me a brief summary to the javascript interface of the CascadingDropDown extender? I want to be able to populated and change the selected index of the corresponding HTML select elements and get the full effect of the cascading dropdown behaviour.

Thank you.

This is a BUMP to my post. I just want a few hints. How can I repopulate the HTML select elements by invoking the default functionality of the CascadeDropdown control extender via javascript. Any hints are very much appreciatted.


BUMP one more time. Someone help please.


Last try to BUMB. If I don't get any feedback I will try to do the processingon the server. So that will defeat the whole Ajax concept but I have no other option.


well, I have the same situation, and did it like this:

var ccd=$find('CCD_" + sControlName +"');

if (!ccd) {return false;}

ccd._onParentChange(null,null);

(this last line triggers the cascading-event)


Hi Attractor,

My understanding of your issue is that your have two questions list below. If I have misunderstood , please feel free to let me know.

attractor:

Could somebody give me a brief summary to the javascript interface of the CascadingDropDown extender?

Please see the CascadingDropDownBehavior.js, all the functions has been listed with a brief summary. One thing should be emphasized that it is not reommended to call a function start with "_". It is just like a inner function. Here is a sample:

get_SelectedValue : function() { /// <value type="String"> /// Selected value of the drop down /// </value> return this._selectedValue; }

attractor:

How can I repopulate the HTML select elements by invoking the default functionality of the CascadeDropdown control extender via javascript.

Based on my research, there's no public method been exposed. So my solution is :

Use javascript to select a different value meanwhile store the original selected vaule somewhere such as a hiddenField. Then afterwards make the stored value as the selected item.

Best regards,

Jonathan.


Thank you for your replies.

I was able to replicate the Cascading DropDown behaviour through the fireEven('onchange');

When calling this method on the Select element it triggers the cascading effect.

I also used the window.setTimeout() method to delay the selection of the new value in the triggered select element until its content has been refreshed.

The code is something like that :

list1.value ="val1"list1.fireEvent('onchange');window.setTimeout("list2.value = 'val2';", 1000);

Unfortunately I was not able to make it work for Mozilla. The dispatchEvent() would not work as expected. Any ideas how I can atchieve this effect in Mozilla?


Hi Attractor,

The simplest way to make your Javascript code be compatible with the main browsers is using Microsoft Ajax Library's functions. In my opnion, you need not use list1.fireEvent('onchange'); Here is my solution, please add these codes to your page.

function pageLoad(){//be called automatically.
$find("<%=Your CascadingDropDown.ClientID%>").add_selectionChanged(onSelectionChanged)
}
function onSelectionChanged(){
alert(1); // add your code here
}

For more details , please dip into the Ajax Control Toolkit's source code.

Best regards,

Jonathan

Invoking javascript routine on dropdown change

I'm trying to implement a ASP.NET 2.0/Ajax page where a client-side javascript routine is invoked when the user changes the value of a dropdown list. The dropdown list is populated in the Page_Load event.

In the aspx file, I declare the drop down as:

<asp:DropDownList ID="cbIDs" runat="server"OnSelectedIndexChanged="idChanged()" >

Visual Studio complains about "'idChanged' is not a member' of the page.

I've tried searching Google and ASP.Net but haven't been able to find an example on how to do this. Can someone please help me out?

Thanks,

Richard

onselectedindexchanged is a server side event. That is not the right place to hook in client-side code.

Doing the searchhttp://www.google.com/search?q=asp.net+dropdownlist+javascript

brings me the first article at: http://weblog.vb-tech.com/nick/archive/2005/03/25/607.aspx

which shows how to add the onchange attribute to your drop down list. There you can hook in a client side event. Be careful to make sure you fire both client-side and server-side events if you need to.

--JJ


richardr:

OnSelectedIndexChanged="idChanged()" >

richardr:

Visual Studio complains about "'idChanged' is not a member' of the page.

OnSelectedIndexChanged is a server side event... so compiler would try to findidChanged()handler in code behind which is not there..

you need to useOnChange event instead of OnSelectedIndexChanged.


a sample code below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
function idChanged()
{
alert("on change event...");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server"onchange="idChanged()">
<asp:ListItem Text="1" Value="1" />
<asp:ListItem Text="2" Value="2" />
<asp:ListItem Text="3" Value="3" />
<asp:ListItem Text="4" Value="4" />
<asp:ListItem Text="5" Value="5" />
</asp:DropDownList>
</div>
</form>
</body>
</html>

Wednesday, March 21, 2012

is calling to a webservice ?

I have a javascript that run every 5 mins. However, if the client is calling a webservice and wating for the result, i want to delay the script execution. So is there anyway to know that the client is calling to a webservice ?

Nothing out of the box, that I'm aware of. If you control the webservice call (e.g. calling it as a result of an event) then the simplest thing would be to populate a global boolean to true when the call gets sent and then change it to false in the onComplete and OnError handlers for the webservice.


Hi,MrVithan

Try the folloeing code:

Default.aspx:

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

<!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>

<script type="text/javascript">
// This function calls the Web Service method.
function EchoUserInput()
{
//Do something you want to do, e.g.delay the script execution
var echoElem = document.getElementById("EnteredValue");
WebService.HelloWorld(echoElem.value,SucceededCallback);
}
// This is the callback function that processes the Web Service return value.
function SucceededCallback(result)
{
var RsltElem = document.getElementById("Results");
RsltElem.innerHTML = result;
// Change the delay of the script execution back.
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="WebService.asmx" />
</Services>
</asp:ScriptManager>
<div>
<h2>
Simple Web Service</h2>
<p>
Calling a simple service that echoes the user's input and returns the current server
time.</p>
<input id="EnteredValue" type="text" />
<input id="EchoButton" type="button" value="Echo" onclick="EchoUserInput()" />
</div>
</form>
<hr />
<div>
<span id="Results"></span>
</div>
</body>
</html>

WebService.asmx:

<%@. WebService Language="C#" Class="WebService" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class WebService : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld(String input)
{
System.Threading.Thread.Sleep(3000);
string inputString = Server.HtmlEncode(input);
if (!String.IsNullOrEmpty(inputString))
{
return String.Format("You entered {0}. The current time is {1}.", inputString, DateTime.Now);
}
else
{
return "The input string was null or empty.";
}
}
}

Hope this helps.

Let me know if you need more info.
You can also see this thread for more help:http://forums.asp.net/t/1115018.aspx

Is it possible to add TabPanel from javascript or WebMethod?

I have a TabContainer that load from aspx code with a default TabPanel.Is it possible to add TabPanel dynamically in that container from client-side scripts?

Hope my question was clear :)

JKB

Initially,I try to add hard-coded HTML element of TabPanel from this script.But not Work properly!

Note:My TabContainer "MainTabContainer" is place on the ContentPlaceHolder.

1<script language="javascript">
2 function AddTab()
3 {
4 var num = 1;
5
6 //TabHead
7 ///////////////////////////////
8 var _spanActive = document.createElement('span');
9
10 //This seem to be the class of activated tab
11 //_spanOut.setAttribute('class','ajax__tab_active');
12
13 var _spanOut = document.createElement('span');
14 _spanOut.setAttribute('className','ajax__tab_outer');
15 _spanActive.appendChild(_spanOut);
16
17 var _spanIn = document.createElement('span');
18 _spanIn.setAttribute('className','ajax__tab_inner');
19 _spanOut.appendChild(_spanIn);
20
21 var _headID = '__tab_ctl00_ContentPlaceHolder1_MainTabContainer_Module'+num;
22 var _spanHead = document.createElement('span');
23
24 //**********
25 _spanHead.setAttribute('_events','[object Object]');
26
27
28 _spanHead.setAttribute('className','ajax__tab_tab');
29 _spanHead.setAttribute('id',_headID);
30 _spanHead.innerHTML = "MyHeader";
31 _spanIn.appendChild(_spanHead);
32
33 var tabHead = $get("ctl00_ContentPlaceHolder1_MainTabContainer_header");
34 tabHead.appendChild(_spanActive);
35 ///////////////////////////////
36
37 //TabBody
38 //////////////////////////////
39 //Main
40 var tabID = 'ctl00_ContentPlaceHolder1_MainTabContainer_Module'+num;
41 var _tabHtml = document.createElement('div');
42 _tabHtml.setAttribute('className','ajax__tab_panel');
43
44 //******
45 _tabHtml.setAttribute('control','[object Object]');
46
47 _tabHtml.setAttribute('id',tabID);
48 _tabHtml.style.visibility='hidden';
49
50 //Body
51 var bodyID = tabID+'_ctl00_body';
52 var _tabBody = document.createElement('div');
53 _tabBody.setAttribute('id',bodyID);
54
55 _tabHtml.appendChild(_tabBody);
56
57 var tabMainBody = $get("ctl00_ContentPlaceHolder1_MainTabContainer_body");
58 tabMainBody.appendChild(_tabHtml);
59
60 ///////////////////////////////////////////////////////////
61
62 var tabCon = $get("ctl00_ContentPlaceHolder1_MainTabContainer");
63 var stHtml = tabCon.innerHTML;
64 //alert(stHtml);
65 num+=1;
66 }
67
68</script>

The TabContainer add new tab to its but every TabPanel function doesn't work. i.e.The tab cannot be selected.

Any suggestion?


Hi,

Here is the essential part of adding panel on client side:

<inputid="Button1"type="button"value="Create Tab"onclick=" createTab();"/>
<inputid="persist"/>

functioncreateTab() {
var newPanel =newAjaxControlToolkit.TabPanel($get("persist"));

newPanel.set_owner(tc);
newPanel.initialize();
Array.add(tc.get_tabs(),newPanel);

$create(AjaxControlToolkit.TabPanel, {"headerTab":$get("__tab_TabContainer1_p4")},null,{"owner":"TabContainer1"},$get("TabContainer1_p4"));

}


Raymond Wen - MSFT:

Hi,

Here is the essential part of adding panel on client side:

<inputid="Button1"type="button"value="Create Tab"onclick=" createTab();"/>
<inputid="persist"/>

functioncreateTab() {
var newPanel =newAjaxControlToolkit.TabPanel($get("persist"));

newPanel.set_owner(tc);
newPanel.initialize();
Array.add(tc.get_tabs(),newPanel);

$create(AjaxControlToolkit.TabPanel, {"headerTab":$get("__tab_TabContainer1_p4")},null,{"owner":"TabContainer1"},$get("TabContainer1_p4"));

}

Problem occur while running script and throw exception following :

-----------

Error : 'tc' is undefined

Code : 0

-----------

This run on IE6 SP2

What's the problem?


Anyway,Thank you for your code.


tc is a global variable holding reference to the TabContainer instance on the page.

tc = $find("TabContainer1");


Raymond Wen - MSFT:

tc is a global variable holding reference to the TabContainer instance on the page.

tc = $find("TabContainer1");

After I follow your instruction.an error appear :

Error : 'this._header.parentNode' is null or not an object

What can i do?

Sorry for some stupid question,I'm a beginner in javascript. :-)


A working example:

<%@. 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"></script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Untitled Page</title> <script type="text/javascript"> function addTab() { var headerHolder = $get("TabContainer1_header"); var tabHeader = $get("newheader"); headerHolder.appendChild(tabHeader); var contentHolder = $get("TabContainer1_body"); var tab = $get("newpanel"); contentHolder.appendChild(tab); tab.style.display = "none"; $create(AjaxControlToolkit.TabPanel, {"headerTab":$get("newheader")}, null, {"owner":"TabContainer1"}, $get("newpanel")); } </script></head><body><form id="form1" runat="server"><asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager><div> <input id="Button1" type="button" value="button" onclick="addTab();"/> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0"> <ajaxToolkit:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1"> <HeaderTemplate>tab 1</HeaderTemplate> <ContentTemplate>Content of tab 1</ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2"> <HeaderTemplate>tab 2</HeaderTemplate> <ContentTemplate>Content of tab 2</ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3"> <HeaderTemplate>tab 3</HeaderTemplate> <ContentTemplate>Content of tab 3</ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> <br /> <br /> <br /> <br /> <span id="newheader">TabPanel4</span><div id="newpanel">this is new panel</div></div></form></body></html>