javascript - 如何在Dojo中替换div？每次点击都会重复显示Div

在下拉选择中，我使用以下代码动态显示div：它不过是一个dojo文件上传器。下拉选择时，它将调用以下函数，并在html上附加文件上传代码。

            showAttach (parser, Uploader, dom, on, has, templateID) {


                parser.parse(document.getElementById("container"));

                var uploaderDIV = document.getElementById("uploader");
                var templateID = document.getElementById('templateID').value;

                var uploadFormWithParams = "/wps//UploaderServlet?templateID=" + templateID;

                if ( document.getElementById('uploaderDIV') !=null && document.getElementById('uploaderDIV').style.display == 'block' ) {
                  //  alert("select - " + document.getElementById('uploaderDIV').style.display);
                    dijit.byId("uploaderDIV").remove();
                }

                var up = new dojox.form.Uploader({
                    label: 'Select files',
                    style: 'background-color: #ddddff; border: solid 0px;', //Externalize ...
                    multiple: true,
                    /* data: { product: "product", productFamily : "productFamily", productFamily : "operation"} ,*/
                    url: uploadFormWithParams
                }).placeAt(uploaderDIV);

                on(dom.byId("uploadBtn"), "click", function (evt) {
                    //You can put some validations here ...
                    up.submit();
                });

                on(dom.byId("clearBtn"), "click", function (evt) {
                    dom.byId("uploaderStatus").innerHTML = "";
                    up.reset();
                });

                dojo.connect(up, "onComplete", function (dataArray) {
                    var i = 0;

                    dom.byId("uploaderStatus").innerHTML = "";

                    if (!dataArray.error) {
                        for (i = 0; i < dataArray.length; ++i) {
                            //dom.byId("uploaderStatus").innerHTML += "File : '" + dataArray[i].name + "' is is saved for selected Email template." + "<br/><br/><br/>";
                            dom.byId("uploaderStatus").innerHTML += "'" + dataArray[i].status + " !'" + "<br/><br/><br/>";
                        }
                    } else {
                        dom.byId("uploaderStatus").innerHTML = "Unable to upload the file(s)";
                    }
                });

                dojo.connect(up, "onChange", function (evt) {
                    var i = 0;
                    var content = "";
                    var dataArray = up.getFileList();

                    for (i = 0; i < dataArray.length; ++i) {
                        content += dataArray[i].name + "<br/>";
                    }

                    dom.byId("uploaderStatus").innerHTML = content;
                });

                up.startup();
            }

第一次，一切正常，但是当我选择第二个下拉菜单时。它没有替换“ uploaderDIV”，而是添加了一个具有适当映射的属性（[在上面显示的up.on上进行ajax调用时，查询参数正确）]。

每当下拉列表值更改时，我应该怎么做才能用新的uploaderDIV替换它。

最佳答案

您有两种选择，可以尝试重用Uploader小部件，也可以在创建新小部件之前销毁旧的小部件。

查找旧窗口小部件的方法有很多，但最简单的方法可能是给它提供一个ID，然后将其与（dijit / registry）Registry.byId（“ upId”）结合使用，以获取旧的Uploader小部件以重用或调用up.destroy（），然后再创建新的。

我看到您正在引用dijit.byId，我的回答是假设AMD将在您要使用的地方使用Registry.byId。但是您是否想尝试重用上载器（很抱歉不清理格式）：

            showAttach (parser, Uploader, dom, on, has, templateID) {


            parser.parse(document.getElementById("container"));

            var uploaderDIV = document.getElementById("uploader");
            var templateID = document.getElementById('templateID').value;

            var uploadFormWithParams = "/wps//UploaderServlet?templateID=" + templateID;

            if ( document.getElementById('uploaderDIV') !=null && document.getElementById('uploaderDIV').style.display == 'block' ) {
              //  alert("select - " + document.getElementById('uploaderDIV').style.display);
                dijit.byId("uploaderDIV").remove();
            }
            var up = dijit.byId('myUploader');
            if(!up) {
              up = new dojox.form.Uploader({
                id: 'myUploader',
                label: 'Select files',
                style: 'background-color: #ddddff; border: solid 0px;', //Externalize ...
                multiple: true,
                /* data: { product: "product", productFamily : "productFamily", productFamily : "operation"} ,*/
                url: uploadFormWithParams
            }).placeAt(uploaderDIV);

            on(dom.byId("uploadBtn"), "click", function (evt) {
                //You can put some validations here ...
                up.submit();
            });

            on(dom.byId("clearBtn"), "click", function (evt) {
                dom.byId("uploaderStatus").innerHTML = "";
                up.reset();
            });

            dojo.connect(up, "onComplete", function (dataArray) {
                var i = 0;

                dom.byId("uploaderStatus").innerHTML = "";

                if (!dataArray.error) {
                    for (i = 0; i < dataArray.length; ++i) {
                        //dom.byId("uploaderStatus").innerHTML += "File : '" + dataArray[i].name + "' is is saved for selected Email template." + "<br/><br/><br/>";
                        dom.byId("uploaderStatus").innerHTML += "'" + dataArray[i].status + " !'" + "<br/><br/><br/>";
                    }
                } else {
                    dom.byId("uploaderStatus").innerHTML = "Unable to upload the file(s)";
                }
            });

            dojo.connect(up, "onChange", function (evt) {
                var i = 0;
                var content = "";
                var dataArray = up.getFileList();

                for (i = 0; i < dataArray.length; ++i) {
                    content += dataArray[i].name + "<br/>";
                }

                dom.byId("uploaderStatus").innerHTML = content;
            });

            up.startup();
          }
        }