JSF Ajax 渲染使用 Jquery Mobile 丢失 CSS
Posted
技术标签:
【中文标题】JSF Ajax 渲染使用 Jquery Mobile 丢失 CSS【英文标题】：JSF Ajax render lose CSS with Jquery Mobile 【发布时间】：2013-11-04 16:43:14 【问题描述】：我正在使用 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>
感谢前辈^^
[已解决]
我用这段代码来解决：
<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" />
【问题讨论】：
动态追加项目时需要调用增强。在 jQM 1.4 中，您需要在追加项目后调用$( "#form_id" ).enhanceWithin();。
@Omar 它有效，但我有一个问题。我将enhancedWithin 放在 上的事件onEvent 上。这是正确的做法吗？
很高兴它成功了，不过我建议在 1.4 正式发布之前使用 jQM 1.3.2。但是，两个版本之间会有很多变化。我没用过JSF，没报错就是对的。
【参考方案1】：
我记得我的 JS 家伙解决了一个类似的问题，所以我只能指出可能的问题。我认为您的 CSS 必须以某种方式由 JQuery 在document.ready 上应用。 JSF ajax 将再次执行此操作，导致缺少行为和外观。希望对您有所帮助。
【讨论】：
【参考方案2】：在 jQuery Mobile 1.4 中，在父 div 上调用 .enhanceWithin()，将 jQM 样式添加到所有小部件的子元素。
$( "parent_div_selector" ).enhanceWithin();
【讨论】：
@Cechinel 不客气 :) 您也可以在新添加的选择菜单上使用.selectmenu()。所以你有两个选择:)以上是关于JSF Ajax 渲染使用 Jquery Mobile 丢失 CSS的主要内容，如果未能解决你的问题，请参考以下文章
JSF 2.0 复合组件 - ajax 渲染参数 OUTSIDE 组件定义
JSF/PrimeFaces ajax 更新破坏了 jQuery 事件侦听器函数绑定
JSF f:event preRenderView 是由 f:ajax 调用和部分渲染触发的，还有别的吗？