Add tree node via javascript from child window

[cicaglisa]

Hi everyone,
I did a lot of different tests trying to add a new tree node from a child window via javascript in the tree that is in our main application window.
Weird result is it does work with Firefox and Chrome but it fails adding a new node on IE. JSObject is not set and it fails inside cascade function (ext.axd). Do you have any ideas what can be wrong just on IE side? I've checked for missing semicolons and brackets that might break js code but no luck on that side. At the same time removing existing nodes from that tree on IE works fine looks like it's something specific that gets fired just when appendChild is called. I've tried to simplify that method adding only a node name but it still keep rasing the error.

Any ides?
Thanks in advance!

[Daniil]

Hi @cicaglisa,

Please provide a test case.

[cicaglisa]

Hi Daniil,

I did a JavaScript function that search for my parent node based on node Id and once it finds it it will add the newly created node:

var getTreeNodes = function (tree, nodes, parentId, nodeName, nodeId, isFolder, toAdd) {
    try {
        var length = nodes.length;
        var element = null;
        for (var i = 0; i < length; i++) {
            element = nodes[i];
//            if (console) {
//                console.log(nodes[i].attributes.PID);
//            }


            if (element && element.attributes.PID) {
                if (toAdd) {
//                    if (console) {
//                        console.log("NODE TO COMPARE: " + parseInt(element.attributes["PID"]) + " WITH : " + parentId);
//                    }
                    if (parentId == parseInt(element.attributes.PID, 10)) {
                        if (nodes[i]) { //add new node under parent
                            nodes[i].appendChild(new Ext.tree.TreeNode({ text: nodeName, iconCls: isFolder ? "icon-folder" : "icon-page", id: nodeId, leaf: !isFolder, expanded: false, editable: false, "PID": nodeId, allowChildren: false, "sortIndex": nodeName }));
                            if (console) {
                                console.log("NODE ADDED: " + nodes[i].attributes.PID);
                            }
                            break;
                        }
                    }
                } else {
                    if (nodeId == parseInt(element.attributes.PID, 10)) {
                        if (nodes[i]) { //remove node
                            tree.removeNode(nodes[i]);
//                            if (console) {
//                                console.log("NODE REMOVED: " + nodes[i].attributes.PID);
//                            }
                            break;
                        }
                    }
                }


                if (element.childNodes) {
                    //console.log('element:', element);
                    getTreeNodes(tree, element.childNodes, parentId, nodeName, nodeId, isFolder, toAdd);
                }
            }
        }
    } catch (ex) {
        console.error(ex);
    }
};

This code is executed from child window when the user is adding a new item and then we try to "inject" this new node in our main window tree which is called using "opener.genericTree"

    tree.el.mask('Inserting...', 'x-mask-loading');


    Ext.Ajax.request({
        scope: this,
        method: 'POST',
        url: '../Handlers/CreateView.ashx',
        params: { "nodeId": parentNode.attributes.PID, "nodeName": dashboardName, "isFolder": 'false', "folderType": folderType, "ViewCode": parentNode.attributes["ViewCode"], "viewAccessibility": parentNode.attributes["viewAccessibility"], "ViewTypeCode": itemTypeCode, "dashboardType": dashboardType },
        success: function (response, opts) {
            tree.el.unmask();
            var responseJson = Ext.decode(response.responseText);


            if (responseJson.success === true) {
                var newNode = parentNode.appendChild(new Ext.tree.TreeNode({ text: dashboardName, isFolder: false, "folderType": itemTypeCode, iconCls: 'icon-page', leaf: true, expandable: false, editable: false, ViewCode: responseJson.node.ViewCode, PID: responseJson.node.id, id: responseJson.node.id }));
                if (newNode != null) {
                    parentNode.expand();
                    newNode.select();


                    btnAddFolder.disable();
                    btnAdd.disable();
                    btnAddPage.enable();


                    if (opener.genericTree) {
                        getTreeNodes(opener.genericTree, opener.genericTree.root.childNodes, parentNode.attributes.PID, dashboardName, newNode.attributes.PID, false, true);
                        //if (currentNode) currentNode.appendChild(new Ext.tree.TreeNode({ text: dashboardName, iconCls: "icon-page", id: responseJson.node.id, leaf: true, expandable: false, editable: false }));
                    } else {
                        console.log('Tree not found!');
                    }


                    pnlSetup.enable();
                    pnlSetup.load('../View.aspx?page=dashboard&viewFolderId=' + responseJson.node.id);
                }
            }
            else {
                Ext.Msg.show({
                    title: 'Item not created', //<- the dialog's title  
                    msg: responseJson.error.message, //<- the message  
                    buttons: Ext.Msg.OK, //<- OK button  
                    icon: Ext.Msg.ERROR // <- error icon                                          
                });
            }
        }
    });


    tree.el.unmask();

For some reason it doesn't work on IE it breaks on cascade method inside extjs.
Any help with this would be much appreciated.

[Daniil]

Is this causing the error?

//if (currentNode) currentNode.appendChild(new  Ext.tree.TreeNode({ text: dashboardName, iconCls: "icon-page", id:  responseJson.node.id, leaf: true, expandable: false, editable: false  }));

[cicaglisa]

Not that line I forgot to remove it from the code, code goes in getTreeNodes function and then in tried to add a new node in this if case:

if (parentId == parseInt(element.attributes.PID, 10)) {
                        if (nodes[i]) { //add new node under parent
                            nodes[i].appendChild(new Ext.tree.TreeNode({ text: nodeName, iconCls: isFolder ? "icon-folder" : "icon-page", id: nodeId, leaf: !isFolder, expanded: false, editable: false, "PID": nodeId, allowChildren: false, "sortIndex": nodeName }));
                            if (console) {
                                console.log("NODE ADDED: " + nodes[i].attributes.PID);
                            }
                            break;
                        }
                    }

It get executed and appendChild is completed but then after that cascade code raises as an error inside ext-axd:

this is where it crashes:

    cascade : function(fn, scope, args){
        if(fn.apply(scope || this, args || [this]) !== false){
            var cs = this.childNodes;
            for(var i = 0, len = cs.length; i < len; i++) {
                cs[i].cascade(fn, scope, args);
            }
        }
    },

and error raised is: JScript object expected ext.axd?v=0, line 35135 character 9

[Daniil]

Please try:

nodes[i].appendChild(new parent.Ext.tree.TreeNode...

Does it help?

[cicaglisa]

I've added parent keyword as you have mentioned in the previous post but it didn't work what I've managed to pick up from IE Javascript debugger is that new node does NOT have properties like other existing nodes even though it's an object any idea why all the properties are missing on newly added node?

I've marked it with red square on the screenshot attached, and you can compare it with node above which is expanded.

[Daniil]

It is hard to say what can be wrong.

If you can provide us with a simple (at least, simplified as much as you can) sample, we would be happy to investigate.

[cicaglisa]

Ok this is my tiny example which reproduces exactly the same problem I've been facing in our application.

You can rename it to ZIP extension and open it as a small website. It has a main page with a tree then if you press SETUP button below the tree it will open a new window which has the same tree and allows you to create a new Node. When you press "Add New Node" button IE will execute appendChild (inside basic_methods.js file and it will raise a js Error) this doesn't happen with other browsers...

Thanks again for your help, it's been really appreciated.

PS: if you have any questions regarding my example just drop me a note here and will try to reply as soon as possible.

[Daniil]

Please organize a test case to get just two standalone ASPX pages and post here wrapping in [CODE] tags.