change - ¿Cómo volver a ejecutar la función javascript después de que el formulario reRender?

change title javascript

Question

Necesito volver a ejecutar javascript justo después de que el formulario se vuelva a representar. Simplemente, poner javascript después del contenido XHTML no será de ayuda ya que es una solicitud parcial. Además, no puedo usar "onComplete" ya que el comando commandButton desde el cual estoy re-renderizando el formulario está en el componente JSF usado en varios lugares Necesito obtener la solución localmente.

¿Hay alguna manera? Me preguntaba si f: ajax ayudaría en este caso.

Por favor, hágamelo saber, si alguien tiene alguna pista al respecto.

Answer 1

La forma más simple es simplemente poner la llamada a la función JS en el componente a actualizar.

<h:form>
    ...
    <h:commandButton value="submit"><f:ajax render="@form" /></h:commandButton>
    <h:outputScript>someFunction();</h:outputScript>
</h:form>

De esta manera se ejecuta a medida que se carga la página y también si el formulario se actualiza por ajax.

En cuanto al <f:ajax> sí, también puede usar su atributo de onevent .

<f:ajax ... onevent="handleAjax" />

con

function handleAjax(data) {
    var status = data.status;

    switch(status) {
        case "begin":
            // This is invoked right before ajax request is sent.
            break;

        case "complete":
            // This is invoked right after ajax response is returned.
            break;

        case "success":
            // This is invoked right after successful processing of ajax response and update of HTML DOM.
            someFunction();
            break;
    }
}

Puede agregar un jsf.ajax.addOnEvent() global por jsf.ajax.addOnEvent() para que no tenga que especificarlo en cada atributo único de <f:ajax> si el requisito funcional se aplica a cada solicitud de ajax.

jsf.ajax.addOnEvent(handleAjax);

Una alternativa es usar la biblioteca de utilidades JSF de OmniFaces que ofrece <h:onloadScript> para este propósito exacto. Puedes colocarlo en la cabeza por lo que quieras.

<h:onloadScript>someFunction();</h:onloadScript>

Esto se vuelve a eliminar automáticamente en cada solicitud individual de ajax en la vista para que no tenga que copiarla en varios lugares individuales en la vista que puede actualizarse con ajax, o repetir su ID de padre en cada <f:ajax render> .

Answer 2

La primera respuesta de BalusC es la más adecuada si desea realizar operaciones complejas con JQuery / JS y no está especialmente preocupado por this

Para JS más complejo, si decide usar un controlador de eventos global y, por ejemplo, usa JS para bind funciones a elementos, estas funciones se volverán a unir (por lo tanto, se ejecutarán dos veces), por lo que necesita alguna forma de identificar qué necesidades para ser re-ejecutado.

Lo que finalmente hice fue obtener los ID de la devolución de llamada del evento y ejecutar solo el JS / JQuery relevante:

jsf.ajax.addOnEvent(ajaxCompleteProcess);


function ajaxCompleteProcess(data) {
    if (data.status && data.status === ''success'') {
        var children1 = data.responseXML.children;
        for (i = 0; i < children1.length; i += 1) {
            var children2 = children1[i].children;
            for (j = 0; j < children2.length; j += 1) {
                var children3 = children2[j].children;
                for (y = 0; y < children3.length; y += 1) {
                    if (children3[y].id.indexOf(''javax.faces.ViewState'') != -1)
                        continue;
                    elementProcess((''#'' + children3[y].id.replace(//:/g, ''//:'')));
                }
            }
        }
    }
}

Nota: estos feos for bucles probablemente no sean necesarios (podrías usar clildren [0]), pero aún no he encontrado el tiempo para verificar la especificación.

Answer 3

Puedes agregar jQuery a tu aplicación y hacer algo como:

$(#yourComponentId).load(function(){
   //execute javascript.
});

Puedes echar un vistazo aquí http://api.jquery.com/load/

LE: que estar en

$(document).ready(function(){
}

De c.