it-swarm.com.de

Warum wird die nicht gerenderte Widget-Nummer "__i__" im JavaScript angezeigt, nicht aber im HTML?

Ich habe ein Widget, an dem ich gearbeitet habe und das ein <script> -Tag in der $widget->form() -Methode enthält. In meinem Quellcode verwende ich im Skript-Tag Folgendes:

<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>

Wenn ich dann zu Appearance -> Widgets gehe und mein Widget in eine Seitenleiste kopiere, funktioniert kein JavaScript! Ich habe mir den gerenderten HTML-Code angesehen und Folgendes gesehen:

image showing the unrendered widget number

Warum wird die nicht gerenderte Widget-Nummer __i__ im JavaScript, aber nicht im HTML-Teil angezeigt? Dies ist eine neue Drag-and-Drop-Instanz des Widgets, wohlgemerkt, keine Seite Aktualisierung. Wenn ich jedoch die Seite aktualisiere, funktioniert alles einwandfrei. Mache ich hier etwas falsch?

Die Datei, in der sich die JavaScript-Funktionen befinden, wird in den Dev-Tools in die Liste der Quellen aufgenommen. Ich kann sie auch im HTML-Code anzeigen.

In der Plugin-Datei:

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' );
}

Ist dies ein Timing-Problem (meinerseits) oder ein Fehler in WordPress? Jede Hilfe wäre sehr dankbar. Vielen Dank!

1
mrClean

die Widget-Instanz __i__ ist ein Platzhalter/eine Vorlage für neue Widget-Instanzen, wenn sie auf der Benutzeroberfläche erstellt werden. Widgets wird eine tatsächliche Widget-Nummer zugewiesen, die den __i__ ersetzt, wenn sie zu einer Seitenleiste hinzugefügt werden. Anschließend wird eine Ajax-Anforderung von der Benutzeroberfläche an den Server gesendet, um sie mit der neuen Nummer zu aktualisieren. , es wird keine Antwort vom Server erwartet.

Was also passiert, ist, dass die __i__ -Instanz nur in die Benutzeroberfläche der Seitenleiste dupliziert wird. Das einzige, was geändert wird, ist, dass der __i__ in allen Formularfeldern durch eine tatsächliche Nummer ersetzt wird. Ihr JS ist kein Formularfeld .

Hoffentlich erklärt dies das Warum und warum es nach dem Speichern funktioniert (ein Speichern des Widgets löst wahrscheinlich auch das Problem), da das HTML des Widgets nach dem Speichern vollständig auf der Serverseite generiert und nicht nur in JS emuliert wird.

Wie repariert man? Fügen Sie dem Formular keine JS-Snippets hinzu. Verwenden Sie Klassen für die Elemente, die Sie "dynamisch" machen möchten, und verwenden Sie die jQuery-APIs, mit denen das Element relativ zum aktuell angeklickten gefunden werden kann. Wenn sich das Element beispielsweise im "Stammverzeichnis" des Widgets befindet, rufen Sie das übergeordnete Element und find() das Element darunter ab, dessen Klasse Sie bearbeiten möchten.

1
Mark Kaplun