使用Jquery-Mobile的JSF-Ajax呈现丢失CSS
我正在使用ajax与Jquery Mobile进行编程，这很好，最后我尝试使用ajax呈现一些东西： 当我选择另一个h:selectOneMenu时，我尝试执行h:selectOneMenu刷新项目，并将其放入一个h:panelGroup中工作。但是，当执行ajax并更新panelGroup时，selectOneMenu会丢失JMCSS并变得丑陋 我正在使用JSF2.2和jQueryMobile 1.4beta 之前： 之后： 这是我的页面。 我想这个bean不会出现问题，因为ajax正在工作，selectonemenu可以正确地呈现项目。 问题在于css：使用Jquery-Mobile的JSF-Ajax呈现丢失CSS,ajax,jsf,jquery-mobile,jsf-2,jsf-2.2,Ajax,Jsf,Jquery Mobile,Jsf 2,Jsf 2.2,我正在使用ajax与Jquery Mobile进行编程，这很好，最后我尝试使用ajax呈现一些东西： 当我选择另一个h:selectOneMenu时，我尝试执行h:selectOneMenu刷新项目，并将其放入一个h:panelGroup中工作。但是，当执行ajax并更新panelGroup时，selectOneMenu会丢失JMCSS并变得丑陋 我正在使用JSF2.2和jQueryMobile 1.4beta 之前： 之后： 这是我的页面。 我想这个bean不会出现问题，因为ajax正在工作，
<?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" />
我记得我的JS助手解决了一个类似的问题，所以我只能指出一个可能的问题。我认为您的CSS必须以某种方式被document.ready上的JQuery应用。JSF ajax将再次执行此操作，导致缺少行为和外观。希望能有所帮助。在jQuery Mobile 1.4中，父div上的call.enhanceWithin将jQM样式添加到所有小部件的子元素中
$( "parent_div_selector" ).enhanceWithin();
动态追加项目时，需要调用增强。在jqm1.4中，您需要调用$form_id.enhanceWithin；在附加项目之后。@Omar它可以工作，但我有一个问题。我在事件OneEvent上添加了增强功能。这是一种正确的方法吗？很高兴它成功了，不过我建议在正式发布1.4之前使用jQM 1.3.2。但是，两个版本之间会有很多变化。我从未使用过JSF，如果没有错误，那么它就是正确的。@Cechinel不客气：您也可以在新添加的selectmenu上使用.selectmenu。所以你有两个选择：