Going For AJAX: controls

Showing posts with label controls. Show all posts

Wednesday, March 28, 2012

How do I use external scripts in controls, with brittle-old-atlas?

Hi, I realise Atlas is still in preview, but unfortunately it doesnt stop customer's demands :(

I've a server control that will not work with Atlas. I've whittled the problem down to this external script line.

Here's the kicker, the embedded script referred to above is just a small JS file with everything commented out.

If I don't register the script, the page works, if I do register thescript, then my simple little page with an UpdatePanel fails to updatewhen a postback happens. Please refer to my earlier post on thesame problem for the actual aspx pagehttp://forums.asp.net/thread/1318847.aspx

The script line above appears in the rendered code in the correct place

Any and all help gratefully received, thanks!

JimHas nobody else experienced this?

I've reproduced it with a simple control that does nothing more than register an embedded script (which is empty).

Thanks
Jim
Turns out it works OK in Firefox, just not in IE6. Kind of ironic.

Please somebody, put me out of my misery!

Jim

Nevermind, I've had to work around it, looks like a bug in Atlas :(

How do I use Animation without server-side controls? (mission impossible?)

Hello everyone,

I post this question again, since I made some more investigations.

The question is how do I use Animation without server-side controls?

I understand that what I need is:

1. Some scripts. I think this is the complete list:
<scriptsrc="bin/MicrosoftAjax.js"type="text/javascript"></script>
<scriptsrc="bin/MicrosoftAjaxWebForms.js"type="text/javascript"></script>
<scriptsrc="bin/MicrosoftAjaxTimer.js"type="text/javascript"></script>
<scriptsrc="bin/BaseScripts.js"type="text/javascript"></script>
<scriptsrc="bin/Animations.js"type="text/javascript"></script>
<scriptsrc="bin/AnimationBehavior.js"type="text/javascript"></script>

2. Call Sys.Application.initialize();// somewhere within the page

3. Create component:var myAnimationComponent = $create(AjaxControlToolkit.Animation.AnimationBehavior,null,null,null, $get("MyTesButton"));

4. Set "myAnimationComponent" properties.

5. Call: Sys.Application.add_init(function() { myAnimationComponent });

Probably that's about right.

The problem I have is with the step 3. It fails in MicrosoftAjax.js script Line: 6, Character: 77054, Error: '_behaviors' is null or not an object. Further investigation reveals that the error occurs in the following line (MicrosoftAjax.debug.js, Line 6210):

var behaviors = element._behaviors;

The above line assumes that "element" object has "_behaviors" property, which may not be true. I thinkit is abug, Sys.UI.Behavior.getBehaviors() function should be used instead - see MicrosoftAjax.debug.js, line 6291.

Could anyone help?

Tomasz Jastrzebski

P.S. I know it is not meant to be used without corresponding server-side controls, but I would like to try. The reason: my hosting provider will not install AJAX and, without going into much details, I can not change hosting provider right now. So, I thought myself, may be AJAX Library can bring some value and I can still use it, instead of Prototype (http://prototype.conio.net/) based solutions.

Hi Tom,

No , its not impossible , its very much possible Wink .

Check out this link which talks about using animations from the client side .

http://blogs.msdn.com/phaniraj/archive/2007/01/20/animation-control-adding-cool-animations-in-your-application.aspx

Hope this Helps.

Thanks,

Phanatic

Hi,

Meanwhile, I came to the same conclusion, and got it working.

There is, however, one thing I do not quite understand. AnimationBehavior object, containing Animations, has to be "appended" to an existing control. Why this AnimationBehavior object can not be created programaticaly, and JSON string for the entire object/property tree has to be used instead?? Example: AnimationBehavior.OnClick property only accepts JSON string, making it impossible to programmatically an set array of Animations. Please someone prove me if I am wrong.

It looks like MS architects cut some corners, making the final product not as good (read: client-side script friendly) as it could easily be.

Thanks,

Tomasz Jastrzebski

Hi Tomasz,

The AnimationBehavior is meant to serve as a bridge between animations defined on the server and objects living on the client. All it does is play an animation (that it creates from a JSON string representing the server-side XML markup) whenever an event on the element is raised. If you're already writing JavaScript on the client, it's recommended that you just use the animations directly (check out the "static"play function on every animation) and play them whenever specific events are fired on your element.

We do this in the Toolkit too. For other controls that use animation (like CollapsiblePanel, Calendar, etc.), they just create new instances of classes derived from AjaxControlToolkit.Animation.Animation.

Thanks,
Ted

Hi Ted,

According to what you have said, the attached below example should work, but it does not, and I cannot figure out what is wrong with this picture. Could you, may be, take a look?

Thank you,

Tomasz

<%@.PageLanguage="C#" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Animation Demo</title>

<metaname="description"content="MS Ajax Animation Demo"/>

<metaname="author"content="Tomasz Jastrzebski"/>

</head>

<bodystyle="text-align:center;">

<formid="form1"runat="server">

<scriptsrc="./scripts/MicrosoftAjax.debug.js"type="text/javascript"></script>

<scriptsrc="./scripts/MicrosoftAjaxWebForms.debug.js"type="text/javascript"></script>

<scriptsrc="./scripts/MicrosoftAjaxTimer.debug.js"type="text/javascript"></script>

<scriptsrc="./scripts/Animations.js"type="text/javascript"></script>

<scriptsrc="./scripts/BaseScripts.js"type="text/javascript"></script>

<div>

<inputtype="button"value="Click Me"onclick="show();return false;"/>

</div>

<divid="popup"style="display:none; cursor:hand;"title="click to hide"onclick="hide();">

<tablestyle="width:100%; height:100%;">

TEST

</td></tr>

</table>

</div>

<scripttype="text/javascript">

<!--

Sys.Application.initialize();

function show() {

var animation =new AjaxControlToolkit.Animation.SequenceAnimation();

// StyleAction(target, duration, fps, attribute, value)

var action =new AjaxControlToolkit.Animation.StyleAction("popup",null,null,"display","block");

animation.add(action);

// ResizeAnimation(target, duration, fps, width, height, unit)

action =new AjaxControlToolkit.Animation.ResizeAnimation("popup", .3, 25, 300, 300,"px");

animation.add(action);

animation.play("popup",null,null);

}

function hide() {

var animation =new AjaxControlToolkit.Animation.SequenceAnimation();

var action =new AjaxControlToolkit.Animation.ResizeAnimation("popup", .3, 25, 0, 0,"px");

animation.add(action);

action =new AjaxControlToolkit.Animation.StyleAction("popup",null,null,"display","none");

animation.add(action);

animation.play("popup",null,null);

}

//-->

</script>

</form>

</body>

</html>

Hi Tomasz,

You're definitely missing some required scripts. I don't see Common.js, (the Toolkit's) Timer.js, etc.

Thanks,
Ted

Hi Ted,

Thank you for the answer. Here is another version, with all the relevant scripts I could think of.

It still does not work :(

Please help.

Tomasz

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Animation Demo</title>

<metaname="description"content="MS Ajax Animation Demo"/>

<metaname="author"content="Tomasz Jastrzebski"/>

</head>

<bodystyle="text-align:center;">

<formid="form1"runat="server">

<scriptsrc="./scripts/MicrosoftAjax.debug.js"type="text/javascript"></script>

<scriptsrc="./scripts/MicrosoftAjaxWebForms.debug.js"type="text/javascript"></script>

<scriptsrc="./scripts/MicrosoftAjaxTimer.debug.js"type="text/javascript"></script>

<scriptsrc="./scripts/AjaxControlToolkit/Common/Common.js"type="text/javascript"></script>

<scriptsrc="./scripts/AjaxControlToolkit/Compat/Timer/Timer.js"type="text/javascript"></script>

<scriptsrc="./scripts/AjaxControlToolkit/Common/Threading.js"type="text/javascript"></script>

<scriptsrc="./scripts/AjaxControlToolkit/Animation/Animations.js"type="text/javascript"></script>

<scriptsrc="./scripts/AjaxControlToolkit/ExtenderBase/BaseScripts.js"type="text/javascript"></script>

<scriptsrc="./scripts/AjaxControlToolkit/Animation/AnimationBehavior.js"type="text/javascript"></script>

<div>

<inputtype="button"value="Click Me"onclick="show();return false;"/>

</div>

<divid="popup"style="display:none; cursor:hand;"title="click to hide"onclick="hide();">

<tablestyle="width:100%; height:100%;">

TEST

</td></tr>

</table>

</div>

<scripttype="text/javascript">

<!--

Sys.Application.initialize();

function show() {

var animation =new AjaxControlToolkit.Animation.SequenceAnimation();

// StyleAction(target, duration, fps, attribute, value)

var action =new AjaxControlToolkit.Animation.StyleAction("popup",null,null,"display","block");

animation.add(action);

// ResizeAnimation(target, duration, fps, width, height, unit)

action =new AjaxControlToolkit.Animation.ResizeAnimation("popup", .3, 25, 300, 300,"px");

animation.add(action);

animation.play("popup",null,null);

}

function hide() {

var animation =new AjaxControlToolkit.Animation.SequenceAnimation();

var action =new AjaxControlToolkit.Animation.ResizeAnimation("popup", .3, 25, 0, 0,"px");

animation.add(action);

action =new AjaxControlToolkit.Animation.StyleAction("popup",null,null,"display","none");

animation.add(action);

animation.play("popup",null,null);

}

//-->

</script>

</form>

</body>

</html>

Hi,

Take a look at this blogpost to see an example of using MS Ajax AnimationControls without any Server-Side Code.

Using MS Ajax Animations From the Client-Side

Hope this helps

Ach, I see, so "target" argument must be passed as reference, rather than element name.

I am attaching my revised, and working demo.

Thank you!

Tomasz

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Animation Demo</title>

<metaname="description"content="MS Ajax Animation Demo"/>

<metaname="author"content="Tomasz Jastrzebski"/>

</head>

<body>

<scriptsrc="./scripts/MicrosoftAjax.js"type="text/javascript"></script>

<scriptsrc="./scripts/AjaxControlToolkit/Common/Common.js"type="text/javascript"></script>

<scriptsrc="./scripts/AjaxControlToolkit/Compat/Timer/Timer.js"type="text/javascript"></script>

<scriptsrc="./scripts/AjaxControlToolkit/Animation/Animations.js"type="text/javascript"></script>

<scriptsrc="./scripts/AjaxControlToolkit/ExtenderBase/BaseScripts.js"type="text/javascript"></script>

<inputtype="button"value="Click Me"onclick="show();return false;"/>

<br/>

<divid="popup"style="display:none; cursor:pointer; cursor:hand; border:solid 1px black;

width:50px; height:25px;"title="click to hide"onclick="hide();">

<tablestyle="width:100%; height:100%;">

TEST

</td></tr>

</table>

</div>

<scripttype="text/javascript">

<!--

Sys.Application.initialize();

function show() {

var animation =new AjaxControlToolkit.Animation.SequenceAnimation();

// StyleAction(target, duration, fps, attribute, value)

var action =new AjaxControlToolkit.Animation.StyleAction($get("popup"),null,null,"display","block");

animation.add(action);

// ResizeAnimation(target, duration, fps, width, height, unit)

action =new AjaxControlToolkit.Animation.ResizeAnimation($get("popup"), .3, 25, 300, 300,"px");

animation.add(action);

animation.play("popup",null,null);

}

function hide() {

var animation =new AjaxControlToolkit.Animation.SequenceAnimation();

var action =new AjaxControlToolkit.Animation.ResizeAnimation($get("popup"), .3, 25, 50, 25,"px");

animation.add(action);

action =new AjaxControlToolkit.Animation.StyleAction($get("popup"),null,null,"display","none");

animation.add(action);

animation.play($get("popup"),null,null);

}

//-->

</script>

</body>

</html>

Hi,

Glad to know that resolved it .

Could you please mark my post as the reply ?

One more comment: it seems that this method of using AJAX scripts has a limited use.

Animation created this way is characterized by a significant delay between steps, even when duration=0. It seems that it is a bug.

I am attaching another demo. Note the the delay before the text color changes.

Also, for any reason StyleAction with "background-color" CSS property does not work.

Thank you,

Tomasz

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Animation Demo</title>

<metaname="description"content="MS Ajax Animation Demo"/>

<metaname="author"content="Tomasz Jastrzebski"/>

</head>

<body>

<scriptsrc="./scripts/MicrosoftAjax.js"type="text/javascript"></script>

<scriptsrc="./scripts/AjaxControlToolkit/Common/Common.js"type="text/javascript"></script>

<scriptsrc="./scripts/AjaxControlToolkit/Compat/Timer/Timer.js"type="text/javascript"></script>

<scriptsrc="./scripts/AjaxControlToolkit/Animation/Animations.js"type="text/javascript"></script>

<scriptsrc="./scripts/AjaxControlToolkit/ExtenderBase/BaseScripts.js"type="text/javascript"></script>

<inputtype="button"value="Click Me"onclick="show();return false;"/>

<br/>

<divid="popup"style="display:none; cursor:pointer; cursor:hand; border:solid 1px black;

width:50px; height:25px;color:Red;"title="click to hide"onclick="hide();">

<tablestyle="width:100%; height:100%;">

TEST

</td></tr>

</table>

</div>

<scripttype="text/javascript">

<!--

Sys.Application.initialize();

function show() {

var popup = $get("popup");

var animation =new AjaxControlToolkit.Animation.SequenceAnimation();

// StyleAction(target, duration, fps, attribute, value)

var action =new AjaxControlToolkit.Animation.StyleAction(popup,null,null,"display","block");

animation.add(action);

// ResizeAnimation(target, duration, fps, width, height, unit)

action =new AjaxControlToolkit.Animation.ResizeAnimation(popup, .3, 25, 300, 300,"px");

animation.add(action);

action =new AjaxControlToolkit.Animation.StyleAction(popup, 0, 25,"color","Green");

animation.add(action);

animation.play(popup,null,null);

}

function hide() {

var popup = $get("popup");

var animation =new AjaxControlToolkit.Animation.SequenceAnimation();

var action =new AjaxControlToolkit.Animation.StyleAction(popup, 0, 25,"color","Red");

animation.add(action);

action =new AjaxControlToolkit.Animation.ResizeAnimation(popup, .3, 25, 50, 25,"px");

animation.add(action);

action =new AjaxControlToolkit.Animation.StyleAction(popup,null,null,"display","none");

animation.add(action);

animation.play(popup,null,null);

}

//-->

</script>

</body>

</html>

If you set the Duration to Zero , MS AJAX will automatically calculate the duration of the animation( which may or may not be fast ).

To make it move faster , set the duration to be 0.01.

For the

"Also, for any reason StyleAction with "background-color" CSS property does not work."

Check the animation reference which talks about paramters to the StyleAction

http://ajax.asp.net/ajaxtoolkit/Walkthrough/AnimationReference.aspx#PropertyAnimation

"Note that for thestyle property, the key must be in a JavaScript friendly format (i.e.backgroundColor instead ofbackground-color). "

Try usingbackgroundColor instead of "background-color" and it should work

Thank you for your help! That was it. I blindly assumed that StyleAction happens immediately.

Complete, revised and working solution attached.

Tomasz

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Animation Demo</title>

<metaname="description"content="MS Ajax Animation Demo"/>

<metaname="author"content="Tomasz Jastrzebski"/>

</head>

<body>

<scriptsrc="./scripts/MicrosoftAjax.js"type="text/javascript"></script>

<scriptsrc="./scripts/AjaxControlToolkit/Common/Common.js"type="text/javascript"></script>

<scriptsrc="./scripts/AjaxControlToolkit/Compat/Timer/Timer.js"type="text/javascript"></script>

<scriptsrc="./scripts/AjaxControlToolkit/Animation/Animations.js"type="text/javascript"></script>

<scriptsrc="./scripts/AjaxControlToolkit/ExtenderBase/BaseScripts.js"type="text/javascript"></script>

<inputtype="button"value="Click Me"onclick="show();return false;"/>

<br/>

<divid="popup"style="display:none; cursor:pointer; cursor:hand; border:solid 1px black;

width:50px; height:25px;background-color:#FFF;"title="click to hide"onclick="hide();">

<tablestyle="width:100%; height:100%;">

TEST

</td></tr>

</table>

</div>

<scripttype="text/javascript">

<!--

Sys.Application.initialize();

function show() {

var popup = $get("popup");

// target, duration, fps, animations, iterations

var animation =new AjaxControlToolkit.Animation.SequenceAnimation();

// StyleAction(target, duration, fps, attribute, value)

var action =new AjaxControlToolkit.Animation.StyleAction(popup, 0.01,null,"display","block");

animation.add(action);

// ResizeAnimation(target, duration, fps, width, height, unit)

action =new AjaxControlToolkit.Animation.ResizeAnimation(popup, .3, 25, 300, 300,"px");

animation.add(action);

action =new AjaxControlToolkit.Animation.StyleAction(popup, 0.01,null,"backgroundColor","#DDD");

animation.add(action);

animation.play(popup,null,null);

}

function hide() {

var popup = $get("popup");

var animation =new AjaxControlToolkit.Animation.SequenceAnimation();

var action =new AjaxControlToolkit.Animation.StyleAction(popup, 0.01,null,"backgroundColor","#FFF");

animation.add(action);

action =new AjaxControlToolkit.Animation.ResizeAnimation(popup, .3, 25, 50, 25,"px");

animation.add(action);

action =new AjaxControlToolkit.Animation.StyleAction(popup, 0.01,null,"display","none");

animation.add(action);

animation.play(popup,null,null);

}

//-->

</script>

</body>

</html>

You are welcome , Glad we could help Big Smile .

I just tried out the modified script and its really cool.

Happy Coding !!

How do I use AJAX controls when my site was not created with AJAX enabled?

My site is not originally created with AJAX Conotrol Toolkit Web Site. How do I use the TabContainer and TabPanel?

Step 1 - Add the following references to your project...

.NET: System.Web.Extensions

.NET: System.Web.Extensions.Design

PROJECT / BROWSE: AjaxControlToolkit

Step 2 - Modify your web.config (add in the bits you don't have)

<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><compilation debug="true"><assemblies><add assembly="System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/><add assembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/><add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/><add assembly="System.Web.Extensions.Design, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/><add assembly="System.Management, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/></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.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>

Step 3 - Top of your aspx page

@.RegisterAssembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"Namespace="System.Web.UI"TagPrefix="asp" %>
<%@.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="ajaxToolkit" %>

I think that's about it!

Thanks! I'll give that a try. By the way, does the IIS server needs to have some kind of update for all my AJAX enabled pages to work?

As long as you've installed the ASP.NET AJAX (downloadable from this site ajax.asp.net) then you'll be fine - it has to be installed on the machine you're using as the web server as it places itself in the GAC.

How do I start using AJAX controls on an existing project?

I went through the video tutorial where it had me open a template project, then add a confirmbuttonextender which worked very well. I noticed when i opened the template on the aspx page by following the videos instructions, it already contained a scriptmanager. On my existing poject I do the same steps to setup the button control, only this time i manually added a scriptmanager, but my button does nothing. Is there something i have to do to my project to enable it to Use the AJAX controls or something I have to do to the scriptmanager?

jwkeenan:
I went through the video tutorial where it had me open a template project, then add a confirmbuttonextender which worked very well. I noticed when i opened the template on the aspx page by following the videos instructions, it already contained a scriptmanager. On my existing poject I do the same steps to setup the button control, only this time i manually added a scriptmanager, but my button does nothing. Is there something i have to do to my project to enable it to Use the AJAX controls or something I have to do to the scriptmanager?

also there is a confiuration.

the best way to start using AJAX controls on an existing project . open an ASP.NET AJAX-Enabled Web Site . then add the pages in the existing project.

Regards.

ok i opened a new asp.net ajax web enabled site and added all the items form my other project, but the control still does nothing. Any other ideas i can try?

Hi, I try this way several times. I had several project and do this way.

note: don't add the web.config file from the exist project.

is ther an error appear to you?

It works! I was reloading my old web config file. Thanks for your help.

I started by...

Downloaded the ASP.NET AJAX Control Toolkit and load it's sample website into an instance of vs2005. You can run the sample website in debug mode and copy/paste desired code segments directly into your application. After you get the hang of specific controls then you can pick them directly from your AJAX Control Toolkit tab on the tools browser. This process will also helps in understanding the usage of the update panel.

PS - check out my schools site at:www.jeromessite.com.

If you like the way it works the let me know and I will direct you to the source code.

Thanks,

Jerome

How do I make atlas pages pass W3C Validator?

Whenever I try to validate asp.net pages with atlas controls on the W3C Validation Service I get errors like this:

ErrorLine 506 column 19:there is no attribute "xmlns:script".
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005" xmlns:atlascon

and

ErrorLine 506 column 93:there is no attribute "xmlns:atlascontrolextender".
...ipt/2005" xmlns:atlascontrolextender="atlascontrolextender" xmlns:atlascontro

I was really surprised this didn't work especially when it says at the top that it has imported these namespaces:

http://schemas.microsoft.com/xml-script/2005atlascontrolextenderatlascontroltoolkit

Is there something that I'm supposed to do to make this work that I'm missing?

I'm not an expert, but Ithink that if you were to convert all XML script tags inside the (XHTML) <script> tag to be prefixed with script:, it would work. E.g.:

<script:page xmlns:script="http://schemas.microsoft.com/xml-script/2005"...>
 <script:otherTag>
 </script:otherTag>
</script:page>

How do do this, though, is anyone's guess :(.

Monday, March 26, 2012

How do I install the toolkit controls?

Incredibly novice question I know. I'm using Visual Web Developer 2005 Express Edition, have download the ZIP containing all toolkit controls and samples, but how do I add the controls?

Thanks in advance

Mark

what you want to do is right-click on the control toolbox and goto choose items, then goto browse and navigate to where ever you unzipped the ajax control toolkit .dll file. Selecting this should add the controls to your toolbox list and select them all, so then click apply and you should be good

check this out if you need further help

http://ajax.asp.net/ajaxtoolkit/Walkthrough/Setup.aspx

Thanks pal!

How do I get Javascript Inside Content Template to fire on postback

I have 3 ASP controls inside of a ContentTemplate (some of mysyntax may be a little off below (doing it from memory here) but you'll get the idea):

<asp:dropdownlist id= "control1" runat="server".../>
<asp:dropdownlist id "control2" runat="server".../.../>
<input type='button' onclick ='changeControlVisibility();' "control1".../>
<script type='Javascript>
'changeControlVisibility();
</script>

</contenttemplate>

Now, the''changeControlVisibility' javascript SETS a hidden value back and forth from 1 to 0 each time its clicked,AND it sets the 'style.visibility' property of both Control1 and Control2 .

So, when the changeControlVisibility runs during the the Load of the page, Control1 is then visible and Control2 is not visible. After the page has been loaded, each time the BUTTON is clicked after that, its the opposite actions (control1 =hidden & control2=visible) to (control1-visible & control2=hidden). This all works great.

The issue is this, when the selectedindexchanged of either of the dropdowns fires a postback (which is what I want) the

<script type='Javascript>

'changeControlVisibility();

</script>

never gets called or run, therefore all the controls within the contenttemplate get set to style.visiblity =visible (so they all appear) becasue that script never gets called during the postback.

Any suggestions on how to get it run or any good workarounds?

Thanks very much and I will immediated mark the issue resolved to the genius who comes up with a solid answer.

You can solve this by having that JavaScript outside of your UpdatePanel (in the <head> tag would work) of your page and then call it everytime the UpdatePanel gets updated. Have a look at the PageRequestManager class which enables you to execute JavaScript before, during, after UpdatePanels are loaded.

scripttype="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
function pageLoaded(sender, args){
if (args.get_panelsUpdated().length > 0){
changeControlVisibility();
}
}
</script>

That's a basic example and you can add better checks for specific UpdatePanels but you get the idea.

thanks, that sound like the answer.

last thing, it looks like in your example that the line 'Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);'

is adding a new script, if I am wanting to call an existing one, is there a differnt even I should use?

Never mind, i get it now...

So when I create my javascript then

'Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

is actually part of my actual javascript.

thanks so much!

Cool. Yes.

I had started to reply to your other message:

"
pageLoaded is name of the handler method that gets called, you can name it anything and have it execute any existing script also.

Details about the pageLoaded event can be found here:
http://ajax.asp.net/docs/ClientReference/Sys.WebForms/PageRequestManagerClass/PageRequestManagerPageLoadedEvent.aspx
"

Sounds like you've got it.

Cheers,
Al

Thanks Al you made my day!

How do I consume a JavaScript object on the main page in an ASCX control?

Hello,

I am using the ASP.Net AJAX client side libraries, and I want to be able to write Web User Controls (ASCX) that I dynamically load into my site. I want to be able to have a global object in my main page that is used by each ASCX control that is loaded into the page. As soon as the ASCX control is loaded, I want it run its script to call a method in the global object.

I am having a "timing problem" with my code. In order to use the ASP.Net AJAX libraries (like the "Type" object to register namespaces, etc.), I have placed the JavaScript on the main page in the "pageLoad" function.

Right now I am using the "setTimeout" function in my ASCX script to delay it a few seconds so I can be sure that the script in the main page has completely loaded before I make a call to the global object.

Is there any way that I can ensure that the script on the main page has loaded and stop using the "setTimeout" method in my ASCX script?

Here is the markup for my main page…

1<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="StartupScriptTest._Default" %>23<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>45<%@dotnet.itags.org. Register src="WebUserControl1.ascx" tagname="WebUserControl1" tagprefix="uc1" %>67<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">89<html xmlns="http://www.w3.org/1999/xhtml" >10<head runat="server">11 <title>Untitled Page</title>12 <script type="text/javascript">1314 var x = null; // <- I want to access this in the ascx control after pageLoad is finished1516 function pageLoad()17 {18 Type.registerNamespace('MyNamespace');1920 MyNamespace.MyClass = function()21 {22 MyNamespace.MyClass.initializeBase(this);23 }2425 MyNamespace.MyClass.prototype =26 {27 sayHello : function(message)28 {29 alert(message);30 }31 }3233 MyNamespace.MyClass.registerClass("MyNamespace.MyClass");3435 x = new MyNamespace.MyClass();36 }3738</head>39<body>40 <form id="form1" runat="server">41 <div42"ToolkitScriptManager1" runat="server">43 </cc1:ToolkitScriptManager>44 </div>45 <uc1:WebUserControl1 ID="WebUserControl11" runat="server" />46 </form>47</body>48</html>49

…and here is the markup for my ASCX control…

1<%@dotnet.itags.org. Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="StartupScriptTest.WebUserControl1" %>2<script type="text/javascript">34 setTimeout('x.sayHello("hello")', 1000); // <- Any way to not use 'setTimeout'?56<>  
Thank you for your help,
Dave

hello.

i'll just enumerate the things i think that are important:

1. do you need to define the class in the load event? I think that you can put it outside, in an external file and load it so that it's available at the begining of the page

2. are you wrapping any html control or behavior that exists on the page? if not, then i think that you can also insert your x = new class() at the begining of the class declaration.

Hi restating what Luis has said, you gotto implement something like this.,

Create a .js file consider sample.js.

Put this code inside

Type.registerNamespace('MyNamespace');

MyNamespace.MyClass = function() { MyNamespace.MyClass.initializeBase(this); } MyNamespace.MyClass.prototype = { sayHello : function(message) { alert(message); } } if ( typeof (Sys) !== 'undefined' ) Sys.Application.notifyScriptLoaded();

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

Then create the global variable inside your function. var x = new MyNamespace.MyClass();

Saturday, March 24, 2012

How do i access controls inside the update progress or update panel.

How do i access controls under the update progress or update panel.

I have 1 Update progress then i want to access the label inside the update progess. I want to change the text property of the label when my edit image button allter it. thanks

You will need to find the control recursively. However, the FindControl method will not find controls recursviely. Use this cool method FindControlRecursive(Control root, string id) by Jeff Atwood. The reason you cant access them otherwise is because they are child controls. Visit Jeff Atwoods article athttp://www.codinghorror.com/blog/archives/000307.html I use that to find controls. Once you find the control you will need to cast it to the type of control it is. Example:

TextBox tb = (TextBox)FindControlRecursive(Page,"txtNameOfControl");

tb.Text ="Hello there";

The above is an example as if you were finding a textbox.

Let me know if you need more help!

John

hello.

well, yes and no. for updatepanels, you don't need to use findcontrol since the controls are injected on the page as fields (which means you can simply use its id to get a reference to them)

regarding the updateprogress, things get a little messy. here's an example that shows how to change it during a full postback:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

private Boolean update = false;

void J(Object sender, EventArgs e)
{
update = true;
}

protected override void Render(HtmlTextWriter writer)
{
if (update)
{
Label lbl = (Label) progress.FindControl("lbl");
lbl.Text = DateTime.Now.ToString();
}
base.Render(writer);
}

</script>

<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:UpdatePanel runat="server" ID="panel">
<ContentTemplate>
<asp:Button runat="server" id="bt" text="partial postback" OnClick="E"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button runat="server" text="full postback" OnClick="J" />
<asp:UpdateProgress runat="server" ID="progress" AssociatedUpdatePanelID="panel">
<ProgressTemplate>
<asp:Label runat="server" id="lbl" />
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>

Acutally I am trying to recall my orginal issue and why I used FindControlRecurvively and I beleive it was because I had a Drop Down List in a custom server control which was in an tab panel. The version of Ajax.net at the time had an issue with doing that and it throwing a null reference. This was some months ago so I don't recall all the logistics:

If you use FindControl to access a control inside a TabPanel, it throws a NullReferenceException.This behavior appears in the 10606 release10301. If you compile the same application with the March release (10301) it works well.
http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=11168

hello again.

ok, fair enough. but regarding the controls you've asked about (updatepanel and udpateprogress) my previous observations are correct.

Thanks for the reply, it works I've just create a new instance of label then assign the findcontrol to it.

dim lbl as label

lbl = updatepanel1.findcontrol("label1")

lbl.text = "hello"

thanks

hello again.

hum...why are you doing that? I mean, the controls declared inside an updatepanel are also inserted on the page as fields so you can only use its id to get them (this is not true for controls that are inside an updateprogress control)

Thanks for concern, I try it but it does not work, for example i have label1 inside the updatepanel1. So how do i access the label1 and change the text property?

Can you teach me how... Thanks again...

hello.

well, you just use its id:

label1.Text = "something";

do keep in mind that this code will only work if you're using it frmo the same page or user control that has the updatepanel which has the label inside...

Dim pwdAs ChangePassword

pwd = updatePanel1.FindControl("ChangePassword1")

pwd.Visible =True

This worked for me too, thanks guys.

Sasanka Pinidiya

How do I access controls in a TabContainer for FormView Select Parameters

I have a page with a gridview which is inside a tab panel.

Depending upon the selection in the GridView I need to set a Select Parameter for a FormView on another area of the page.

I simply get the error "Could not find control 'GridView2' in ControlParameter 'PoemID'"

Any suggestions ?

i got the same problem trying to access a label inside a tabcontainer...

someone pease help us!

I have had some success with resolving a similar problem by adding the name of the container to to the ControlId parameter as follows: ContainerName$Gridview2

I have an UpdatePanel with a textbox inside, further down the page I have a tab panel that needs to reference the value entered into the textbox and was able to get it to work by having the following syntax:<asp:ControlParameterControlID="UpdatePanel1$TextBox1" ...... what I can't work out is how to reference the same textbox from the tabpanel if it was placed within another tabpanel above or a different container such as an accordion panel. let me know if this gives you any clues...

Found any solution yet? I'm also facing the same problem. Thank you for sharing.

Men, thanks to you I could fix my application...

You just have to do the same with all the controls of the panel, but remember to use the tab container and the tab panel, OK... Here my example... Thnaks

SelectMethod="GetEmpleado_MByNumero"TypeName="RecursosHumanoBLL"UpdateMethod="UpdateEmpleadosMByNumeroEmpleado"OldValuesParameterFormatString="{0}">

<asp:ControlParameterControlID="udpConsultaEmpleado$tcEmpleados$tpFiltro$gvEmpleados"DefaultValue="1"Name="Numero"

PropertyName="SelectedValue"Type="Int32"/>

</SelectParameters>

I hope it work for you too

How do I "replace" the ACT controls in my application?

Hi,

I have an application I wrote with an older version of the Atlas Control Toolkit. I just downloaded the latest version, and installed it. I'm wondering if there is anything else I need to do to update the controls in my application to use the more recent versions. Thanks.

Aaron

Nope. Just make sure the DLLs are replaced and everything should be fine.

Thank you.

Aaron

There were a few breaking changes in the framework though:

http://ajax.asp.net/files/Migration_Guide.doc

http://ajax.asp.net/files/Migration_Guide_Beta_Beta2.doc

How come the toolkit is only available as server controls?

Am I missing something or is this by design? It would be really nice to programmaticly instantiate/dispose etc.. for creating a modal dialog and the other useful behaviors in the toolkit. Just for a laugh, I decided to copy over the JS files for the dropdown menu and got it working (minus some strange errors where dispose() is being called on undefined objects) but it was rather a cumbersome process having to include all the JS files and dependencies. Anyone else doing this sort of thing? Any chance there is a version of the toolkit that is not server control based?

function createDropDownMenu() { var panel = document.createElement("div"); panel.className ="ContextMenuPanel"; panel.style.display ="none"; panel.style.width ="100px"; panel.style.height ="100px"; panel.style.visibility ="hidden"; var target = $get('placeholderDiv').appendChild(panel); var dd_menu =new AjaxControlToolkit.DropDownBehavior($get('TextLabel')); dd_menu.set_dropDownControl(panel); dd_menu.set_dropDownControlID(TextLabel); dd_menu.set_dropArrowImageUrl("images/drop-arrow.gif"); dd_menu.initialize(); dd_menu.show(); }

anyone?

This has been requested, but it's a bit of work to create a process that will extract all the files and put them in the right dependency order, etc. It's something I'd like to do, but isn't super high-priority.

The trick to do this is as follows:

1) Get the scripts loaded by instantiating an extender and pointing it at a dummy control.

<asp:Label ID="dummy" style="display:none;"/>

<ajaxToolkit:SomeExtender TargetControlID="dummy"/>

2) Instantiate the behavior using the $create() helper, notnew

var behavior = $create(AjaxControlToolkit.SomeBehaior, {prop:value,prop2:value2}, null, null, $get('someElement'));

Excellent. This works great. Thanks for the tip!

I guess the ordering in which the scripts load has something to do with it. I modified my code to use your method and it runs cleanly now with no errors.

Good - yeah if you're okay with that little hand wave, then you don't have to worry about that stuff...

How can we access a control outside the update panel with an control inside the update pan

Take a very simple example, i have a button inside the update panel along with other controls and i have a textbox on the page.What i want is that when i click the button inside the update panel,it should update the textbox which is present outside the update panel.How can i do this?

To my knowledge you cannot update any control outside of the update panel. If you want to update the control move it inside the update panel.

Do you want to modify the text box with server-side code? If so, put it in its own UpdatePanel. Set the UpdateMode on the panel to Conditional. Then you can either add the button in the other UpdatePanel as an AsyncPostBackTrigger to the new UpdatePanel or invoke the Update method on the new UpdatePanel in your button's Click event handler.

If you want to modify the text box on the client, you're going to have to write JavaScript.

Can you please tell me what javascript should i write for the sition i mentioned in the above example.

I am not getting the idea using javascript for a control inside the update panel.

Are you sure you need to write JavaScript? I gave you the steps to modify the text box using purely server-side code by using a second UpdatePanel control. I highly recommend you read theUpdatePanel tutorials and then re-read what I suggested. This path doesn't require JavaScript, but does require a round-trip to the server which is where your code will be executing.

If you do need to use JavaScript, you're going to need to handle the button's click event, modify the other control, and then prevent the default action for clicking the button from occurring (if necessary). This would all be done on the client so wouldn't require a round-trip to the server, but involves learning JavaScript and the DOM API (which you should want to learn as a web developer, anyways).

i have read it but still i feel i need javascript.Can u help me?

How can I use ASP.NET AJAX Toolkit Controls in an existing ASP.NET 2.0 website?

Hello All!

Trust you guys are doing well. I have a existing ASP.NET 2.0 website to which I would like to add some ASP.NET AJAX Toolkit Controls. How can I do this? I sincerely do appreciate your time and assistance. Thank you.

Regards,

Mohammed

Here's a video you can watch on this subject:

http://www.asp.net/learn/ajax-videos/video-81.aspx

and here's the documentation:

http://asp.net/ajax/documentation/live/InstallingASPNETAJAX.aspx

Hello ca8msm!

Thank you so very much for your assistance.

Take care,

Mohammed

How can i use ajax controls in asp.net ?

I'm new in ajax and i want to know if i can use ajax controls in a asp.net 2 webform? And how can i do that.

thanks.

Alejandro

Yes you can.

Install MS Ajaxhttp://www.microsoft.com/downloads/details.aspx?FamilyId=8FA6E076-582B-440F-95CB-C40ED23FDF59&displaylang=en

Install the AJAX controlshttp://www.codeplex.com/Release/ProjectReleases.aspx?ProjectName=AtlasControlToolkit

Then in VS2005 you'll find in the toolbar all controls ready to drag and drop. Easy!

Thanks albert, I already install ajax, and the toolkit, my question it's if in a normal asp.net webform that i made without ajaxenabled I can make some changes to make it ajax enabled and drag and drop ajax Controls in to the webform.

Go to the toolkit box and right click, Add Items/ Browse to the toolkit dll and select it, on the toolbox you'll find all the controls

My problem it's that i started my webform like a normal asp.net webform and not like an ajax webform and I want to turn my webform ajax enabled

Then this could help you to convert a ASP.NET to ASP.NET Ajaxhttp://alpascual.com/blog/al/archive/2006/10/24/Manually-upgrading-from-Atlas-to-ASP.NET-2.0-Ajax.aspx
thanks, i will try it.
How did it go?

Wednesday, March 21, 2012

how can i restate the focus inside updatepanel

hi,

i have several web controls inside a update panel. But i don't know how to set it so that right after my page come back from a callback, it will lost the focus. i tryed .focus() in asp.net, but it doesn't work... help anyone?

Alan,

after the focus method, try the upatepanel's Update() method.

it should work, although, i hide the same headache.

lblRowCount.Text = gridview1.Rows.Count.ToString();

txtProduitID.Focus();

pnlProduit.Update();

in this sample code, txtproduitID is the textbox where i type in the product code. and pnlProduit is the update panel.
this works for me.

regards,
formationusa

I tried that but it didnt work. Here is my code

<!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 btn_Click(object sender, EventArgs e) { txt1.Text = DateTime.Now.ToString(); txt1.Focus(); up2.Update(); }</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <atlas:ScriptManager ID="scriptmanager" EnablePartialRendering="true" runat="Server" /> <atlas:UpdatePanel runat="server" ID="up2" Mode="Conditional"> <ContentTemplate> <asp:TextBox runat="server" ID="txt1"></asp:TextBox> <asp:Button runat="server" ID="btn" Text="Button" OnClick="btn_Click" /> </ContentTemplate> </atlas:UpdatePanel> </form></body></html>

Can you tell me what im doing wrong?

your syntax is correct, it seems to be something which will need more time. i tested your sample, and got the same problem. Also, in the forms i worked on, I have different conditions for setting the focus on the textboxes.
I will keep checking on this problem in more detail.

if others experience the same, please post.

regards,
formationusa

I have the same problem, but I want to set the focus AFTER the UpdatePanel has returned because it is adding the field I want to focus. I've tried using a client-side timeout to wait for the UpdatePanel to finish, but the time would change from one browser/client to another.

Is there a way to tell an UpdatePanel to execute a client-side method after it has updated?

setting the focus in AJAX seems to be working with Fireworks and not IE, please will that be fixed for future releases as its very crucial to have working properly for data entry Web pages.
Sorry, I meant Firefox browser and not fireworks, my apology.

Wednesday, March 28, 2012

How do I use external scripts in controls, with brittle-old-atlas?

How do I use Animation without server-side controls? (mission impossible?)

How do I use AJAX controls when my site was not created with AJAX enabled?

How do I start using AJAX controls on an existing project?

How do I make atlas pages pass W3C Validator?

Monday, March 26, 2012

How do I install the toolkit controls?

How do I get Javascript Inside Content Template to fire on postback

How do I consume a JavaScript object on the main page in an ASCX control?

Saturday, March 24, 2012

How do i access controls inside the update progress or update panel.

How do I access controls in a TabContainer for FormView Select Parameters

How do I "replace" the ACT controls in my application?

How come the toolkit is only available as server controls?

How can we access a control outside the update panel with an control inside the update pan

How can I use ASP.NET AJAX Toolkit Controls in an existing ASP.NET 2.0 website?

How can i use ajax controls in asp.net ?

Wednesday, March 21, 2012

how can i restate the focus inside updatepanel

Going For AJAX

Blog Archive

About Me