web-dev-qa-db-fra.com

appel ajax dans wordpress front end

Dans mon plugin, j'utilise deux appels ajax en back-end. cela a bien fonctionné. mais pour fournir la même fonctionnalité en face avant, j'ai chargé la copie de ces deux fonctions avec un autre nom et mon code est:

dans mon fichier principal de plugin:

function my_action_callback(){
  global $wpdb; 
if (@$_POST['id']) {

    $daty = $wpdb->get_results("select eemail_id,eemail_content,eemail_subject  from " . WP_eemail_TABLE . " where 1=1 and eemail_status='YES' and eemail_id=" . $_POST['id']);
    //echo "select eemail_id,eemail_content,eemail_subject  from ".WP_eemail_TABLE." where 1=1 and eemail_status='YES' and eemail_id=".$_POST['id'];

    if (!empty($daty)) {
        foreach ($dat as $datt) {
            echo $datt->eemail_content . "_" . $datt->eemail_subject;
            die();
        }
      }
     } 
   }
  add_action('wp_ajax_nopriv_my_action', 'my_action_callback');

et dans mes settings.js

function showEntryfront(id)
   {


jQuery(document).ready(function($) {

    var data = {
        action: 'my_action',
        id: id

    };

     jQuery.post(ajaxurl, data, function(response) {
        //alert('Got this from the server: ' + response);
        var n=response.split("_");  
        jQuery('textarea#mail_contents').text(n[0]);
        $('#mail_subject').val(n[1]);
        // jQuery('textbox#mail_subject').text(n[1]);
          });
       });
   }

et la page de plugin qui déclenche ce showEntryfront () est:

<select name="eemail_subject_drop" id="eemail_subject_drop" onchange="showEntryfront(this.value)">
                <option value="">Select Email subject</option>
                <?php echo $eemail_subject_drop_val; ?>
            </select>
            <input type="hidden" name="send" value="" id="send" /> </td>
  <tr height="60px;"> <td>
            <textarea   name="mail_contents" id="mail_contents" rows="4" cols="40" ></textarea>

        </td></tr>

La deuxième fonction fait la même chose. seule la table db est différente.

Toujours mes spectacles de console firebug

ReferenceError: ajaxurl is not defined
jQuery.post(ajaxurl, data, function(response) {

et la zone de texte ne se remplit pas avec les données de base de données de la table WP_eemail_Table. Veuillez noter que cette fonctionnalité a fonctionné dans le backend de wp-admin. Je sais que l'appel ajax dans admin se chargera automatiquement par admin-ajax.php. mais comment puis-je mettre en œuvre la même chose en face avant. une erreur dans mon code?

jqueryajaxfront-end
1
Zammuuz

Vous devez localiser le script en utilisant la fonction wp_localize_script. ajaxurl est déjà disponible dans l’administration. Mais en amont, vous devez localiser le script pour définir ajaxurl.

Exemple:

wp_enqueue_script( 'custom-ajax-request', '/path/to/settings.js', array( 'jquery' ) );
wp_localize_script( 'custom-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
4
Nilambar

Il existe actuellement une solution intégrée dans le noyau WordPress pour utiliser Ajax sur le front-end! WordPress possède une bibliothèque javascript peu connue mais très utile, accessible via l'objet JS window.wp, comme ceci:

// In JS:

var action = 'my_action';
var data = {id: 123};

var promise = window.wp.ajax.post( action, data );
promise.always(function(response) {
  console.log('Ajax done:', response);
});

// the promise object also has other methods:
// `done()` / `fail()` / `progress()` / `state()` / `abort()`

L'avantage est que cet objet est maintenu et utilisé par le noyau WordPress. Vous pouvez donc compter sur le fait qu’il s’agit d’un moyen à la fois moderne, efficace et performant de gérer votre Ajax. Notez également que vous n’avez pas besoin de gérer les éléments jQuery ...

Si vous n'avez pas l'objet javascript window.wp dans l'interface frontale, vous devez le charger en mettant en file d'attente ce script principal WP:

<?php

wp_enqueue_scripts( 'wp-utils' );
3
Philipp