Opened 12 years ago

Closed 12 years ago

Last modified 8 years ago

#4297 closed defect (fixed)

dijit.form.Textarea does not destroy properly

Reported by: guest Owned by: Douglas Hays
Priority: high Milestone: 1.0
Component: Dijit - Form Version: 0.9
Keywords: Cc:
Blocked By: Blocking:

Description

I'm working on an application that regularly replaces the contents of a TitlePane?. If there is a textarea inside existing content, it does not destroy cleanly in FF2/Linux, instead throwing an exception:

"Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMEventTarget.removeEventListener]"

This happens with both 0.9 and trunk.

I put together a test case. Sorry if it's a bit long (was weeding down an existing application).

To reproduce:

  1. save test.html and test2.html into a directory, and adjust the script path and stylesheet path to your Dojo tree.
  2. Load test.html in your browser.
  3. Open the Project List title pane, and click either project. This creates a new titlepane with contents loaded from test2.html.
  4. Re-open the project list title pane (the script closes it), and click a project again.

Result: Exception thrown.

Note that you can click a link again and it works.

test.html: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
  
  <script src="dojo-trunk/dojo/dojo.js" type="text/javascript" djConfig="parseOnLoad:true, isDebug:false"></script>
  <script type="text/javascript">
  dojo.require("dijit.layout.LayoutContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("dijit.layout.SplitContainer");
  dojo.require("dijit.layout.TabContainer");
  dojo.require("dijit.TitlePane");
  dojo.require("dijit.form.InlineEditBox");
  dojo.require('dijit.form.Textarea');
  dojo.require("dojo.parser");
  
</script>
  <script type="text/javascript">
    <!--
    get_project = function (evt) {
        // called when a project is clicked
        var project_id = evt.id.substr(3);
        var proj = dojo.xhrGet( { url: 'test2.html?project_id='+project_id });
        proj.addCallback('load_project');
        }
    
    load_project = function (xhr) {
        var proj = dijit.byId('project_title');
        if (proj) {
    //            proj.destroyDescendants();
        } else {
                proj = new dijit.TitlePane( { id: "project_title" });
                dijit.byId('div_project_list').domNode.parentNode.appendChild(proj.domNode);
        }
        proj.setContent(xhr);

        proj.setTitle('Newly loaded project');
        if (dijit.byId('div_project_list').open) { dijit.byId('div_project_list').toggle(); }
        var proj_frm = dojo.byId('project_form');
        dojo.connect(proj_frm,'submit',save_project);
    }
    save_project = function(evt) {
        dojo.stopEvent(evt);
        console.log('form submitted.');
        }
    //-->
</script>  
<style>
  body, html {
	font-family: "Myriad Pro",Myriad,Arial,Helvetica,clean,sans-serif;
	font-size: 13pt;
	font-style: normal;
	font-size-adjust: none;
	font-variant: normal;
	font-weight: normal;
	line-height: normal;
	height: 100%;
	width: 100%
}
</style>
<style>
@import "dojo-trunk/dijit/themes/tundra/tundra.css";
</style>
</head>
<body class="tundra">
<div id="page" dojoType="dijit.layout.LayoutContainer">
    <h1 id="header" dojoType="dijit.layout.ContentPane" layoutAlign="top">Project</h1>
	
    
    <!-- overall splitcontainer horizontal -->
    <div dojoType="dijit.layout.SplitContainer" orientation="horizontal" sizerWidth="7" layoutAlign="client" id="mainSplit">
        <div dojoType="dijit.layout.LayoutContainer" title="Menu" style="height:100%;" sizeShare="10">
            <div id="toolbx" dojoType="dijit.layout.ContentPane" layoutAlign="top">
                <p>Some content here</p>
            </div><!-- end #toolbx -->
            <div id="menuwrapper" dojoType="dijit.layout.ContentPane" layoutAlign="client" style="padding:10px;">
                <div id="menudiv">
                    <p>Menu</p>
                </div>
            </div><!-- end #menuwrapper -->
            <div id="footer" class="caption" dojoType="dijit.layout.ContentPane" layoutAlign="bottom">
                &copy;2007
            </div><!-- end of #footer -->
        </div><!-- end of menu split -->
        <div id="main" dojoType="dijit.layout.TabContainer" sizeShare="75">
            <div id="tab1" dojoType="dijit.layout.ContentPane" title="Projects" style="padding:10px;display:none"><br />
                <div dojoType="dijit.TitlePane" title="Project Filters">
                    <p>Form to choose an item goes here.</p>
                </div><!-- end project filters -->
                <br/>
                <div dojoType="dijit.TitlePane" title="Project List" open="false" id="div_project_list">
                    <div dojoType="dijit.layout.ContentPane" title="pcontent" closable="true" id="content_project_list">
                        <ul id="project_list_ul">
                            <li><a id="pl_117" href="#117" onclick="get_project(this);">Discovery</a> / client1 / MP / 49%</li>
                            <li><a id="pl_94" href="#94" onclick="get_project(this);">Project Management</a> / client2 / 20%</li>
                           
                        </ul>

                    </div>
                </div>
                <br />
            </div><!-- end of #tab1 -->
    
        </div><!-- end of #main -->
    </div><!-- end of #mainSplit -->
</div><!-- end of #page -->
</body>
</html>

test2.html: 

<div dojoType="dijit.layout.ContentPane" id="project_main">
    <div dojoType="dijit.TitlePane" title="Project Details">
        <form id="project_form" action="/projects.php" method="post">
            <h2>loaded project name</h2>
            <br />
            <h3>Notes</h3>
            <div dojoType="dijit.form.InlineEditBox">
                <textarea dojoType="dijit.form.Textarea" id="proj_notes" name="project_notes" rows="4" cols="100" style="width:600px"></textarea>
            </div>
            <br/>
            <input type="submit" id="proj_submit" name="Submit" value="submit" style="display:none"/>
            <button dojoType="dijit.form.Button" id="proj_save_btn" onclick="dojo.byId('proj_submit').click();">Save changes!</button>
        </form>
    </div>
</div>

Ask freelock in IRC if you need more info...

Attachments (2)

test.html​ (4.3 KB) - added by guest 12 years ago.
test.html
test2.html​ (785 bytes) - added by guest 12 years ago.

Download all attachments as: .zip

Change History (8)

Changed 12 years ago by guest

Attachment: test.html​ added

test.html

Changed 12 years ago by guest

Attachment: test2.html​ added

comment:1 Changed 12 years ago by guest

Sorry, didn't see anywhere to upload files until after I filed the bug ;-)

comment:2 Changed 12 years ago by bill

Component: General → Dijit
Milestone: → 0.9
Owner: changed from anonymous to Douglas Hays

comment:3 Changed 12 years ago by bill

Milestone: 0.9 → 1.0

comment:4 Changed 12 years ago by Douglas Hays

Resolution: → fixed
Status: new → closed

(In [10375]) Fixes #4297. Don't let event manager clean up an event handler on another window.

comment:5 Changed 12 years ago by Douglas Hays

(In [10377]) References #4297. Need dojo.hitch for context.

comment:6 Changed 8 years ago by bill

Component: Dijit → Dijit - Form
Note: See TracTickets for help on using tickets.