Рендеринг JSF Ajax теряет CSS с Jquery Mobile

Я использую 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>

Thanks advanced ^^

[Решено]

Я использую этот код для решения:

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

ajax jsf jquery-mobile jsf-2.2 jsf-2
person Cechinel    schedule 25.10.2013    source источник
comment
Вам нужно вызвать улучшение при динамическом добавлении элементов. В jQM 1.4 вам нужно вызвать $( "#form_id" ).enhanceWithin(); после добавления элементов.   -  person Omar    schedule 25.10.2013
comment
@ Омар Это работает, но у меня есть вопрос. Я поместил функциюEnhanceWithin для события onEvent на ‹f:ajax›. Это правильный способ сделать это?   -  person Cechinel    schedule 25.10.2013
comment
Рад, что это сработало, хотя я рекомендую использовать jQM 1.3.2 до официального выпуска версии 1.4. Однако между обеими версиями будет много изменений. Я никогда не использовал JSF. Если у вас нет ошибок, значит все правильно.   -  person Omar    schedule 25.10.2013

Ответы (2)


arrow_upward
4
arrow_downward

в jQuery Mobile 1.4 вызов .enhanceWithin() для родительского элемента div добавляет стили jQM к дочерним элементам всех виджетов.

$( "parent_div_selector" ).enhanceWithin();
person Omar    schedule 25.10.2013
comment
@Cechinel, добро пожаловать :), вы также можете использовать .selectmenu() в недавно добавленных меню выбора. Так что у вас есть два варианта :) - person Omar; 25.10.2013

arrow_upward
0
arrow_downward

Я помню, что у меня была похожая проблема, которую решил мой парень JS, поэтому я могу только указать вам на возможную проблему. Я думаю, это связано с тем, что ваш CSS каким-то образом применяется JQuery на document.ready. JSF ajax снова выполнит это, что приведет к отсутствующему поведению и внешнему виду. Надеюсь, поможет.

person Ioannis Deligiannis    schedule 25.10.2013