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

Question

在下拉列表 select 上，我使用以下代码动态显示 div：它只不过是一个 dojo 文件上传器。在下拉菜单 select 上，它调用以下函数并在 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();
            }

第一次，一切正常，但是当我 select 第二次下拉时。它没有替换 "uploaderDIV"，而是添加了一个具有适当映射的 [当 ajax 调用如上所示 up.on 时，查询参数正确。

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

Answer 1

您有两个选择，您可以尝试重新使用上传器小部件，或者您可以在创建新的之前销毁旧的。

有很多方法可以找到旧的小部件，但最简单的可能是给它一个 ID，然后将它与 (dijit/registry) registry.byId("upId") 一起使用让旧的上传器小部件重用或在创建新的之前调用 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();
          }
        }

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

How to replace a div in Dojo? Div is repeatedly displayed on each click

html

javascript

css

jquery

dojo