为什么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。但我必须使用对话框。我已经尝试了一切。 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(/
$/, "")
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
标签之外:
解决方案非常简单 - 只需将以下代码行添加到JQuery对话框的初始化中
appendTo: 'form'
在此之后,对话框在form
内,代码工作得很好:)
以上是关于为什么JQuery上的对话框在XPage中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
jquery ui对话框中的基础日期选择器在Internet Explorer中不起作用
JQuery 移动工具提示弹出(“关闭”)功能在 iPhone 5 中不起作用
JQuery 在 Django 自定义模板标签的模板中不起作用
fadeTo 与 Jquery 在 Retina Macbook Pro 上的 Chrome 中不起作用