JSF Ajax使用Jquery Mobile渲染丢失CSS
Cec*_*nel 3 ajax jsf jsf-2 jquery-mobile jsf-2.2
我正在使用ajax用Jquery Mobile编程,它很好,ultil我尝试使用ajax渲染一些东西:(
我正在尝试啊:当我选择另一个h:selectOneMenu时,selectOneMenu刷新项目,我把它放在里面啊: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" />
在jQuery Mobile 1.4中,调用.enhanceWithin()父div,将jQM样式添加到所有窗口小部件的子元素中.
$( "parent_div_selector" ).enhanceWithin();
| 归档时间： |
|
| 查看次数： |
1528 次 |
| 最近记录： |