带有jQuery Uniform和JSF2的动态选择菜单选项

Question

我们有一个使用JSF 2，OpenFaces，jQuery和Uniform插件的应用程序。 有一个窗体具有一个选择框，其中包含基于另一个选择框的值动态填充的选项。 我们使用 JSF 2 f：ajax 标记来触发选择框的重新填充。

下面是触发 ajax 调用的框：

    <h:selectOneMenu id="applicant-employmentStatus-civilian"
                        value="#{membershipData.civilianEmploymentStatus}">
                        <f:selectItems value="#{lookup.civilianEmploymentOptions }"/>
                        <f:ajax event="change" 
                            render="applicant-eligibility-base applicant-eligibility-ship applicant-eligibility-govtAgency"
                            onevent="ajaxCallback"/>
                        <o:validateCustom clientFunction="return validateEligibilityField(input.id);"
                            summary=""
                            detail="#{msgs['errormesg.eligibility.employment']}" />
                    </h:selectOneMenu>

此调用填充了 3 个其他选择框。

该页面还使用统一插件来装饰所有表单输入。 在 document.ready（） 函数上，调用以下内容来配置它：

$('select, input:text, input:radio').uniform();

问题是，当 3 选择框在 Ajax 调用后渲染时，它们会"丢失"装饰并在 FF、Chrome 等中变得不可用。 在IE中，未格式化的选择框放置在旧的选择框上。 我尝试在 ajaxCallback 函数中调用 uniform（） 函数，但它不起作用。

任何帮助表示赞赏

Answer 1

我想出了问题所在。

在调用 $（'select'）.uniform（） 之前，您需要调用 $.uniform.restore（'select'）。 统一还原会删除所有统一格式，并将其还原为"正常"选择控件。

Answer 2

这应该适合您：

<script type="text/javascript">
    function ajaxCallback(e) {
        if(e.status == 'success') {
            $('select, input:text, input:radio').uniform();
        }
    }
</script>