Question

在下拉选择中，我使用下面的代码动态显示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”，而是添加了一个正确的映射[查询参数在上面显示的ajax调用时变得正确]。

每当下拉值发生变化时，我应该怎么做才能用新的uploaderDIV替换它。

Answer 1

您有两种选择，您可以尝试重复使用上传器窗口小部件，也可以在创建新窗口小部件之前销毁旧窗口小部件。

有许多方法可以找到旧的小部件，但最简单的方法可能是给它一个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();
          }
        }

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

1 个答案: