web-dev-qa-db-fra.com

Pourquoi le numéro de widget non rendu `__i__` apparaît-il dans le code JavaScript mais pas dans le code HTML?

J'ai travaillé sur un widget qui contient une balise <script> dans la méthode $widget->form(). J'utilise les éléments suivants dans mon code source, dans la balise script:

<script>
    (function ($) {
        var desrdPostTypeSelector = '#<?php echo $this->get_field_id( 'desired_post_type' ); ?>';
        var beginPostTypeSelector = '#<?php echo $this->get_field_id( 'beginning_post_type' ); ?>';

        $('#<?php echo $this->get_field_id( 'isSingle' ); ?>').on( 'change', function() {
            $( '.<?php echo $multi_post_class ?>, #<?php echo $beginning_post_tag_id ?>' ).toggleClass('hidden', this.checked);
        });

        $('#<?php echo $this->get_field_id( 'isTaxonomy' ); ?>').on( 'change', function() {
            $( '#<?php echo $beginning_post_tag_id ?>' ).toggleClass('hidden', this.checked);
        });

        $('#<?php echo $this->get_field_id( 'isSingle' ); ?>, #<?php echo $this->get_field_id( 'isTaxonomy' ); ?>').on( 'change', function () {
            if ( $('#<?php echo $beginning_post_tag_id ?>').hasClass('hidden') ) {
                clearAllDisabledBy( getListOfOptionElements( $( desrdPostTypeSelector )[0] ) );
            } else {
                disableOptionsBasedOnSelected( $( beginPostTypeSelector )[0], $( desrdPostTypeSelector )[0] );
            }
        } );

        $('#<?php echo $this->get_field_id( 'beginning_post_type' ); ?>').on( 'change submit', function () {
            clearAllDisabledBy( getListOfOptionElements( $( desrdPostTypeSelector )[0] ) );
            disableOptionsBasedOnSelected( this, $( desrdPostTypeSelector )[0] );
        } );
    })(jQuery);
</script>

Ensuite, lorsque je vais à Appearance -> Widgets et que je copie mon widget dans une barre latérale, aucun des scripts JavaScript ne fonctionne! J'ai regardé le code HTML rendu et j'ai vu ceci:

image showing the unrendered widget number

Pourquoi le numéro de widget non restitué __i__ apparaît-il dans le code JavaScript mais pas dans la partie HTML? Il s'agit d'une nouvelle instance de glisser-déposer du widget, mais pas de page rafraîchir. Cependant, lorsque j'actualise la page, tout fonctionne correctement. Est-ce que je fais quelque chose de mal ici?

Le fichier où se trouvent les fonctions JavaScript est inclus dans la liste des sources dans les outils de développement, je peux également le voir dans le code HTML, mais pour les kicks, voici comment j'ai mis en file d'attente:

Dans le fichier plugin:

function enqueue_scripts() {
    wp_enqueue_script(
        'related_posts_script_helpers',
        plugin_dir_url( __FILE__ ) . "assets/related-posts-script-helpers.js",
        array( 'jquery' ),
        '1.0'
    );
}

if ( is_admin() ) {
    add_action( 'admin_enqueue_scripts', 'enqueue_scripts' );
}

Est-ce un problème de synchronisation (de ma part) ou un bogue dans WordPress? Toute aide serait très appréciée. Je vous remercie!

pluginswidgetsjavascript
1
mrClean

l'instance de widget __i__ est un espace réservé/modèle pour les nouvelles instances de widget lors de leur création sur l'interface utilisateur. Les widgets se voient attribuer un numéro de widget réel qui remplacera le __i__ lorsqu’ils seront ajoutés à la barre latérale, puis Une demande ajax sera envoyée de l’UI au serveur pour la mettre à jour avec le nouveau numéro , aucune réponse n'est attendue du serveur pour cela.

Donc, ce qui se passe, c'est que l'instance __i__ est simplement dupliquée dans l'interface utilisateur de la barre latérale. La seule chose qui change est le __i__ qui est remplacé par un nombre réel dans tous les champs du formulaire. votre JS n'est pas un champ de formulaire .

Espérons que cela explique le pourquoi, et pourquoi cela fonctionne après une sauvegarde (une sauvegarde de widget résoudra probablement aussi le problème), car après la sauvegarde, le code HTML du widget est entièrement généré côté serveur et non seulement émulé dans JS.

Comment réparer? N'ajoutez pas de fragments JS dans le formulaire. Utilisez des classes sur les éléments que vous souhaitez rendre "dynamiques" et utilisez les API jQuery qui permettent de localiser l'élément par rapport à celui sur lequel l'utilisateur a cliqué. Par exemple, si l'élément se trouve sur la "racine" du widget, obtenez les éléments parent et find() l'élément situé en dessous, qui contient la classe que vous souhaitez manipuler.

1
Mark Kaplun