it-swarm.com.de

So übergeben Sie eine JavaScript-Variable an PHP in WordPress-Widget?

Ich habe viel Zeit damit verbracht, nach einer Lösung zu suchen, bei der ich den Wert der JavaScript-Variablen in der gleichen Datei und Funktion (WordPress-Widget, Formularfunktion) an die Variable PHP übergeben kann. Gibt es ab 2017 einen guten Weg, dies zu tun?

Ich habe diese Methode unten ausprobiert. Obwohl der Ajax-Teil die erfolgreiche Nachricht hervorbringt, ist der PHP-Teil fehlgeschlagen.

repeat.php

<?php 
    echo $_POST['examplePHP']; //will cause undefined index here
?>
<script>
        jQuery(document).ready(function($){

          var exampleJS = "hi!";

          $.ajax({
                url: ajaxurl, //I have tried 'repeat.php' instead of ajaxurl, but not working.
                type: 'POST',
                data: {
                  examplePHP: exampleJS
                },
                success: function( response){
                  console.log("Successful!");
                },
                error: function(error){
                  console.log("error");
                }
          });

      });
</script>
2
Sengngy Kouch

Ich habe eine einfache Möglichkeit gefunden, eine JavaScript-Variable an die Variable PHP zu übergeben. Bitte beachten Sie, dass diese Methode in WordPress Version 4.7.2 funktioniert und nur speziell für Widget. Ich schrieb viele Kommentare, um zu erklären, was jede Zeile tat. Wenn Sie eine bessere Lösung haben, teilen Sie uns dies bitte mit!

Lösung:

  • Erstellen Sie ein verstecktes Eingabefeld, um den Wert des zu übergebenden Javascript zu speichern.
  • Greifen Sie auf dieses versteckte Eingabefeld zu und weisen Sie dessen Wert einer PHP -Variablen zu.

Demo Widget:

  • Ich erstelle ein Demo-Widget, das "LIEBE DICH" hinzufügt, je nachdem, wie oft Sie auf die Schaltfläche "LIEBE DICH HINZUFÜGEN" drücken.

  • Beachten Sie, dass ich das ausgeblendete Feld zum besseren Verständnis verlassen habe.

  • Sie können type="text" intype="hidden" ändern, um ihn auszublenden.

  • Diese Demo konzentriert sich nur auf die Funktion form des Widgets.

  • Stellen Sie sicher, dass Sie auf die Schaltfläche Speichern klicken. Andernfalls wird der Wert der ausgeblendeten Eingabe nicht vom Widget gespeichert.

Demo Widget ScreenShot:

 enter image description here 

Quellcode:

wp-text-repeater.php

<?php
/**
*Plugin Name: WP Text Reapter
**/

class wp_text_repeater extends WP_Widget {

    /**
     * Sets up the widgets name etc
     */
    public function __construct() {
        $widget_ops = array(
            'classname' => 'wp_text_repeater',
            'description' => 'Widget that prints LOVE YOU repeatedly according to button press',
        );
        parent::__construct( 'wp_text_repeater', 'WP Text Repeater Widget', $widget_ops );
    }

    /**
     * Outputs the content of the widget
     *
     * @param array $args
     * @param array $instance
     */
    public function widget( $args, $instance ) {
        // outputs the content of the widget
    $wp_text_repeater_button = ! empty( $instance['wp_text_repeater_button'] ) ? $instance['wp_text_repeater_button'] : '';
    $wp_text_repeater_appendee = ! empty( $instance['wp_text_repeater_appendee'] ) ? $instance['wp_text_repeater_appendee'] : '';
    $wp_text_repeater_hidden = ! empty( $instance['wp_text_repeater_hidden'] ) ? $instance['wp_text_repeater_hidden'] : '';
    }

    /**
     * Outputs the options form on admin
     *
     * @param array $instance The widget options
     */
    public function form( $instance ) {
        // outputs the options form on admin
    $instance = wp_parse_args( (array) $instance, array( 'wp_text_repeater_button' => '', 'wp_text_repeater_appendee' => '', 'wp_text_repeater_hidden' => ''));

    $wp_text_repeater_button = $instance['wp_text_repeater_button'];
    $wp_text_repeater_appendee = $instance['wp_text_repeater_appendee'];
    $wp_text_repeater_hidden = $instance['wp_text_repeater_hidden'];

    $tempHidden = 'wp_text_repeater_hidden';

  ?>
    <!-- Hidden field that store number of time user press the button -->
    <input
          class="widefat"
          id="<?php echo $this->get_field_id($tempHidden); ?>"
          name="<?php echo $this->get_field_name($tempHidden); ?>"
          type="text"
          value="<?php echo esc_attr($$tempHidden);?>"/>
  <?php

    $max = 0; //Number of time user press the button

    //if JavaScript front-end hidden input has value, assign $max to it.
    //This If statement sync between the javascript and the php part.
    if(strlen($$tempHidden) > 0){
      $max = intval($$tempHidden);
    }

    $counter = 0;
    while($counter < $max){ //loop according to how many time user press the button
  ?>
      <p>LOVE YOU!</p>
  <?php
     $counter++;
    }

    $id_prefix = $this->get_field_id(''); //get the widget prefix id.
  ?>
    <!-- You can append all your content herev-->
    <span id="<?php echo $this->get_field_id('wp_text_repeater_appendee')?>"></span>

    <!-- Add button that call jQery function to add "LOVE YOU" Word -->
    <input style="background-color: #08a538; color:white; height: 27px;"
          class="button widefat"
          type="button"
          id="<?php echo $this->get_field_id('wp_text_repeater_button'); ?>"
          value="Add LOVE YOU"
          onclick="text_repeater.addLove('<?php echo $this->id;?>', '<?php echo $id_prefix;?>'); return false;"
          />

    <script>

    jQuery(document).ready(function($){
      var preIndexID;
      var numberOfLove = <?php echo $max; ?>; //grab value from the php in order to sync between the front and back end.
      text_repeater = {
          addLove :function(widget_id, widget_id_string){
              preIndexID = widget_id_string; //get the correct pre-index of the widget.
              numberOfLove++;
              numberOfLove = numberOfLove.toString(); //convert int to string for the hidden input field.
              $("#" + preIndexID + "wp_text_repeater_hidden").val(numberOfLove); //change the value of the hidden input field.
              $("#" + preIndexID + "wp_text_repeater_appendee").append('<p>LOVE YOU!</p>'); //live update the front-end with "LOVE YOU".
          }
      }
    });

    </script>
  <?php
    }

    /**
     * Processing widget options on save
     *
     * @param array $new_instance The new options
     * @param array $old_instance The previous options
     */
    public function update( $new_instance, $old_instance ) {
        // processes widget options to be saved
    $instance = $old_instance;

    $instance['wp_text_repeater_button'] = sanitize_text_field($new_instance['wp_text_repeater_button']);
    $instance['wp_text_repeater_appendee'] = sanitize_text_field ($new_instance['wp_text_repeater_appendee']);
    $instance['wp_text_repeater_hidden'] = sanitize_text_field( $new_instance['wp_text_repeater_hidden'] );

    return $instance;

    }
}

// register wp_text_repeater widget
function register_wp_text_repeater_widget() {
    register_widget( 'wp_text_repeater' );
}
add_action( 'widgets_init', 'register_wp_text_repeater_widget' );
0
Sengngy Kouch

Bitte denken Sie daran, dass der Code von oben nach unten ausgelöst wird.

Auf diese Weise können Sie nicht die Variable POST 'holen', bevor Sie sie über Ajax senden.

Etwas, das würde mit Ihrem Setup funktioniert:

<?php 
    if(isset($_POST['examplePHP'])){ //check if $_POST['examplePHP'] exists
        echo $_POST['examplePHP']; // echo the data
        die(); // stop execution of the script.
    }
?>

<script>
        jQuery(document).ready(function($){

          var exampleJS = "hi!";

          $.ajax({
                url: window.location, //window.location points to the current url. change is needed.
                type: 'POST',
                data: {
                  examplePHP: exampleJS
                },
                success: function( response){
                  console.log("Successful! My post data is: "+response);
                },
                error: function(error){
                  console.log("error");
                }
          });

      });
</script>

Zuerst prüfen wir, ob die Variable POST mit isset() existiert. Wenn dies existiert, wiederholen wir den Inhalt von 'examplePHP' und stoppen dann die Ausführung des Skripts mit die();.

Wenn keine POST -Variable verfügbar ist, bedeutet dies, dass jemand nur die Seite lädt. Dann hören wir nicht auf, sondern fahren einfach mit dem Rest der Seite fort.

Ich habe window.location hinzugefügt, das ist die aktuelle URL. Und die Variable response gibt das Echo aus.

Da dies der WordPress Stack Exchange ist, würde ich Ihnen empfehlen, WordPress Ajax zu verwenden. Lesen Sie mehr auf der Codex-Seite!

1
xvilo