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

Question

我有一个使用 JQuery 对话框的 XPage。我遇到的问题是，如果在对话框中 entered，则输入字段的数据始终为 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 上运行的一切都运行良好，而在 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 内，代码工作正常:)

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

Why the dialog on JQuery doesn't work in XPages

javascript

jquery

dialog

xpages

ssjs