javascript - 如何使 "xp"命名空间中的不同 id 可见

Question

基本上我有一个 XPage，我在其中使用 JQuery。在此页面上，我有一个默认隐藏的对话框(使用 JQuery)。在此对话框中，我输入一些必须验证的数据(非空等)。我遇到的问题是必须在 xp 命名空间中声明它。否则，JQuery 无法识别在 xp 命名空间

中声明的 id

<xp:div id="dialogAddPart">
<!-- Backend code to save, validate, etc -->
</xp:div>

保存、验证有效，但 div 默认情况下不隐藏。

<div id="dialogAddPart">
//Also validating, saving (doesn't work at all)
</div>

JQuery 语句:

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("Close?"))
        {
        return false;
        }
        else 
        {

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

在第二种情况下，验证和保存不起作用，但默认情况下是隐藏的。如何使 dialogAddPart 在命名空间 xp 中对 JQuery 可见？

Answer 1

将样式 display: none 添加到您的 xp-div 元素:

<xp:div
    id="dialogAddPart"
    style="display: none;">
    dialogBox
</xp:div>
<xp:button
    type="button"
    id="addButton">
    +Add button
    <xp:eventHandler
        event="onclick"
        submit="false">
        <xp:this.script>
            <![CDATA[
                $("[id$='dialogAddPart']").css({ display: "inherit" });
            ]]>
        </xp:this.script>
    </xp:eventHandler>
</xp:button>

这将在页面加载时隐藏 div 元素，您可以通过 jQuery 使用 addButton 使其可见。