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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为什么JQuery上的对话框在XPage中不起作用相关的知识,希望对你有一定的参考价值。

我有一个使用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。但我必须使用对话框。我已经尝试了一切。 viewScopepartialcomplete更新 - 但是在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(/
$/, "")

                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应该归咎于

答案

好吧,问题是对话框在html之外的form标签之外:enter image description here

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

appendTo: 'form' 

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

以上是关于为什么JQuery上的对话框在XPage中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

jquery ui对话框中的基础日期选择器在Internet Explorer中不起作用

JQuery 移动工具提示弹出(“关闭”)功能在 iPhone 5 中不起作用

JQuery 在 Django 自定义模板标签的模板中不起作用

fadeTo 与 Jquery 在 Retina Macbook Pro 上的 Chrome 中不起作用

jQuery.animate 在 IE8/IE9 上的 Facebook iFrame 中不起作用

CORS 在 Firefox 中不起作用