JSF 아약스 내가 jQuery를 모바일로 프로그래밍 Ajax를 사용하고

jQuery를 모바일로 잃게 CSS 렌더링, 그것은 좋았다 나는JSF 아약스 내가 jQuery를 모바일로 프로그래밍 Ajax를 사용하고

내가 아를 할 노력하고있어 :(뭔가를 렌더링하는 데 사용 아약스를 시도 ultil : selectOneMenu를 다른 h : selectOneMenu를 선택할 때 아이템을 새로 고침하고, 그것을 아아 내 패널 그룹에 넣습니다. 그러나 아약스가 실행되고 패널 그룹이 업데이트되면 selectOneMenu가 JM CSS를 잃어 추악 해집니다.

저는 jsf 2.2와 Jquery Mobile 1.4 베타를 사용하고 있습니다.

전에 :

,363,210

후 :

이 내 페이지입니다.아약스가 작동하고 selectonemenu가 항목을 올바르게 렌더링했기 때문에 bean이 metter가 아닌 것 같습니다. 문제는 단지 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" />

출처

2013-10-25 Cechinel

동적으로 항목을 추가 할 때 강화를 호출해야합니다. jQM 1.4에서는 항목을 추가 한 후에'$ ("#form_id") .enhanceWithin();을 호출해야합니다. – Omar

@Omar 작동하지만 질문이 있습니다. onEvent를 에 이벤트에 추가합니다. 올바른 방법일까요? – Cechinel

1.4 버전이 공식적으로 출시 될 때까지 jQM 1.3.2를 사용하는 것이 좋습니다. 그러나 두 버전 간에는 많은 변경 사항이있을 것입니다. 나는 JSF를 사용한 적이 없다. 오류가 없다면 문제가 해결되지 않는다. – Omar

(부모 div의 .enhanceWithin())은 모든 위젯의 하위 요소에 jQM 스타일을 추가합니다.

$("parent_div_selector").enhanceWithin();

출처

2013-10-25 16:18:58 Omar

그것은 작동합니다. 고마워요. – Cechinel

@Cechinel 당신은 환영합니다. :) 또한 새로 추가 된 셀렉트 메뉴에서'.selectmenu()'를 사용할 수 있습니다. 그래서 두 가지 옵션이 있습니다 :) – Omar

나는 비슷한 문제가 있음을 기억한다. 모자 내 JS 남자가 해결, 그래서 난 당신에게 가능한 문제를 지적 할 수 있습니다. 나는 당신의 CSS가 어떻게 든 JQuery에 의해 document.ready에 적용된다고 생각한다. JSF ajax는 이것을 다시 실행하여 동작 및 모양이 누락되도록합니다. 희망이 도움이됩니다.

출처

2013-10-25 14:43:29

JSF 아약스 내가 jQuery를 모바일로 프로그래밍 Ajax를 사용하고

답변

관련 문제