Pregunta ¿Cómo transfiero las propiedades de beans gestionados de JSF a una función de JavaScript?


Me gustaría saber cómo puedo pasar las propiedades de beans gestionados de JSF a una función de JavaScript.

Algo como esto:

<script>
  function actualizaMenu(key){
    #{linkedMenu.setKey(key)}
  }
</script>
<ul>
  <ui:repeat value="#{moduleList.modulos}" var="entity">
    <li>
      <a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a>
    </li>
  </ui:repeat>
</ul>

8
2018-02-05 13:47


origen


Respuestas:


Esto no es exactamente "pasar" de las variables JSF. Esto solo imprime las variables JSF como si fueran valores / variables de JavaScript. Ya sabes, JSF y JS no se ejecutan en sincronía en absoluto. JSF se ejecuta en un servidor web y produce código HTML / CSS / JS que a su vez se ejecuta en el navegador web una vez que llegó allí.

Su problema concreto probablemente se deba a que escribió el código JSF de tal manera que genera una sintaxis JS no válida. Una manera fácil de verificarlo es simplemente verificando el resultado HTML generado por JSF que puede encontrar haciendo clic con el botón derecho, Ver fuente en el navegador y comprobando si no ve ningún informe de errores de sintaxis en la consola JS en el navegador que puede encontrar presionando F12 en Chrome / IE9 + / Firefox23 +.

Imagina eso #{entity.key} aquí

<a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a>

imprime una variable de cadena Java como "foo", entonces el HTML generado se vería como

<a onclick="actualizaMenu(foo)">some name</a>

Pero hey, mira, eso representa un JavaScript variable llamado foo, no un valor de cadena JS! Entonces, si realmente quieres terminar en última instancia como

<a onclick="actualizaMenu('foo')">some name</a>

entonces debes instruir a JSF para que genere exactamente ese HTML:

<a onclick="actualizaMenu('#{entity.key}')">#{entity.nombre}</a>

Sin embargo, ten cuidado con los caracteres especiales en la variable JSF. Puedes usar OmniFaces of:escapeJS() función para eso.


No relacionado al problema concreto, la implementación concreta de actualizaMenu() no tiene sentido. Parece que estás intentando establecer una propiedad de frijol. No deberías usar JS para eso, sino <h:commandLink> en lugar.

<h:commandLink value="#{entity.nombre}" action="#{linkedMenu.setKey(entity.key)}" />

Nido si es necesario a <f:ajax> para hacerlo asincrónico


21
2018-02-05 13:56



Recomendaría utilizar el enlace de eventos con jQuery y el atributo de datos en elementos para obtener el mismo resultado (suponiendo que use jQuery):

<script>
  function actualizaMenu(key){
    /* Logic here ... */
  }

  $(document).ready(function(){
    $('.menuItem').click(function(){
      var key = $(this).data('key');
      actualizaMenu(key);
    );
  });
</script>

...

<ul>
  <ui:repeat value="#{moduleList.modulos}" var="entity">
    <li>
      <a data-key="#{entity.key}" class="menuItem">#{entity.nombre}</a>
    </li>
  </ui:repeat>
</ul>

Y, como se señaló en otro lugar, a menos #{linkedMenu.setKey(key)} de hecho, devuelve un trozo de javascript (que parece poco probable y probablemente sea realmente malo, incluso si lo hiciera), necesita reparar la función también.


1
2018-02-05 14:17



Sé que esta pregunta es antigua, pero para aquellos que todavía están buscando hay una alternativa.

Si está utilizando Primefaces simplemente pruebe esto. Contexto de solicitud


1
2018-04-15 20:41