JSF的Ajax渲染输CSS使用jQuery Mobile [英] JSF Ajax render lose CSS with Jquery Mobile

查看：134
本文介绍了JSF的Ajax渲染输CSS使用jQuery Mobile的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用AJAX编程使用jQuery Mobile，这是很好的，ultil我尝试使用Ajax呈现的东西：（

我试图做啊：selectOneMenu用于刷新项目时，我选择其他H：selectOneMenu用于，我把它里面啊：panelGroup中工作。然而，当执行AJAX，以及panelGroup中被更新时，selectOneMenu用于输JM css和变得丑陋。

我使用的是JSF 2.2和jQuery Mobile的1.4测试版

在

在

这是我的网页。 我猜Bean不梅特，因为AJAX是工作和selectOneMenu用于正确渲染的项目。 问题仅仅是CSS：

 ＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML的xmlns =htt​​p://www.w3.org/1999/xhtml
  的xmlns：H =htt​​p://xmlns.jcp.org/jsf/html
  的xmlns：F =htt​​p://xmlns.jcp.org/jsf/core
  的xmlns：UI =htt​​p://xmlns.jcp.org/jsf/facelets＆GT;
＆LT; UI：组合物＆gt;
    ＆LT; H：头＆GT;
        ＆LT;冠军＆GT;经理＆LT; /标题＆GT;
        ＆LT; META NAME =视口内容=WIDTH =装置宽度，初始规模为1，最大规模= 1.0，用户可扩展性=无/＆GT;
        ＆LT;链接相对=样式表的href =HTTP：//$c$c.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.css /＆GT;
        ＆所述;脚本的src =的http：//$c$c.jquery.com/jquery-1.10.2.min.js＆GT;＆所述; /脚本＆GT;
        ＆LT;脚本src="http://$c$c.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.js"></script>

        ＆LT; F：元数据＆GT;
            ＆LT; F：viewParam名=cd_meta值=＃{metaWEB.cd_meta}＆GT;＆LT; / F：viewParam＆GT;
        ＆LT; / F：元数据＆GT;
    ＆LT; / H：头＆GT;

    ＆LT; H：身体GT;

        ＆LT; D​​IV数据角色=页面＆GT;

            ＆LT; D​​IV数据角色=头的数据主题=B＆GT;
                ＆所述; A HREF =＃{metaWEB.voltar（）}数据图标=箭头升数据iconpos =NOTEXT数据iconshadow =假数据主题=一个＆GT;菜单＆其中; / a取代;
                ＆LT; H1＆GT;元＆LT; / H1＆GT;
            ＆LT; / DIV＆GT;

            ＆LT; D​​IV数据角色=内容＆GT;

                ＆LT; H：邮件ID =mensagem_verificacaoshowDetail =假的风格=颜色：红色; /＆GT;

                ＆LT; H：格式ID =f_meta_cadastro＆GT;
                    ＆LT; F：passThroughAttribute名=数据AJAX值=FALSE/＆GT;

                        ＆LT; H：selectOneMenu用于ID =select_ano值=＃{metaWEB.meta.ano}valueChangeListener =＃{metaWEB.onChange_Ano}＆GT;
                            ＆LT; F：passThroughAttribute名=数据本机菜单中的值=FALSE/＆GT;
                            ＆LT; F：passThroughAttribute名=数据影子值=FALSE/＆GT;
                            ＆LT; F：passThroughAttribute名=数据角落值=FALSE/＆GT;

                            ＆所述; F：选择信息itemLabel =肛itemValue =0＆GT;
                                ＆LT; F：passThroughAttribute名=数据占位符值=真/＆GT;
                            ＆LT; / F：选择信息＆GT;

                            ＆LT; F：selectItems的值=＃{metaWEB.anoCada​​stro}VAR =ANOitemLabel =＃{ano.toString（）}itemValue =＃{}肛/＆GT;
                            ＆LT; F：AJAX执行=select_ano渲染=ds_meta/＆GT;
                        ＆LT; / H：selectOneMenu用于＆GT;

                        ＆LT; H：selectOneMenu用于ID =select_mes值=＃{metaWEB.meta.mes}valueChangeListener =＃{metaWEB.onChange_Mes}＆GT;
                            ＆LT; F：passThroughAttribute名=数据本机菜单中的值=FALSE/＆GT;
                            ＆LT; F：passThroughAttribute名=数据影子值=FALSE/＆GT;
                            ＆LT; F：passThroughAttribute名=数据角落值=FALSE/＆GT;

                            ＆LT; F：选择信息itemLabel =MESitemValue = -  1＆GT;
                                ＆LT; F：passThroughAttribute名=数据占位符值=真/＆GT;
                            ＆LT; / F：选择信息＆GT;

                            ＆LT; F：selectItems的值=＃{metaWEB.mes}VAR =MESitemLabel =＃{mes.nm_mes}itemValue =＃{mes.cd_mes}/＆GT;
                            ＆LT; F：AJAX执行=select_mes渲染=select_dia_inicio select_dia_fim/＆GT;
                        ＆LT; / H：selectOneMenu用于＆GT;

                        ＆LT; H：panelGroup中的id =select_dia_inicio布局=块＆GT;
                            ＆LT; H：selectOneMenu用于值=＃{metaWEB.dia_inicio}＆GT;
                                ＆LT; F：passThroughAttribute名=数据本机菜单中的值=FALSE/＆GT;
                                ＆LT; F：passThroughAttribute名=数据影子值=FALSE/＆GT;
                                ＆LT; F：passThroughAttribute名=数据角落值=FALSE/＆GT;

                                ＆所述; F：选择信息itemLabel =INICIOitemValue =0＆GT;
                                    ＆LT; F：passThroughAttribute名=数据占位符值=真/＆GT;
                                ＆LT; / F：选择信息＆GT;

                                ＆LT; F：selectItems的值=＃{metaWEB.lista_dias}VAR =dia_inicialitemLabel =＃{dia_inicial}itemValue =＃{dia_inicial}/＆GT;
                            ＆LT; / H：selectOneMenu用于＆GT;
                        ＆LT; /小时：panelGroup中＆GT;

                        ＆LT; H：panelGroup中的id =select_dia_fim布局=块＆GT;
                            ＆LT; H：selectOneMenu用于值=＃{metaWEB.meta.dia_fim}＆GT;
                                ＆LT; F：passThroughAttribute名=数据本机菜单中的值=FALSE/＆GT;
                                ＆LT; F：passThroughAttribute名=数据影子值=FALSE/＆GT;
                                ＆LT; F：passThroughAttribute名=数据角落值=FALSE/＆GT;

                                ＆所述; F：选择信息itemLabel =鱼翅itemValue =0＆GT;
                                    ＆LT; F：passThroughAttribute名=数据占位符值=真/＆GT;
                                ＆LT; / F：选择信息＆GT;

                                ＆LT; F：selectItems的值=＃{metaWEB.lista_dias}VAR =dia_fimitemLabel =＃{dia_fim}itemValue =＃{dia_fim}/＆GT;
                            ＆LT; / H：selectOneMenu用于＆GT;
                        ＆LT; /小时：panelGroup中＆GT;

                        ＆LT; H：inputText的ID =ds_meta的风格=文本转换：大写;值=＃{metaWEB.meta.ds_meta}＆GT;
                            ＆LT; F：passThroughAttribute名=占位符值=Descrição/＆GT;
                        ＆LT; /小时：inputText的＆GT;

                ＆LT; /小时：形式GT;

            ＆LT; / DIV＆GT;

        ＆LT; / DIV＆GT;

    ＆LT; / H：身体GT;

＆LT; / UI：组合物＆gt;

由于先进的^^

[解决]

我用这个code来解决：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
     功能renderForm（）{
          $（'＃f_meta_cadastro）enhanceWithin（）;
     }
＆LT; / SCRIPT＆GT;

＆LT; F：AJAX执行=select_mes渲染=ds_meta select_dia_inicio select_dia_fim的OnEvent =renderForm/＆GT;

解决方案

在jQuery Mobile的1.4，调用 .enhanceWithin（）在父分区，增加了JQM样式子元素所有的部件。

  $（parent_div_selector）.enhanceWithin（）;

I'm using ajax to programming with Jquery Mobile, and it was good, ultil I try use ajax to render something :(

I'm trying to do a h:selectOneMenu refresh the items when I select another h:selectOneMenu, and I put it inside a h:panelGroup to work. However, when the ajax is executed, and the panelGroup is updated, the selectOneMenu lose the JM css and become ugly.

I'm using jsf 2.2 and Jquery Mobile 1.4 Beta

Before:

After:

This is my page. I guess the bean doesn't metter, because the ajax is working and the selectonemenu is correct render the items. The problem is just the 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 ^^

[Solved]

I use this code to solve:

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

解决方案

in jQuery Mobile 1.4, call .enhanceWithin() on parent div, adds jQM styles to children elements of all widgets.

$( "parent_div_selector" ).enhanceWithin();

这篇关于JSF的Ajax渲染输CSS使用jQuery Mobile的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆