Hi,

I am developing a Web Portal application.  I am testing the UI and it works flawlesly in FF, but does not work in IE.  The problem (I think) is with the $addHandler and $removeHandler methods.  When I am initializing the drag behavior of my widgets, I call the following method to add the mousedownhandler:

    this.set_handle = function(value) {
        if (_handle != null) {
            $removeHandler(_handle, 'mousedown', this._mouseDownHandler);                       
        }
   
        _handle = value;
        $addHandler(_handle, 'mousedown', this._mouseDownHandler);               
    }

In IE this breaks, with the error:

Microsoft JScript runtime error: Sys.ArgumentUndefinedException: Value cannot be undefined.
Parameter name: element

It also breaks when I refresh the page, this time in $removeHandler.  See below:
 

var $addHandler = Sys.UI.DomEvent.addHandler = function Sys$UI$DomEvent$addHandler(element, eventName, handler) {
    /// <param name="element" domElement="true"></param>
    /// <param name="eventName" type="String"></param>
    /// <param name="handler" type="Function"></param>
    var e = Function._validateParams(arguments, [
        {name: "element", domElement: true},
        {name: "eventName", type: String},
        {name: "handler", type: Function}
    ]);
    if (e) throw e; /// <------------------------- Error occurs here!!!!!

var $removeHandler = Sys.UI.DomEvent.removeHandler = function Sys$UI$DomEvent$removeHandler(element, eventName, handler) {
    /// <param name="element" domElement="true"></param>
    /// <param name="eventName" type="String"></param>
    /// <param name="handler" type="Function"></param>
    var e = Function._validateParams(arguments, [
        {name: "element", domElement: true},
        {name: "eventName", type: String},
        {name: "handler", type: Function}
    ]);
    if (e) throw e;  ///<------------------------------ Same here - arghhh!

 

So, element is undefined.  But why???   (I have set the ScriptManager's LoadScriptsBeforeUI property to false, to no avail.)

Thanks,

kreid 

  

No ideas??? 

Try changing your (_handle != null) check to (typeof(_handle) != 'undefined')

Extract like my problem. In my app, I add a handler:

 <script type=""text/javascript"">$addHandler(window, 'load', alert('xxx'));</script>

In FF, it run ok, but in IE, it first display a message box 'xxx', but still have an exception same like kreid.

Any ideas?

You shouldn't use $addHandler for window.load.  Try handling the Application.Init event instead.

 

gt1329a:

Try changing your (_handle != null) check to (typeof(_handle) != 'undefined')

Tried this, but the same errors occur.

remove handler is also being called in the drag behavior's dispose method:

 

dispose: function()
{
        if (this._mouseDownHandler){
       
            var regWidgetHandleDiv = /\bwh\b/;
            var Divs, Div,i = -1;
            Divs = this.get_element().getElementsByTagName('div'); //Encapsulate this in a function.
            var widgetHandleDiv;
           
            if(Divs.length < 1) //Toolbox Widget
            {
                widgetHandleDiv = this.get_element();
            }
            else //Real Widget
            {
                while( Div=Divs[++i] )
                {
                    if(regWidgetHandleDiv.test(Div.className))
                    {
                        widgetHandleDiv = Div;
                        break;
                    }
                }
            }
       
            $removeHandler(widgetHandleDiv, 'mousedown', this._mouseDownHandler);
        }
        // dispose base class
        Portal.DraggableBehavior.callBaseMethod(this, 'dispose');
    }
 

Any more ideas? 

 

gt1329a:

You shouldn't use $addHandler for window.load.  Try handling the Application.Init event instead.

Thank gt1329a, I think I found the cause of problem: The funtion of handle must have prototype like function name(sender), in which sender is the one that raise event. So we can use 

$addHandler(window, 'load', test);function test(sender){alert('xxx');}

or

Sys.Application.add_init(test);function test(sender){alert('xxx');}

are the same.

@kreid: you are in the same context with me, please check your function _handle in $addHandler. Hope this help.

You'll actually find that those two events are raised at different times.  If your function contains anything that requires the framework to be present (like PageRequestManager wireups), make sure to use App.Init.

Ok, you are right. $addHandler(windows, 'load', func) mean this function will be perform after the browser finish loading the document, but App.Init fire after the framework loaded. Is this true?

That's right.  Depending on the browser in question, I believe App.Init should be earlier than window.load.  That's a helpful distinction, if you want to initialize UI stuff as early as possible.

dqminh:

 

gt1329a:

You shouldn't use $addHandler for window.load.  Try handling the Application.Init event instead.

Thank gt1329a, I think I found the cause of problem: The funtion of handle must have prototype like function name(sender), in which sender is the one that raise event. So we can use 

$addHandler(window, 'load', test);function test(sender){alert('xxx');}

or

Sys.Application.add_init(test);function test(sender){alert('xxx');}

are the same.

@kreid: you are in the same context with me, please check your function _handle in $addHandler. Hope this help.

 

I'm not a JavaScript expert, so maybe I'm missing something, but I don't think I am in the same context as you.  You are trying to add a handler which runs when the page loads; I am adding a mousedownhandler inside an ajax behavior.  My problem is not with the function delegated as the handler, but with the _handle parameter, which is a DOM element.  Surely the elements will have loaded by the time I get to this stage ( it certainly seems to in Firefox ;) )

I am creating a delegate for mousedownhandler like this:

Portal.DraggableBehavior = function(element) {
    // initialize base class
    Portal.DraggableBehavior.initializeBase(this, [element]);
    
    // mousedown event handler
    this._mouseDownHandler = Function.createDelegate(this, this._handleMouseDown);

    ...

} 

and handleMouseDown takes one argument:

    _handleMouseDown: function(ev)

But this is besides the point as the error is not at this line; it is in $addHandler and $removeHandler, where the element is undefined. Could someone please explain what I am doing wrong?

Thanks,

kreid 

 

Going back to your original problem, how is that set_handle method called?  If the function's parameter is coming in null, we need to see where the function is called and why the parameter is null in the function call.

 The set handle function is called in the draggable behavior's initialize function:

    initialize: function()
    {  
        var regWidgetHandleDiv = /\bwh\b/;
        var regToolboxWidgetDiv = /\btoolboxWidget\b/;
        var Divs, Div,i = -1;
        Divs = this.get_element().getElementsByTagName('div');
        var widgetHandleDiv;
       
        if(Divs.length < 1)
        {
            widgetHandleDiv = this.get_element();
        }
        else
        {
            while( Div=Divs[++i] )
            {
                if(regWidgetHandleDiv.test(Div.className) || regToolboxWidgetDiv.test(Div.className))
                {
                    widgetHandleDiv = Div;
                    break;
                }
            }
        }
       
        this.set_handle( widgetHandleDiv );
    },

 Does it make any difference that set_handle is defined in the Portal.DraggableBehavior = function(element){...} section.  I thought of moving it to the Portal.DraggableBehavior.prototype = {...} section, but I don't think this would make any difference?
 

kreid 

 Still no ideas on this??