JSF Ajax render lose CSS with Jquery Mobile

问题

I'm using ajax to programming with Jquery Mobile, and it was good, ultil I try use ajax to render something :(

I'm trying to do a h:selectOneMenu refresh the items when I select another h:selectOneMenu, and I put it inside a h:panelGroup to work. However, when the ajax is executed, and the panelGroup is updated, the selectOneMenu lose the JM css and become ugly.

I'm using jsf 2.2 and Jquery Mobile 1.4 Beta

Before:

After:

This is my page. I guess the bean doesn't metter, because the ajax is working and the selectonemenu is correct render the items. The problem is just the 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>

Thanks advanced ^^

[Solved]

I use this code to solve:

<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" />

回答1:

in jQuery Mobile 1.4, call .enhanceWithin() on parent div, adds jQM styles to children elements of all widgets.

$( "parent_div_selector" ).enhanceWithin();

回答2:

I remember having a similar problem that my JS guy solved, so I can only point you to possible a problem. I think it has todo that your CSS is somehow applied by JQuery on document.ready. JSF ajax will on execute this again, resulting on missing behaviour and appearance. Hope it helps.

来源：https://stackoverflow.com/questions/19591958/jsf-ajax-render-lose-css-with-jquery-mobile

标签

ajax

jsf

jquery-mobile

jsf-2

jsf-2.2