为什么JQuery上的对话框在XPage中不起作用

Question

我有一个使用JQuery对话框的XPage。我遇到的问题是，如果在对话框中输入数据，则输入到字段的数据始终为null。如果它被输入一个普通的可见div，一切正常。为什么？这就是我的意思：

对话图片：

https://i.stack.imgur.com/rAwpC.png

图片为普通div：

https://i.stack.imgur.com/RkkTS.png

最初，我将服务器端的getComponent('some_property').getValue()归咎于返回null，因为客户端上的任何属性都无法正确绑定它。我很惊讶地看到它在没有JQuery对话框的情况下工作，作为一个简单的div。但我必须使用对话框。我已经尝试了一切。 viewScope，partial和complete更新 - 但是在div上运行的所有东西都运行得很好，并且在对话框中不起作用的一切都不能正常工作:(我的代码任何属性的XML代码是：

<xp:inputText 
  styleClass="doc_field_textinput" id="input_part_title" type="text" size="40" 
  disableClientSideValidation="true" >
</xp:inputText>

对于按钮：

<xp:button id="save_part_btn" value="+Add this" style="float:right;">
             <xp:eventHandler event="onclick" submit="true"
                refreshMode="complete">
                <xp:this.action><![CDATA[#{javascript:

                    var estdoc:NotesDocument=database.getDocumentByUNID(doc_source.getDocument().getParentDocumentUNID())
                    var estPartdoc:NotesDocument=estdoc.getParentDatabase().createDocument()

                    estPartdoc.replaceItemValue('Form','Estimate_Cost_Part')
                    estPartdoc.replaceItemValue('Predoc',estdoc.getUniversalID())
                    estPartdoc.replaceItemValue('$OSN_IsSaved','1')

                    estPartdoc.replaceItemValue('Title', getComponent('input_part_title').getValue())

                    }]]>
            </xp:this.action>
                <xp:this.script><![CDATA[ 
                var result = "";
                var wholeResult = true;

                function isStringEmpty(string2Check) 
                {
                    return string2Check == "" || string2Check[0] == " ";
                }

                if(isStringEmpty(document.getElementById("#{id:input_part_title}").value)) 
                {
                    wholeResult = false;
                    result += 'The field cannot be empty!'
                }

                result = result.replace(/\n$/, "")

                if(!wholeResult) 
                {
                    alert(result)
                }

                return wholeResult;

                ]]>
                </xp:this.script>
             </xp:eventHandler>
</xp:button>

我用于打开对话框的按钮的代码：

<xp:button styleClass="addButton" value="+Click here to add" id="button1">
  <xp:eventHandler event="onclick" submit="true"
  refreshMode="norefresh">
  </xp:eventHandler>
</xp:button>

我将JQuery添加到页面的方式是：

<xp:this.properties>
        <xp:parameter name="xsp.resources.aggregate" value="true" />
     </xp:this.properties>

    <xp:this.resources>

    <xp:headTag tagName="script">
        <xp:this.attributes>
        <xp:parameter name="type" value="text/javascript" />
        <xp:parameter name="src" value="unp/jquery-min.js" />
        </xp:this.attributes>
    </xp:headTag>

    <xp:headTag tagName="script">
        <xp:this.attributes>
        <xp:parameter name="type" value="text/javascript" />
        <xp:parameter name="src" value="unp/jquery-ui.js" />
        </xp:this.attributes>
    </xp:headTag>

     <xp:headTag tagName="script">
        <xp:this.attributes>
        <xp:parameter name="type" value="text/javascript" />
        <xp:parameter name="src" value="unp/documentJS.js" />
        </xp:this.attributes>
    </xp:headTag> 

    <xp:script src="/Osnova.UI.jss" clientSide="false" />
        <xp:script src="/icons.jss" clientSide="false" />
        <xp:styleSheet href="/osnova2.css" />
        <xp:styleSheet href="/gecho.css" />
        <xp:styleSheet href="/custom.css" /> <!-- In this xp tag backend libraries -->

    </xp:this.resources>

最后我的JQuery代码：

$(document).ready(function() {

  var dialogAddPartDiv = $('.dialogAddPart'); 

  $('.addButton').click(function() 
  {
    dialogAddPartDiv.dialog('open');
  });

  dialogAddPartDiv.dialog(
  {
  create: function (event, ui) {


                $(".ui-corner-all").css('border-bottom-right-radius','8px');
                $(".ui-corner-all").css('border-bottom-left-radius','8px');
                $(".ui-corner-all").css('border-top-right-radius','8px');
                $(".ui-corner-all").css('border-top-left-radius','8px');

                $(".ui-dialog").css('border-bottom-left-radius','0px');
                $(".ui-dialog").css('border-bottom-right-radius','0px');
                $(".ui-dialog").css('border-top-left-radius','0px');
                $(".ui-dialog").css('border-top-right-radius','0px');

                $('.ui-dialog-titlebar-close').css('margin', '-25px -20px 0px 0px').css('border', 'solid 2px').css('border-radius', '15px').css('border-color', '#05788d');
                $('.ui-dialog-titlebar-close').css('width', '25px').css('height', '25px');
            },

    autoOpen: false,
    modal: true,
    beforeClose : function(event) 
    {
        if(!confirm("The part won't be saved. Continue?"))
        {
        return false;
        }
        else 
        {

        }
    },
    width:600,
    resizable: false
  });
});

我真的不知道，我错过了什么。 XPages技术真正的问题是什么？它是否正确支持JS库？基本上我认为这不是因为添加是一个运行时事件，因为我不应该使用$(document).ready(function(){}是的，我的q是不同的，因为现在我100％确定JQuery应该归咎于

Answer 1

好吧，问题是对话框在HTML之外的form标签之外：

解决方案非常简单 - 只需将以下代码行添加到JQuery对话框的初始化中

appendTo: 'form' 

在此之后，对话框在form内，代码工作得很好:)