Why Popup Calendar doest trigger textbox event OnTextChanged?

A textbox connect to an Atlas Toolkit Control PopupCanendar.
There is a javascript for OnTextChanged event of this textbox.

When using popup calendar to select a date for this textbox, it doesn't trigger this event.
But if type date in textbox directly, it is OK. the OnTextChanged will be fired.

Why? what's the solution for this case?The DOM is a little weird in that script changes don't tend to fire the associated event handlers that get fired when the user makes a change. It sounds like you're hitting that here. It's possible to fire the event from script, too, so maybe you want to try that. If you switch to PopupControl's CommitScript mode, I think you should be able to make this change fairly easily.

window.onload event handler not firing on web page (AJAX BETA 2)

Any help on this one would be greatly appreciated. I'm new to Ajax and hopefully this will be a simple fix - i'm probably missing something obvious.

I have a simple website with a master page : SiteMaster.master. Inside here I've referenced the ScriptManager component
I've a simple content page which references the ScriptManagerProxy to include its own custom javascript - note no event handlers or listeners in here

The master page contains a number of controls that need to be resized immediately after the page loads and also when the page resizes

<asp:ScriptManagerID="smDefaultMaster"runat="server"EnablePartialRendering="true"ScriptMode="Release">
<Scripts>
<asp:ScriptReferencePath="~/Scripts/siteMaster.js"/>
</Scripts>
</asp:ScriptManager>

In the siteMaster.js I have 2 functions defined and I add handlers for these as per the new Sys.Dom.UI.AddHandler Methods in Beta 2. For some reason the pageLoaded event is never raised. The resize event works fine. Am i doing things correctly or am i messing something up.

function

pageLoaded () {
alert ("Load");
}

function pageLoaded () {
alert ("Resize");
}

$addHandler (window,'load', pageLoaded);
$addHandler (window,'resize', pageResized);

In the docs onthis page, you can read this:

During ordinary page processing in the browser, thewindow.onload DOM event is raised when the page loads initially. Similarly, thewindow.onunload DOM event is raised when the page is refreshed or when the user navigates away from the page.

However,these events are not raised during asynchronous postbacks. To help youmanage these types of events for asynchronous postbacks, thePageRequestManager manages a set of events that are similar towindow.load and other DOM events, but that also occur for asynchronous postbacks. For each asynchronous postback, all page events in thePageRequestManager class are raised and any attached event handlers are called.

Maybe it does help you.

Greets,
Nils Gruson

Window.OnLoad and callback problem

Hi,

I have a Javascript function that fires every time the page loads: triggered by the event window.onload...

Now i use an updatepanel and i need that function to be fired every time the callback occurs...

Wich is the event i should use?

Is there something like window.oncallback ?

Thanks in advance.

Antonio Li Causi.

Well, no. First, if you're using the ASP.Net ajax framework anyway, you're better off writing a function called pageLoad; the framework looks for it and fires it once everythign's done and ready to go on the first load. It's better than window.onload for this b/c it's coordinated w/ everything else the framework is trying to do for you.

In that pageLoad() method, you want to enter the line: Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler) where pageLoadedHandler is the name of the function you want to fire when the page loads after async callback.

Example is here:http://ajax.asp.net/docs/ClientReference/Sys.WebForms/PageRequestManagerClass/PageRequestManagerPageLoadedEvent.aspx

Check this:ASP.NET AJAX Client Life-Cycle Events

and especiallypageLoaded Event

window.onload() not firing.

Hi,

The window.onload() is firing only once when the page is loaded for the first time. it is not fired when some event occurs in that page. I want to make it fire everytime asynchronous postback occurs. What is the solution?

Thanks.

Habeeb.

Use theclient-side pageLoad() function.

Or for a slightly more elegant solution:

<asp:ScriptManagerID="ScriptManager1"runat="server"/>
<scriptlanguage="javascript"type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoadedFunc);

function pageLoadedFunc(sender, eventArgs) {
// Do whatever.
}
</script>

The script must be placed after the scriptmanager on the page. This will be called for any synchronous and asynchronous requests.

I'm curious why you'd consider that more elegant than simply:

function pageLoad() { // Do whatever.}

More elegant. I didn't say simpler. I'm just trying to lead the poster into more advanced concepts, so that maybe when the need arises, they'll say "Oh yeah, I remember that I can use the PageRequestManager to manage partial page updates and access the various events in the page lifecycle from client-side script."

Po-tay-to, po-tah-to. Didn't mean to sound disparaging in the first post.

I didn't take it as disparaging. I was just curious why you thought that.

It's important to note that they aren't the same things. PageRequestManager.PageLoaded won't fire on the initial load, which the original poster seems to desire. However, Application.Load (pageLoad) does.

Actually, pageLoaded is the only event of the PageRequestManager that is raised by both asynchronousand synchronous postbacks. Therefore, it will fire on the initial load.

You're right. I wonder what the reasoning is behind duplicating that functionality.

The Application class is designed to expose events in the page life-cycle, and by chance the Application.Load event fires after an asychronous postback, but it was not "intended" to do so.

Whereas, the PageRequestManager class was designed to handle page life-cycle events in the presence of partial-page updating and asynchronous postbacks. That's why it is a little more appropriate in an AJAX methodology--that's what it was created to do. So it's a matter of doing it a way that happens to work versus doing it the way it was intended to work.

And the reason that the pageLoaded event fires after a synchronous postback is that it tracks any panels that were created, not just those that were modified (during an asynch postback). This allows you to do manipulation, animation, etc., on the initial load.

And this is probably way more information thanhabeebuddin ever wanted...

window.opener.document.TextBoxRateLockDate is null or not an object

My ASP.Net page has a calendar picker link with an onclick event as shown below:

<a href="http://links.10026.com/?link=javascript:;" onclick="calendarPicker('TextBoxRateLockDate');" title="Pick Date from Calendar"><img src="http://pics.10026.com/?src=../../../../App_Images/simplecalendar/calendar.gif" border="0" /></a>

The above link is inside of a MultiView control, which is inside an UpdatePanel control. The link pops-up the date picker calendar just fine but when I select a date , I get the following error:

Microsoft Jscript runtime error:
'window.opener.document.TextBoxRateLockDate' is null or not an object

How can I resolve this issue?

Hi,

This is a pure javascript issue.

I'd suggest using document.getElementById() method to find the textbox. Usually like this: window.opener.document.getElementById("TextBoxRateLockDate")

Hope this helps.

Wish: ClientSide EventHandling By Reference

Hello to all!

I have discovered that event handling in the client side is done by copying the function into the event handler list array and not by referencing it. That is very bad I think. I wish for the next release of the MS Ajax Library an event handling by reference. Below is some code to make clear, what I am meaning.

1 Type.registerNamespace('Demo');23 Demo.Class1 = function () {4this.className ='this is class one';5 _evtHandler =new Sys.EventHandlerList();6 }7 Demo.Class1.prototype = {8 addDoSomethingEventHandler: function (handler) {9 _evtHandler.addHandler('onDoSomething', handler);10 },11 removeDoSomethingEventHandler: function (handler) {12 _evtHandler.removeHandler('onDoSomething', handler);13 },14 doSomething: function () {15 alert('I am doing something.');16 var f = _evtHandler.getHandler('onDoSomething');17if(f) {18 f();19 }20 },21 dispose: function() {22 alert('I am disposing now (' +this.className +')');23 }24 }25 Demo.Class1.registerClass('Demo.Class1',null, Sys.IDisposable);2627 Demo.Class2 = function (id) {28this.className ='this is class two.';29this._id = id30 }31 Demo.Class2.prototype = {32 methodOne: function () {33 alert('ID: ' +this._id +'\nMethod One knows that something is done.');34 },35 methodTwo: function () {36 alert('ID: ' +this._id +'\nMethod Two knows that something is done.');37 },38 methodThree: function () {39 alert('ID: ' +this._id +'\nMethod Three knows that something is done.');40 },41 dispose: function () {42 alert('I am disposing now (' +this.className +')');43 }44 }45 Demo.Class2.registerClass('Demo.Class2',null, Sys.IDisposable);4647 var obj1 =new Demo.Class1();48 var obj2 =new Demo.Class2('obj2');49 var obj3 =new Demo.Class2('obj3');5051 obj1.addDoSomethingEventHandler(obj2.methodOne);52 obj1.addDoSomethingEventHandler(obj2.methodTwo);53 obj1.addDoSomethingEventHandler(obj3.methodOne);54 obj1.doSomething();55 obj2.methodOne = function () {56 alert('Someone has overwritten me.');57 };58 obj1.removeDoSomethingEventHandler(obj2.methodOne);59 obj1.doSomething();60 obj2.methodOne();61 obj3.methodThree();

First observaion is that becauseobj2.methodOne() has been over written id couldn't removed from the event handler list. The second one is that the variablesthis._id are undefined when calling the functions by raising the event. Calling the methods directly from an instance does work, see line 61.

I need some workaround to save an instance, too, not only a copy of its methods in order their instance variables are not undefined. Any Ideas are welcome.

Yavuz

First of all your code seems to be buggy.

obj1.addDoSomethingEventHandler(obj2.methodOne);

When the methodOne is invoked the this pointer will not be obj2.

Here is the fix.

var fn = Function.createDelegate(obj2, obj2.methodOne);

obj1.addDoSomethingEventHandler(fn);

Now you can remove the handler using

obj1.removeDoSomethingEventHandler(fn);

This is unaffected whether or not you set obj2.methodOne to something else.

Hello Rama!

That was not a bug. It was a question how to solve this problem Thank you for your answer.

Now the function is copied into the delegate. Ifobj2.methodOne() is changed, the changed method isn't invoked. But thats another story I think. It's a situation which occurs rarely i think where you have to change a method at run-time.

I could not find a documentation about theFunction.createDelegate() method. Have I to go through the debug.js-files?

Yavuz

Looks like it has been not documented yet. The doc writers missed it. There are two function Function.createCallback and Function.createDelegate, they are widely used in ASP.NET AJAX. You can look at the source as it is easy to understand utility.

I will do it. Thank you.

Wizard with Update Panel

I have a Wizard control with inupdatepanel . I am trying to create dynamic wizard steps in pagepre_init event, but it is giving me an error " object reference not setto an instance of an object" . without updatepanel it's workingproperly.

Thanks in Advance

Do you have a fileupload control in the wizard? If so,see this thread.

hello.

please post a simple page that reproduces this problem.

Work at you the OnResolveId event of the HoverMenu control?

Hi

Work at you the OnResolveId event of the HoverMenu control?

With this code it doesn't work

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>

<div id="Div1" runat="server" style="display:none; background-color:ButtonFace; border:solid 1px #ccc;">
<span id="Span2" runat="server">div_hover</span
</div>
<cc1:HoverMenuExtender ID="HoverMenuExtender1"OnResolveControlID="HoverMenuExtender1_ResolveControlID" PopDelay="2"runat="server" PopupControlID="Div1" TargetControlID="LinkButton1"PopupPosition="Right" /
<br /><br /><br /><br /
<asp:Label ID="Label1" runat="server" ></asp:Label


aspx.vb

Protected Sub HoverMenuExtender1_ResolveControlID(ByVal sender AsObject, ByVal e As AjaxControlToolkit.ResolveControlEventArgs) HandlesHoverMenuExtender1.ResolveControlID
Label1.Text = "Hi"
End Sub

What i am wrong?

up

Hi,

What are you trying to achieve?

The ResolveControlID event is defined in the ExtenderControlBase class, and it's called when the ExtenderControlBase fails to locate a control referenced by a TargetControlID. In this event, user code is given an opportunity to find the control.

Hope this helps.

Yes, it was just this, that i wanted to know

that is when start the resolveControlID and what it 's useful

thanks

working with Asynchoronous Call back Events

Hiiii,

I want to Implement some Asnynchoronous call back events along with some regular postback event.Please Help me..

Regards,

Harsha

Hi

Search more about synchonus and asynchronus postback triggers

http://ajax.asp.net/docs/overview/AsynchronousLayerOverview.aspx

Writing first extender control

Hi,

I am writing my first extender control to populate a text box with some value on click event of button. But I am missing something hence the extendercontrol is not gettting instanitated and also inserting debugger doesn't break into it. Can someone please help here?

Here is the code:

JS:

Type.registerNamespace('Toolkit');

Toolkit.DisableButtonBehavior = function(element) {
Toolkit.DisableButtonBehavior.initializeBase(this, [element]);
this._button = null;
this._textBox1 = null;
}

Toolkit.DisableButtonBehavior.prototype = {
initialize : function() {
/// <summary>
/// Initialize the behavior
/// </summary>
debugger;
this._button = this.get_element();
Toolkit.DisableButtonBehavior.callBaseMethod(this, 'initialize');
this._clickHandler = Function.createDelegate(this, this._onClick);
$addHandler(this._button, "click", this._clickHandler);
this._AlertHeader();
},

dispose : function() {
/// <summary>
/// Dispose the behavior
/// </summary>
Toolkit.DisableButtonBehavior.callBaseMethod(this, 'dispose');
},

_onClick : function() {
this._AlertHeader();
},

get_TextBox1 : function() {
return this._textBox1;
},
set_TextBox1 : function(value) {
debugger;
this._textBox1 = value;
},
_AlertHeader : function () {
this._textBox1.value = 'test5';
}
}

Toolkit.DisableButtonBehavior.registerClass('Toolkit.DisableButtonBehavior', AjaxControlToolkit.BehaviorBase);

if( Sys && Sys.Application ){
Sys.Application.notifyScriptLoaded();
}

Extender Class:

using System;
using System.Web.UI.WebControls;
using System.Web.UI;
using System.ComponentModel;
using System.ComponentModel.Design;
using AjaxControlToolkit;

[assembly: System.Web.UI.WebResource("Toolkit.DisableButtonExtender.DisableButtonBehavior.js", "text/javascript")]

namespace Toolkit
{
[ClientScriptResource("Toolkit.DisableButtonBehavior", "Toolkit.DisableButtonExtender.DisableButtonBehavior.js")]
[TargetControlType(typeof(Control))]
public class DisableButtonExtender : ExtenderControlBase
{
[IDReferenceProperty(typeof(Control))]
[DefaultValue("")]
[ExtenderControlProperty]
[ElementReference()]
public string TextBox1
{
get { return GetPropertyValue("TextBox1", ""); }
set { SetPropertyValue("TextBox1", value); }
}
}
}

ASPX:

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="Testpage.aspx.cs" Inherits="Testpage" %>
<%@dotnet.itags.org. Register Assembly="Toolkit" Namespace="Toolkit" TagPrefix="toolkit" %
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<asp:ScriptManager ID="scriptmanager" runat="server"></asp:ScriptManager>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Button"/>

</div>
</form>
<toolkit:DisableButtonExtender ID="DisableButtonExtender" runat="server" TargetControlID="Button1" TextBox1="TextBox1"></toolkit:DisableButtonExtender>
</body>
</html>

Thanks

Hi,

The only problem I can find in your code is that the ScriptManager and the Extender are placed out of the form. When I modified this and run, it worked fine.

I created a ClassLibrary project, then added the following code into it:

using System;using System.Web.UI.WebControls;using System.Web.UI;using System.ComponentModel;using System.ComponentModel.Design;using AjaxControlToolkit;[assembly: System.Web.UI.WebResource("ClassLibrary1.DisableButtonBehavior.js","text/javascript")]namespace Toolkit{ [ClientScriptResource("ClassLibrary1.DisableButtonBehavior","ClassLibrary1.DisableButtonBehavior.js")] [TargetControlType(typeof(Control))]public class DisableButtonExtender : ExtenderControlBase { [IDReferenceProperty(typeof(Control))] [DefaultValue("")] [ExtenderControlProperty] [ElementReference()]public string TextBox1 {get {return GetPropertyValue("TextBox1",""); }set { SetPropertyValue("TextBox1",value); } } }}

This js file is set as EmbededResources

Type.registerNamespace('ClassLibrary1');ClassLibrary1.DisableButtonBehavior = function(element) { ClassLibrary1.DisableButtonBehavior.initializeBase(this, [element]); this._button = null; this._textBox1 = null;}ClassLibrary1.DisableButtonBehavior.prototype = { initialize : function() { /// <summary> /// Initialize the behavior /// </summary> debugger; this._button = this.get_element(); ClassLibrary1.DisableButtonBehavior.callBaseMethod(this, 'initialize'); this._clickHandler = Function.createDelegate(this, this._onClick); $addHandler(this._button, "click", this._clickHandler); this._AlertHeader(); }, dispose : function() { /// <summary> /// Dispose the behavior /// </summary> ClassLibrary1.DisableButtonBehavior.callBaseMethod(this, 'dispose'); }, _onClick : function() { this._AlertHeader(); }, get_TextBox1 : function() { return this._textBox1; }, set_TextBox1 : function(value) { debugger; this._textBox1 = value; }, _AlertHeader : function () { this._textBox1.value = 'test5'; }}ClassLibrary1.DisableButtonBehavior.registerClass('ClassLibrary1.DisableButtonBehavior', AjaxControlToolkit.BehaviorBase); if( Sys && Sys.Application ){ Sys.Application.notifyScriptLoaded();}

Then used the following page to test it and it worked fine:

<%@. Page Language="C#" %><%@. Register Namespace="Toolkit" Assembly="ClassLibrary1" TagPrefix="toolkit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="scriptmanager" runat="server"></asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br /> <asp:Button ID="Button1" runat="server" Text="Button"/> <toolkit:DisableButtonExtender ID="DisableButtonExtender" runat="server" TargetControlID="Button1" TextBox1="TextBox1"></toolkit:DisableButtonExtender> </div> </form> </body></html>

Thanks Raymond. Getting script manager within form tag worked.