Ejecutando Javascript cuando se agrega un widget en el backend

Question

Ejecutando Javascript cuando se agrega un widget en el backend

#1 de chifliiiii (14 votos)
#2 de MichaelJames (11 votos)

19

Tengo widgets que tienen controles javascript adjuntos.

Si el widget está presente cuando se carga la página de administración del widget, los controles funcionan correctamente.

Cuando agrego un nuevo widget, no funcionan correctamente, obtengo el marcado, pero ningún evento de javascript tiene efecto.

Si guardo el nuevo widget, cuando el formulario se vuelve a cargar, los controles se crean correctamente y ahora funcionan.

Actualizar la página también soluciona el problema, pero solo para los widgets existentes. Los nuevos widgets tienen este problema todavía.

Específicamente estoy ejecutando selectize en entradas seleccionadas en estos puntos:

documento listo
Ajaxcomplete

He verificado que mi código se ejecuta en cada evento como se desea, pero los resultados no son los esperados.

Aquí hay un complemento de prueba que demuestra el problema:

enlace

Verás que tengo un contador que aumenta con cada elemento de selección que encuentra que puede convertir.

Notas:

Cuando se carga la página del widget, puedo ver el aumento del contador en la consola JS como se esperaba
Cuando agrego un nuevo widget, el código se ejecuta, sin embargo, no encuentra ningún elemento de selección en el que pueda ejecutarse, como lo demuestra found.length que es 0. Este no debería ser el caso, ya que cada nuevo widget de ese tipo debería tener un elemento de selección
los elementos seleccionados tienen una clase para identificarlos, esta clase se elimina una vez que se aplica la biblioteca de selección para evitar la duplicación y el nuevo procesamiento de los widgets existentes.
Antes de utilizar selectize, usé Select2, que tenía el mismo problema
Comentando el código AJAX, esperaría que los nuevos widgets tuvieran una entrada de selección estándar. Ellos no. No sé por qué este es el caso

Entonces, ¿cómo puedo hacer que el control de selección funcione sin decirle al usuario que actualice / haga clic en guardar antes de hacer cambios?

widgets javascript

pregunta Tom J Nowell 17.01.2014 - 02:02

2 respuestas

14

Como comentó @ aaron-holbrook, un enfoque más limpio será:

jQuery(document).on('widget-updated widget-added', function(){
    // your code to run
});

Simplemente pegue aquí como referencia, ya que las respuestas son mucho más fáciles de encontrar que los comentarios

respondido por el chifliiiii 24.11.2014 - 19:50

Lea otras preguntas en las etiquetas widgets javascript

Creando una instancia de wp_editor con botones personalizados tinyMCE Elimine la barra de taxonomía de un enlace permanente de taxonomía jerárquica personalizada

score 11 · Accepted Answer

Grandes noticias,

Lo he arreglado.

Le pido disculpas por faltar a su esencia en mi comentario inicial y por darle una respuesta que ya había implementado. ¡Eso me enseñará a responder en mi teléfono mientras estoy en un tren!

Su uso de ajaxstop es correcto. La mayor parte del JS está funcionando correctamente, puede ver cómo se inicializan los estilos CSS y los cambios en el DOM.

El problema reside, de hecho, en su selector.

Esto se debe a que el contenido del widget no se carga a través de ajax, de hecho, lo clona desde la columna de la izquierda donde está oculto y luego dispara una llamada ajax para guardar la posición del widget en la columna de la derecha. Esto explica por qué ajaxstop funciona bien, incluso cuando se clona contenido de pensamiento. Sin embargo, debido a que hay una versión oculta del widget en la columna de la izquierda, su JS está creando una instancia de eso. Como tal, cuando lo arrastras a la columna de la derecha, obtienes un clon destrozado del widget oculto.

Por lo tanto, debe seleccionar el que está en el lado izquierdo. A continuación se muestra el código corregido:

<script>
jQuery( document ).ready( function( $ ) {
    function runSelect() {
        var found = $( '#widgets-right select.testselectize' );
        found.each( function( index, value ) {

            $( value ).selectize();
                .removeClass( 'testselectize' )
                .addClass( 'run-' + window.counter );

            console.log( $val );
            window.counter++;
        } );
    }

    window.counter = 1;

    runSelect();

    $( document ).ajaxStop( function() {
        runSelect();
    } );
} );
</script>