web-dev-qa-db-fra.com

Utilisation de jQuery dans le développement de widgets

Je travaille sur un widget qui fait de la magie avec jQuery (diapositive, fondus d’éléments). Le problème est que le script jQuery associé au widget n'est pas appelé lorsque je supprime puis remplace le widget dans la barre latérale.

Même si j'ai dans la fonction form quelque chose comme ceci:

public function form( $instance ) {

    wp_register_script('script', get_template_directory_uri() . '/script.js', array('jquery'), null, true);
    wp_enqueue_script('script');
}

Le script est présent dans la page (si je view source il est là), mais la fonction document.ready n’est pas déclenchée et toutes les actions onclick sont désactivées.

L'actualisation de la page résout le problème, mais existe-t-il un moyen de le résoudre?

J'ai besoin de quelque chose comme document.on("widget-attached-to-sidebar", function(){});

MODIFIER:

Étapes pour reproduire ce problème:

  • refresh the page
  • my jQuery script works
  • delete the widget
  • add it again
  • my jQuery script is not working anymore (need to refresh the page again)

Le script.js est toujours présent dans la page (view source) à travers toutes ces étapes.

widgetsjquery
2
TGeorge

Vous pouvez vous connecter à l'événement DOMNodeInserted pour savoir quand votre widget a été ajouté à la barre latérale.

jQuery(document).on('DOMNodeInserted', '.widget-top', function () {
      alert(jQuery('.widget-title', this).text());
});

Le code ci-dessus alertera tout widget nouvellement ajouté. Une fois connecté au nouveau widget créé, vous pouvez le parcourir pour trouver votre classe spécifique et prendre des mesures, si c'est votre widget qui a été ajouté.

Testé uniquement avec Firefox.

Vous pouvez trouver plus d'informations avec cette question jQuery https://stackoverflow.com/questions/15268661/jquery-on-create-eveate-for-dynamically-created-elements

1
Michael Khalili

Je ne peux pas en accepter le mérite, mais je dois le partager pour ceux qui cherchent encore une réponse. La réponse choisie a fonctionné pour moi au chargement de la page et à la sauvegarde de widgets, mais ne faisait rien sur le widget-add, lequel J'ai besoin de ce sur quoi je travaille.

Après un peu plus de recherche, je suis tombé sur cette réponse par l'utilisateur, George , que j'ai personnalisée un peu plus loin pour cibler le ou les widgets particuliers que je cible:

var $_count = 0;
jQuery( document ).ajaxStop( function(){
    var 
    $_saveBtns = jQuery('.widget-control-save'),
    $_yourSave = '';
    $_saveBtns.each( function(){
        if( jQuery(this).is('[id*="your-widget-id-string"]') ){
            $_yourSave = jQuery(this);
        }
    });

    if ( $_count <= $_yourSave.length ){
        /* Your script/function here */
        $_count++;
    }
    else {
        $_count = 0;
        return;
    }

});
0
mroncetwice

Essayez d'utiliser le déclencheur "ajouté au widget".

Plus d'infos: https://core.trac.wordpress.org/ticket/19675#comment:12

0
Otto

Je pense que le meilleur moyen de charger de manière conditionnelle un script en fonction de l'activation ou non du widget sur la page consiste à vérifier is_active_widget () ailleurs en dehors de la classe du widget et à le lier à wp_enqueue_scripts. Quelque chose comme ça:

function my_widget_load_js() {
    if ( is_active_widget( false, false, (insert widget id-base here), true ) ) {
        wp_register_script('script', get_template_directory_uri() . '/script.js', array('jquery'), null, true);
        wp_enqueue_script('script');
    }
}
add_action ( 'wp_enqueue_scripts', 'my_widget_load_js' );
0
Caspar