¿Cómo puedo pasar JSF managed bean propiedades de una función de JavaScript?

Me gustaría saber cómo puedo pasar JSF managed bean propiedades a una función 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>

OriginalEl autor Isma90 | 2013-02-05

3 Kommentare

  1. 21

    Esto no es exactamente «pasar» de JSF variables. Esto es sólo la impresión de JSF variables como si fueran variables JavaScript/valores. Usted sabe, JSF y JS no se ejecutan en modo de sincronización. JSF se ejecuta en el servidor web y produce HTML/CSS/JS código que a su vez ejecuta en el navegador una vez que llegó allí.

    Su problema concreto es la causa más probable porque usted escribió JSF código de tal manera que se genera no válido JS sintaxis. Una manera fácil de comprobar que es la comprobación de la JSF generado por la salida de HTML que usted puede encontrar el botón derecho del ratón, Ver código Fuente en el navegador, y comprobando si usted no ve ningún error de sintaxis informes en el JS de la consola en el navegador que usted puede encontrar presionando F12 en Chrome/IE9+/Firefox23+.

    Imaginar que #{entity.key} aquí

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

    imprime un Java variable de cadena como "foo", a continuación, el código HTML generado vería

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

    Pero oye, mira, que representa un JavaScript variable nombre foo, no un JS de la cadena de valor! Así que si usted realmente desea en última instancia, terminan como

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

    a continuación, usted debe mandar a JSF para generar exactamente que HTML:

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

    Cuidado de caracteres especiales en el JSF variable, aunque. Usted puede utilizar OmniFaces de:escapeJS() función para que.


    No relacionados para el problema concreto, la aplicación concreta de actualizaMenu() no tiene sentido. Usted parece estar tratando de establecer un bean de la propiedad. Usted no debe usar JS para que, pero un <h:commandLink> lugar.

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

    Nido si es necesario un <f:ajax> a hacer asincrónica.

    OriginalEl autor BalusC

  2. 1

    Yo recomiendo usar el enlace de evento con jQuery y el atributo de datos sobre los elementos para obtener el mismo resultado (suponiendo que el uso de 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 ha señalado en otros lugares, a menos que #{linkedMenu.setKey(key)} devuelve realmente una pieza de javascript (que las costuras raro y probablemente sería realmente mal, incluso si lo hizo) que usted necesita para corregir la función.

    OriginalEl autor Jonas Schubert Erlandsson

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea