twitter bootstrap-Xpages,需要全局变量将字段的新ID映射回字段的原始ID,以便可以与客户端Jav
twitter bootstrap - Xpages, need global variables that map New ID of a field back to the original ID of the field so it can be used with Client Side Javascript?
我在同一个自定义控件上有两个字段:性别;标题
性别是必填字段,从空白开始。头衔取决于性别和残疾人的起点。
选择"性别"后,应填充"标题"选项并启用该字段。
但是,这也是Bootstrap。因此,我想更改性别字段,通过将字段从"有警告"更改为"有成功"并显示字形"字形ok"来显示它是正确的。
我还需要启用"标题"字段并删除"字形警告标志"。
我可能做错了,但我使用的是客户端Javascript与服务器端的部分刷新。
相关领域性别和头衔
我的第一个解决方案是将服务器端和客户端结合起来,然后调用脚本库。
<xp:panel id="ApplicantsGender_pnl" styleClass="form-group has-feedback has-warning">
<xp:label id="ApplicantsGender_Label1" value="Gender:"
for="ApplicantsGender"
styleClass="col-sm-4 control-label field-label">
</xp:label>
<div class="input-group col-sm-8">
<xp:panel styleClass="input-group-addon">
<span class="glyphicon glyphicon-asterisk requiredfield"></span>
</xp:panel>
<xp:radioGroup id="ApplicantsGender"
value="#{document1.ApplicantsGender}" styleClass="form-control">
<xp:selectItem itemLabel="Male" itemValue="MALE"></xp:selectItem>
<xp:selectItem itemLabel="Female"
itemValue="FEMALE">
</xp:selectItem>
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[var FieldID = '#{javascript:getClientId("ApplicantsGender")}';
var FormGroupPnlID = '#{javascript:getClientId("ApplicantsGender_pnl")}';
var FormGroupGlyphID = '#{javascript:getClientId("ApplicantsGender_glyph")}';
var TitleID = '#{javascript:getClientId("ApplicantsTitle")}';
var MaleTitlesID = '#{javascript:getClientId("TitlesMale")}';
var FemaleTitlesID = '#{javascript:getClientId("TitlesFemale")}';
field_ApplicantsGender_xp(FieldID,FormGroupPnlID,FormGroupGlyphID,TitleID,MaleTitlesID,FemaleTitlesID);
]]>
</xp:this.script>
</xp:eventHandler>
</xp:radioGroup>
<xp:panel id="ApplicantsGender_glyph" styleClass="glyphicon form-control-feedback"></xp:panel>
</div>
<xp:text escape="true" id="TitlesMale" value="#{viewScope.TitlesMale}" style="display:none"></xp:text>
<xp:text escape="true" id="TitlesFemale" value="#{viewScope.TitlesFemale}" style="display:none"></xp:text>
</xp:panel>
function field_ApplicantsGender_xp(FieldID , FormGroupPnlID , FormGroupGlyphID , TitleID , MaleTitlesId , FemaleTitlesId)
{
var gender=radio_getCheckedValue( document.getElementsByName(FieldID));
var applicantsTitle=document.getElementById(TitleID)
if (gender!=null)
{
if (gender=="MALE"){
var Titles = document.getElementById(MaleTitlesId);
} else {
var Titles = document.getElementById(FemaleTitlesId);
}
var Choices = Titles.innerHTML.split(',');
var select = document.getElementById(TitleID);
//Clear the Titles Options List
var i;
for(i = select.options.length - 1 ; i >= 0 ; i--)
{
select.remove(i);
}
//Set the Titles Options List
for (var i= 0, n= Choices.length; i < n ; i++) {
opt = document.createElement("option");
opt.value = Choices[i];
opt.textContent = Choices[i];
select.appendChild(opt);
}
select.disabled = false
//Set Bootstrap Successful
document.getElementById(FormGroupPnlID).setAttribute("class" , "form-group has-feedback has-success");
document.getElementById(FormGroupGlyphID).setAttribute("class" , "glyphicon form-control-feedback glyphicon-ok");
var TitleGlyphID = TitleID+"_glyph";
document.getElementById(TitleGlyphID).setAttribute("class" , "glyphicon form-control-feedback");
//alert(ApplicantsGenderID);
}
这完成了我需要它做的事情,但这只是许多需要验证的字段中的第一个。
因此,我想知道是否有一种方法可以在页面或自定义控件的全局区域中一次性完成所有字段ID转换,而不必在每个onchange事件中进行。
我希望能够动态创建脚本变量,这样我就可以将它们用于客户端脚本。
即某个地方可以全球访问:
var GenderID = '#{javascript:getClientId("ApplicantsGender")}';
var TitleID = '#{javascript:getClientId("ApplicantsTitle")}';
var MaleTitlesID = '#{javascript:getClientId("TitlesMale")}';
var FemaleTitlesID = '#{javascript:getClientId("TitlesFemale")}';
然后,当我调用脚本库中的验证公式时,我只需要传入所涉及的ID。
即
field_ApplicantsGender_xp(GenderID,TitleID,MaleTitlesID,FemaleTitlesID);
应用程序本身有许多领域,所有领域都有一些交叉交互。有些交互在同一个自定义控件内,有些交互在自定义控件之间。
我发现大部分Bootstrap验证都是客户端。因此,随着Xpages更改所有ID,这变得有点棘手。
感谢您在这方面的帮助,我期待您的反馈。
您可以使用scriptBlock来定义全局变量:
<xp:scriptBlock type="text/javascript">
<xp:this.value><![CDATA[
var GenderID = '#{javascript:getClientId("ApplicantsGender")}';
var TitleID = '#{javascript:getClientId("ApplicantsTitle")}';
var MaleTitlesID = '#{javascript:getClientId("TitlesMale")}';
var FemaleTitlesID = '#{javascript:getClientId("TitlesFemale")}';
]]></xp:this.value>
</xp:scriptBlock>
您可能会用所有这些ID变量污染全局命名空间,这被认为是一种糟糕的做法,所以请考虑使用闭包。
相关文章:
- 使用getElementById设置动态ID的输入字段的样式
- AngularJS-工厂中promise ID字段的返回值
- 如何使用javascript检查id字段为空的单选按钮
- 使用 JavaScript 比较 2 个数组并创建一个新的对象数组,该数组不包含与 id 字段匹配的对象
- 猫鼬对 id 字段的请求返回 id 和_id
- 杰森.解析正在复制 ID 字段
- Angular JS 自动递增计数器的 ID 字段
- 手动设置和检查 id 字段
- 在节点中使用计数器集合.js递增 ID 字段
- 仅从 ID 字段中检索数字
- 正在获取已创建模型的ID字段
- 从元素jQuery Each中抓取ID字段
- 如何验证我的电子邮件Id字段
- JSON解析Javascript丢失id字段时出错
- EXTjs 3.4.0使用NAME在网格中呈现ID字段
- 向Meteor添加用户id字段.用户收集的帐户包
- 如何使用非-'id'字段作为使用FixtureAdapter时的主键
- 通过id字段过滤数组列表到一个新变量
- 滚动iframe到没有id字段的锚
- JavaScript数独ID字段未注册