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?

本文关键字:ID 字段 原始 Jav 客户端 bootstrap-Xpages 全局变量 twitter 映射      更新时间:2023-09-26

我在同一个自定义控件上有两个字段:性别;标题

性别是必填字段,从空白开始。头衔取决于性别和残疾人的起点。

选择"性别"后,应填充"标题"选项并启用该字段。

但是,这也是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变量污染全局命名空间,这被认为是一种糟糕的做法,所以请考虑使用闭包。