3

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

当我选择另一个 h:selectOneMenu 时，我正在尝试 ah:selectOneMenu 刷新项目，并将其放入 ah: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" />
4

2 回答 2

4

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

$( "parent_div_selector" ).enhanceWithin();
于 2013-10-25T16:18:58.550 回答
0

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

于 2013-10-25T14:43:29.580 回答