Wednesday, March 28, 2012

How do I wire a javascript function to an update panel so it fires when the panel is updat

I have a list of location in an update panel and a virtual earth map w/ pushpin's representing each of the locations. My update panel works great for paging through the location list using some custom paging where a the panel updates when the paging buttons are clicked. What I'd like to be able to do though is wire up an event handler to the update panel so when it refreshes, my javascript function can make a page method call and get new set of pushpins to display on the virtual earth map.

a) How do I get a reference to the update panel in javascript?

b) What is the update panel event that I wire a call back method to?

Thanks!

Hi there, you can accomplish this by hooking up a client side event handler to the PageRequestManager pageLoading event. The event args will indicate the list of UpdatePanels that are getting refreshed, you can inspec the array and if the UpdatePanel that you are interested in is being refreshed call your function.

More info here:http://ajax.asp.net/docs/tutorials/usingMsAjaxLibrary/default.aspx

Thanks,
Federico


Federico,

Thanks for the reply. Because the ASP.NET forums are moderated, I literally just figured it out before receiveing your reply. The PageRequestManager in Beta 1 is awesome!

- James


Hi Frederico

Your link appears to be broken - do you happen to know a working link for this topic ?

Thanks,
Richard

How do i use Tabs in Ajax in asp.net application..

Hi, i have a asp.net web application which is production... and the client wants us to display the data using the userid... right now i am using a datagrid in a simple aspx page.. but since the user has asked for that request.. i want to have 5 (tabs each for a user Id) and then display the datagrid on it... how can i do this is an existing aspx page.

I have downloaded the ajax tool kit and i dont know from where to start... by data grid is simple... just displaying the data using.. a sql query and there are few links in the datagrids to navigates to other pages...

So can I use Ajax just for one page,,, and is there anything that i need to know that will hamper production when using Ajax..

any help ,ideas and code will be greatly appreciated

Regards

Karen

You can easily only use ajax on one page, and creating the tab thing should be quite simple. There is nothing that will tamper production, since ajax is essentially an extra dll that goes in the bin folder, and a couple of additions to web.config. If I was you I would just go ahead and get my feet wet. There are some excellent getting started tutorials on this site. Just click the Ajax menu at the top of the page.

Good luck!

/Klaus


Thank you Klaus i will look into it. can you pls give me some link to it..

Regards

Karen


Hi,

Thank you for your post!

It seems that you are really a newbie to AJAX and javascript,this is a good start point for your learning:ASP.NET AJAX Roadmap

And this is a good point to start with Toolkit:http://www.asp.net/ajax/ajaxcontroltoolkit/samples/

And in my opinion, <ASP.NET AJAX in action> is a decent book to learn ASP.NET AJAX.

If you have further questions ,let me know.

Best Regards,


Jin,

Thanks for the link... and yeah i am newbie to Ajax and javascript... i had worked on tabs when i was working on VB.6 and then it was so easy then and that was 3 yrs ago.

regards,

Karen

How do I use JavaScriptSerializer on only certain properties of an object?

I have an object that inherits from UserControl. I want to seralize certain properties in this object using JavaScriptSerializer (or another method that does the same thing). Unfortunatly, if I try to seralize the control itself, I get a crash.

I am forced to make another object that contains all the properties that need to be seralized. The properites in my control then refrence the properties of that object. Though this works, it leaves my control with a bunch of properties which are effectively nothing more than pointers to another object that exists soley to make javascript seralization to work.

Is there way around this? I want to be able to use JSON on a usercontrol and be able to specify which properties I want seralized to JSON.

Try using the ScriptIgnore attribute in the properties you don't want to be serialized.

Hope this helps,

Elias.


I tried to override every virutal property on usercontrol and I still got "Cannot get inner content of because the contents are not literal."Something in my base class (usercontrol) seems to be causing problems

How do I use javascript to force an UpDatePanel to Update

Hi, I am trying to find a simple way to force a specific update panel to refresh/update from a javascript function. The reason being that I am trying to build a simple calendar control, simular to that on the AJAX Control Toolbox site under PopUpControlhttp://atlas.asp.net/atlastoolkit/PopupControl/PopupControl.aspx, and I want the calendar to update if a date has been manually entered into the text box. I have found that you have to add an atrribute to the date input text box to invoke a call to a javascript function. (I am using the calendar control that I make inside of a gridview control which is enbeded inside of multiple levels of Update Panels and the TextBox.OnChange() event does not fire when inside of a gridview. So I added the following to the Page_Load event:TextBox.Attributes.Add("OnMouseLeave","javascriptFunction()") ) The problem that I am having is what to add to thejavascriptFunction()to force a specific UpDatePanel to refresh. I can get all of the panels to update using a "__doPostBack('DateControl$DateDisplay',''); "but there seems like that should be a simple way to force only one panel to update. I've tried to click on a hidden button using a javascript click() event, but I continuosly get the follwing javascript error: " Microsoft JScript runtime error: '_postbackSettings.async' is null or not an object " Is there a way to implement theUpdatePanel.Update() function directly from Javascript? Am I even going in the right direction? Could I call one of my code behind functions from javascript to perform the UpdatePanel.Update()?

So in simple terms, when building a control how can i update a specific UpdatePanel in the control through a javascript function?

Help Please!! Thanks!Big Smile

There is no direct support for updating just a single panel. You can mostly achieve it by setting all your panels to be Conditional and then calling Update on just the ones you want.

Thanks,

Eilon

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.

<script type='text/javascript'src='/AtlasWebSite1/WebResource.axd?d=Q25Q6XUyjAkwUhmccPLXSM0tUH1gG8pvBlJoQRJbY9aaHhPMSqiC1p5xfcybhbNW0&t=632864860774426576'></script
This is registered with Page.ClientScriptBlock (I know ASP.NET2 hasdifferent syntax, but my control needs to support .NET1.x so the codeis easier to leave as is - it works with ASP.NET2 just fine).

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

<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTUxNzQwOTU4NGRkq48mV8BeUZdYRTUdUDPaQYzABY0=" />
</div
<script type="text/javascript">
<!--
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script
<scriptsrc="/AtlasWebSite1/WebResource.axd?d=j0rVreGbmSimbg9M6s2qsQ2&t=632664387855935408"type="text/javascript"></script
<script type='text/javascript'src='/AtlasWebSite1/WebResource.axd?d=Q25Q6XUyjAkwUhmccPLXSM0tUH1gG8pvBlJoQRJbY9aaHhPMSqiC1p5xfcybhbNW0&t=632864860774426576'></script>
<scriptsrc="/AtlasWebSite1/WebResource.axd?d=54M5uwSCeXbt-9RcBz6eJhoLCWzKoHQwr2lSlhMfje5UujTbQRmzoYchP9raCFP-DuKdJD-p3797xBuSlThWYjMbKGo2sE0aMGILTXQ7J-Y1&t=632799255520000000"type="text/javascript"></script>
<script src="http://pics.10026.com/?src=atlasglob.axd" type="text/javascript"></script>
<div>
<div id="UpdatePanel1">

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 possibleWink .

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%;">

<tr><tdstyle="text-align:center; vertical-align:middle;">

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%;">

<tr><tdstyle="text-align:center; vertical-align:middle;">

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%;">

<tr><tdstyle="text-align:center; vertical-align:middle;">

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%;">

<tr><tdstyle="text-align:center; vertical-align:middle;">

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%;">

<tr><tdstyle="text-align:center; vertical-align:middle;">

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 helpBig Smile.

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

Happy Coding !!

How do I use AJAX?

The Calender Extension looked cool, so I downloaded AJAX, the framework, named ASP.NET 2.0 AJAX Extensions 1.0 (why not just Ajax Extensions?). This installed without any problems. Then I downloaded ASP.NET AJAX Control Toolkit (what's wron with Ajax Toolkit?)...

I'm running Visual Web Developer 2005 Express Edition (I just LOVE long names). One video I saw (athttp://ajax.asp.net/default.aspx) said that I had to add a reference to the DLL:s to be able to Ajaxify my website if I didn't have the full version of Visual Studio. I think I did that correct (Website/Add Reference... and then find the folder holding some DLL:s, I took all the DLL:s I could find, to be on the safe side!).

Now everything should be done to get started. No, I had to change to full permision for intranet, since my code is stored on the network (in Microsoft .NET Framework 2.0 Configuration (I've now almost run out of keys on my keyboard...)/My Computer/Adjust Zone Security/Make changes to this computer and on the Local Intranet tab change the level to Full Trust).

I still get error messages, all starting with "unable to...". Does anyone know if there is a guide/tutorial for VWD 2005 Express Edition, from downloading whatever needs to be downloaded, to using it, to ajaxify (a word used in the video I referred to above) exisiting websites, putting files where they should be put and make necessary changes to existing projects?

Thanks!

Found a good start herehttp://www.asp.net/learn/videos/view.aspx?tabid=63&id=81. This video shows that the web.config file has to be modyfied, and how it could be done. It does, however, not explain the puropse of the new elements in the file, after all, it's only a video.

After doing these changes, I got a new error: "Element 'SciptManager' is not a known element...". I managed to fix this by doing nothing! I might have restarted the application, I don't remember. That doesn't make me satisfied, though. I keep getting errors that disapear by themselves after a while. I think I still need that follow-me-tutorial...