XPage Ajax文档创建

Question

这似乎是重复的，但请先阅读，如果您有任何疑问，请告诉我。 我只有一个xpage，其中包含两个数据源，一种用于信息发布，另一种用于图像附件发布。 现在，与典型的应用程序不同，我不想将图像附加到现有的主数据源（第一个），而是要异步上传图像，并使用主数据源的UNID作为新图像文档的子ID为每个图像创建单独的文档。 这只是当前数据结构的方式，我对此几乎没有发言权，因此这里提出了挑战。

我已经能够成功创建xhr请求（在Julian和Sven的各种异步上传程序的先前工作的指导下）并使用我编写的自定义控件使用图像创建新文档，但是一旦将其嵌入到具有两个数据源的XPage中并尝试要上传和创建新文档，它会创建主数据源的副本，并清除所有其他字段值（具有空字段的副本的预期行为）。 我怀疑这是因为我为上载请求使用$$ submitid和所有必需的表单值，并且它们以某种方式与第一个数据源绑定或共享，但我不太确定。

我的自定义控件具有它自己的数据源，而xpage具有一个包含数据源的面板。 下面的自定义控件。

---

    <?xml version="1.0" encoding="UTF-8"?>
    <xp:view xmlns:xp="http://www.ibm.com/xsp/core">
        <xp:this.data>
            <xp:dominoDocument var="imgAttach" formName="mImageAttach"
                concurrencyMode="force">
            </xp:dominoDocument>
        </xp:this.data>
        <xp:inputText id="inputText2" style="width:657.0px"><xp:this.defaultValue><![CDATA[#{javascript:facesContext.getExternalContext().getRequest().getRequestURI();
    context.getUrl()}]]></xp:this.defaultValue></xp:inputText>
        <xp:br></xp:br>
        <xp:br></xp:br>
        <xp:inputText id="parentId" value="#{imgAttach.ParUNID}"
            style="width:333.0px">

            <xp:this.defaultValue><![CDATA[#{javascript:var url = context.getUrl().toString();
    /*
    if(url.indexOf("createComponent.xsp") > 0 && context.getUrlParameter("documentId") != ""){
        var doc:NotesDocument = newComponent.getDocument();
        return doc.getUniversalID();
    } else {
        return "";
    }
    */}]]></xp:this.defaultValue>
            <xp:this.rendered><![CDATA[#{javascript:var url = context.getUrl().toString();
    if(url.indexOf("createComponent.xsp") > 0){
        return true;
    } else {
        return false;
    }}]]></xp:this.rendered>
        </xp:inputText>
        <xp:br></xp:br>
        <xp:br></xp:br>
        <xp:inputText id="inputText1"
            defaultValue="#{javascript:imgAttach.getDocument().getUniversalID()}"
            style="width:333.0px; display:none;">
        </xp:inputText>
        <xp:br></xp:br>
        <xp:br></xp:br>
        <xp:inputText id="Created" style="width:297.0px; display:none;"
            value="#{imgAttach.Created}"
            defaultValue="#{javascript:@Created()}">
            <xp:this.converter>
                <xp:convertDateTime type="date" dateStyle="short"></xp:convertDateTime>
            </xp:this.converter>
        </xp:inputText>
        <xp:br></xp:br>
        <xp:div styleClass="file-input">
            <div class="file-preview ">
                <div class="close fileinput-remove">×</div>
                <div class="">
                    <div class="file-preview-thumbnails" id="file-thumbs">
                    </div>
                    <div class="clearfix"></div>
                    <div
                        class="file-preview-status text-center text-success">
                    </div>
                    <div class="fileinput-error file-error-message"
                        style="display: none;">
                    </div>
                </div>
            </div>
            <div class="input-group-btn">
                <button type="button" tabindex="500"
                    title="Clear selected files"
                    class="btn btn-default fileinput-remove fileinput-remove-button">
                    <i class="glyphicon glyphicon-trash"></i>
                    Remove
                </button>
                <button tabindex="500" id="upload-files"
                    title="Upload selected files"
                    class="btn btn-default fileinput-upload fileinput-upload-button">
                    <i class="glyphicon glyphicon-upload"></i>
                    Upload
                </button>
                <div tabindex="500" class="btn btn-primary btn-file"
                    id="files-container">
                    <i class="glyphicon glyphicon-folder-open"></i>
                    &#160;Browse …
                    <input name="add-files[0]" id="add-files" type="file"
                        multiple="true" class="file-input">
                    </input>

                    <xp:fileUpload id="FileUploadCtrl"
                        value="#{imgAttach.Body}" useUploadname="true"
                        style="display:none">
                    </xp:fileUpload>
                    <xp:eventHandler event="onsaveDoc" submit="false"
                        refreshMode="norefresh" immediate="false" save="true" id="saveDoc" />
                </div>
            </div>
        </xp:div>


        <xp:br></xp:br>
        <xp:br></xp:br>
        <xp:scriptBlock id="scriptBlock2" type="text/javascript">
            <xp:this.value>
                <![CDATA[
    $(function() {

       $("#files-container").delegate('input', "change", function() {  
            var files = !!this.files ? this.files : [];
            if (!files.length || !window.FileReader){
                //console.log("No file selected or no file reader suppport");
                 return; // no file selected, or no FileReader support
            }


                for(i=0; i<files.length; i++) {
                    if (/^image/.test( files[i].type)){ // only image file
                        var reader = new FileReader(); // instance of the FileReader
                        reader.readAsDataURL(files[i]); // read the local file

                        var img = document.createElement("img");
                        img.file = files[i];
                        img.name = 'no_'+ i;
                        img.classList.add("file-preview-image");
                        reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
                        $("#file-thumbs").append(img);                  
                    }                       
                }

                /*
                //add new upload button
                var currentInput = $('#add-files');
                var nextInput = $('#files-container');
                var inputsCount = $('.file-input').length;

               // now we change the 'id' attribute of said element because id's should be unique
                currentInput.attr('id','add-files'+inputsCount);

                // and finally we hide the old element
                currentInput.hide();

                // now, we append a new input element with an incremented array key defined by the length of already existing input elements
                nextInput.append('<input type="file" name="add-files['+inputsCount+']" id="add-files" multiple="true" class="file-input" />');          
                */

        });

     $("#upload-files").on("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            var all_files = [];
            try {
              var files = document.querySelectorAll(".file-preview-image");

              for(var i = 0; i < files.length; i++) {
                  //
                  a_uploader(files[i].file, "#{id:saveDoc}", 0, 10);
              }

            } catch(e) {
                console.log(e);
            }
        });

      function a_uploader(file, uploadID, counter, maxSize){
            try {
                var formData = new FormData();          

                formData.append("#{id:FileUploadCtrl}", file);
                formData.append("#{id:Created}", document.getElementById("#{id:Created}").value);
                formData.append("$$viewid", dojo.query("input[name='$$viewid']")[0].value);
                formData.append("$$xspsubmitid", uploadID);
                formData.append( "view:_id1", "view:_id1");


                if(document.getElementById("#{id:parentId}") != undefined ){
                    formData.append("#{id:parentId}", document.getElementById("#{id:parentId}").value);
                }

                var xhr = new XMLHttpRequest();

                  /* event listners */
                  xhr.upload.addEventListener("progress", function(e) {
                      if (e.lengthComputable) {
                            var percentComplete = Math.round(e.loaded * 100 / e.total);
                            console.log("Uploading... " +percentComplete.toString() + "%)");
                          }
                          else {
                            console.log("Uploading...")
                          }

                  }, false);
                 xhr.addEventListener("error", function(e) {
                    //insert error between error div
                     console.log("error: " + e);
                 }, false);
                 xhr.addEventListener("abort", function() {
                     //insert cancelled between div
                     console.log("Upload cancelled");
                 }, false);
                  xhr.open("PATCH", "#{javascript:context.getUrl()}");
                  xhr.send(formData);



            } catch (e) {
                console.log("a_uploader: "+e);
            }       
        }

        function clear_inputFiles(){
            try {
              var files = document.querySelectorAll(".file-preview-image");

              for(var i = 0; i < files.length; i++) {

              }     
            } catch(e) {

            }
        }   

     });]]>
            </xp:this.value>
        </xp:scriptBlock>
        <xp:this.resources>
            <xp:script src="/x$.js" clientSide="true"></xp:script>
        </xp:this.resources>
    </xp:view>

Answer 1

我以为我已经设置了第一个数据源以忽略请求参数以及组件控件内部的数据源。 在第一个数据源上将ignore request params设置为true并整理数据源以获取文档ID（如果它是编辑模式）之后，我便能够使用自定义控件独立于第一个/主数据源上载图像。

现在他们正在独立上传，仍然创建了一个副本，这对我来说似乎很奇怪。 如果单击第一个数据源的“保存”按钮，则不会创建任何图像附件，但是如果上载图像，则会创建主文档的副本。

---

编辑：我必须从URL中删除editDocument和documentId，并指定自己的docId作为参数。 我猜想在这种情况下，HTTP引荐来源网址是创建重复项的罪魁祸首……或者至少是从创建文档到保存文档的页面设置方式。