Question

基本上我有一个使用JQuery的XPage。在这个页面上，我有一个默认隐藏的对话框（使用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中为JQuery显示xp？

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使它可见。

如何在“xp”命名空间中创建可见的不同id

1 个答案: