web-dev-qa-db-fra.com

Comment passer une variable JavaScript à PHP dans un widget wordpress?

J'ai passé beaucoup de temps à chercher une solution permettant de transmettre la valeur de la variable JavaScript à la variable PHP du même fichier, même fonction (Widget WordPress, fonction Form). Y at-il un bon moyen, à partir de 2017, de le faire?

J'ai essayé cette méthode ci-dessous. Bien que la partie Ajax affiche le message réussi, la partie php a échoué.

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>
pluginsphpplugin-developmentwidgetsajax
2
Sengngy Kouch

J'ai trouvé un moyen simple de passer une variable JavaScript à la variable PHP. Veuillez noter que cette méthode fonctionne dans WordPress version 4.7.2, et uniquement sur Widget. J'ai écrit beaucoup de commentaires pour essayer d'expliquer ce que chaque ligne faisait. Si vous avez une meilleure solution, partagez-la avec nous!

Solution:

  • Créez un champ de saisie masqué pour stocker la valeur du javascript que vous souhaitez transmettre.
  • Accédez à ce champ de saisie masqué et attribuez sa valeur à une variable PHP.

Widget de démonstration:

  • Je crée un widget de démonstration qui ajoute le mot "LOVE YOU" en fonction du nombre de fois où vous appuyez sur le bouton "Ajoutez LOVE YOU".

  • Notez que j'ai laissé le champ caché indiqué pour une meilleure compréhension.

  • Vous pouvez changer type="text" entype="hidden" pour le masquer.

  • Cette démo ne porte que sur la fonction form du widget.

  • Assurez-vous que vous cliquez sur le bouton Enregistrer, sinon la valeur de l'entrée masquée n'est pas enregistrée par le widget.

Demo Widget ScreenShot:

 enter image description here 

Code source:

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

Rappelez-vous que le code est déclenché de haut en bas.

De cette façon, vous ne pouvez pas 'obtenir' la variable POST avant de l'envoyer via ajax.

Quelque chose qui pourrait fonctionner avec votre configuration:

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

Nous vérifions d’abord si la variable POST existe avec isset(). Si cela existe, nous renvoyons le contenu de 'examplePHP' puis arrêtons l'exécution du script avec die();.

S'il n'y a pas de variable POST disponible, cela signifie que quelqu'un charge simplement la page. Ensuite, nous ne faisons pas écho mais continuons avec le reste de la page.

J'ai ajouté window.location qui est l'URL actuelle. Et la variable response donne l'écho.

Puisqu'il s'agit de WordPress Stack Exchange, je vous recommande d'utiliser WordPress Ajax . Vous pouvez en savoir plus sur la page Codex!

1
xvilo