JSF Ajax 渲染使用 Jquery Mobile 丢失 CSS答案

【问题标题】：JSF Ajax render lose CSS with Jquery MobileJSF Ajax 渲染使用 Jquery Mobile 丢失 CSS
【发布时间】：2013-11-04 16:43:14
【问题描述】：

我正在使用 ajax 来使用 Jquery Mobile 进行编程，这很好，直到我尝试使用 ajax 来渲染一些东西:(

当我选择另一个 h:selectOneMenu 时，我正在尝试执行 h:selectOneMenu 刷新项目，并将其放在 h:panelGroup 中工作。但是，当ajax被执行，panelGroup被更新时，selectOneMenu失去了JM css，变得丑陋了。

我正在使用 jsf 2.2 和 Jquery Mobile 1.4 Beta

之前：

之后：

这是我的页面。我猜这个 bean 没有问题，因为 ajax 正在工作并且 selectonemenu 是正确的渲染项目。问题只是css：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:f="http://xmlns.jcp.org/jsf/core"
  xmlns:ui="http://xmlns.jcp.org/jsf/facelets" >
<ui:composition >
    <h:head>
        <title>Manager</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.js"></script>

        <f:metadata>
            <f:viewParam name="cd_meta" value="#{metaWEB.cd_meta}"></f:viewParam>
        </f:metadata>
    </h:head>

    <h:body >

        <div data-role="page" >

            <div data-role="header" data-theme="b" >
                <a href="#{metaWEB.voltar()}" data-icon="arrow-l" data-iconpos="notext" data-iconshadow="false" data-theme="a" >Menu</a>
                <h1>Meta</h1>
            </div>

            <div data-role="content" >

                <h:messages id="mensagem_verificacao" showDetail="false" style="color: red;" />

                <h:form id="f_meta_cadastro" >
                    <f:passThroughAttribute name="data-ajax" value="false" />

                        <h:selectOneMenu id="select_ano" value="#{metaWEB.meta.ano}" valueChangeListener="#{metaWEB.onChange_Ano}" >
                            <f:passThroughAttribute name="data-native-menu" value="false" />
                            <f:passThroughAttribute name="data-shadow" value="false" />
                            <f:passThroughAttribute name="data-corners" value="false" />

                            <f:selectItem itemLabel="Ano" itemValue="0" >
                                <f:passThroughAttribute name="data-placeholder" value="true" />
                            </f:selectItem>

                            <f:selectItems value="#{metaWEB.anoCadastro}" var="ano" itemLabel="#{ano.toString()}" itemValue="#{ano}" />
                            <f:ajax execute="select_ano" render="ds_meta" />
                        </h:selectOneMenu>

                        <h:selectOneMenu id="select_mes" value="#{metaWEB.meta.mes}" valueChangeListener="#{metaWEB.onChange_Mes}" >
                            <f:passThroughAttribute name="data-native-menu" value="false" />
                            <f:passThroughAttribute name="data-shadow" value="false" />
                            <f:passThroughAttribute name="data-corners" value="false" />

                            <f:selectItem itemLabel="Mês" itemValue="-1" >
                                <f:passThroughAttribute name="data-placeholder" value="true" />
                            </f:selectItem>

                            <f:selectItems value="#{metaWEB.mes}" var="mes" itemLabel="#{mes.nm_mes}" itemValue="#{mes.cd_mes}" />
                            <f:ajax execute="select_mes" render="select_dia_inicio select_dia_fim" />
                        </h:selectOneMenu>

                        <h:panelGroup id="select_dia_inicio" layout="block" >
                            <h:selectOneMenu value="#{metaWEB.dia_inicio}" >
                                <f:passThroughAttribute name="data-native-menu" value="false" />
                                <f:passThroughAttribute name="data-shadow" value="false" />
                                <f:passThroughAttribute name="data-corners" value="false" />

                                <f:selectItem itemLabel="Inicio" itemValue="0" >
                                    <f:passThroughAttribute name="data-placeholder" value="true" />
                                </f:selectItem>

                                <f:selectItems value="#{metaWEB.lista_dias}" var="dia_inicial" itemLabel="#{dia_inicial}" itemValue="#{dia_inicial}" />
                            </h:selectOneMenu>
                        </h:panelGroup>

                        <h:panelGroup id="select_dia_fim" layout="block" >
                            <h:selectOneMenu value="#{metaWEB.meta.dia_fim}" >
                                <f:passThroughAttribute name="data-native-menu" value="false" />
                                <f:passThroughAttribute name="data-shadow" value="false" />
                                <f:passThroughAttribute name="data-corners" value="false" />

                                <f:selectItem itemLabel="Fim" itemValue="0" >
                                    <f:passThroughAttribute name="data-placeholder" value="true" />
                                </f:selectItem>

                                <f:selectItems value="#{metaWEB.lista_dias}" var="dia_fim" itemLabel="#{dia_fim}" itemValue="#{dia_fim}" />
                            </h:selectOneMenu>
                        </h:panelGroup>

                        <h:inputText id="ds_meta" style="text-transform: uppercase;" value="#{metaWEB.meta.ds_meta}" >
                            <f:passThroughAttribute name="placeholder" value="Descrição" />
                        </h:inputText>

                </h:form>

            </div>

        </div>

    </h:body>

</ui:composition>

感谢前辈^^

[已解决]

我用这段代码来解决：

<script type="text/javascript" >
     function renderForm () {
          $('#f_meta_cadastro').enhanceWithin();
     }
</script>

<f:ajax execute="select_mes" render="ds_meta select_dia_inicio select_dia_fim" onevent="renderForm" />

【问题讨论】：

动态追加项目时需要调用增强。在 jQM 1.4 中，您需要在追加项目后调用$( "#form_id" ).enhanceWithin();。
@Omar 它有效，但我有一个问题。我将enhancedWithin 放在上的事件onEvent 上。这是正确的做法吗？
很高兴它成功了，不过我建议在 1.4 正式发布之前使用 jQM 1.3.2。但是，两个版本之间会有很多变化。我没用过JSF，没报错就是对的。

标签： ajax jsf jquery-mobile jsf-2 jsf-2.2

【解决方案1】：

我记得我的 JS 家伙解决了一个类似的问题，所以我只能指出可能的问题。我认为您的 CSS 必须以某种方式由 JQuery 在document.ready 上应用。 JSF ajax 将再次执行此操作，导致缺少行为和外观。希望对您有所帮助。

【讨论】：

【解决方案2】：

在 jQuery Mobile 1.4 中，在父 div 上调用 .enhanceWithin()，将 jQM 样式添加到所有小部件的子元素。

$( "parent_div_selector" ).enhanceWithin();

【讨论】：

@Cechinel 不客气 :) 您也可以在新添加的选择菜单上使用 .selectmenu()。所以你有两个选择:)