Chiamata Ajax nel frontend di WordPress

19 ago 2014, 10:48:08
Visualizzazioni: 22.9K
Voti: 1

Nel mio plugin sto usando due chiamate ajax nel backend che funzionano correttamente. Per fornire la stessa funzionalità nel frontend ho caricato una copia di queste due funzioni con nomi diversi e il mio codice è:

Nel file principale del 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']);
    //Seleziona eemail_id,eemail_content,eemail_subject dalla tabella WP_eemail_TABLE dove status='YES' e id corrisponde

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

E nel mio settings.js:

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

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

     jQuery.post(ajaxurl, data, function(response) {
        //Ricevuto dal 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]);
          });
       });
   }

E la pagina del plugin che attiva questa showEntryfront() è:

<select name="eemail_subject_drop" id="eemail_subject_drop" onchange="showEntryfront(this.value)">
                <option value="">Seleziona oggetto email</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 seconda funzione fa la stessa cosa, solo la tabella del database è diversa.

La console di Firebug mostra ancora:

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

E la textarea non viene popolata con i dati dalla tabella WP_eemail_Table. Si noti che questa funzionalità funzionava nel backend di wp-admin. So che la chiamata ajax in admin viene caricata automaticamente da admin-ajax.php, ma come posso implementare lo stesso nel frontend? C'è qualche errore nel mio codice?

4
Commenti

ajaxurl non è disponibile nel front end. Devi definirlo esplicitamente da solo per il frontend. Controlla questo, puoi ottenere un riferimento per implementare ajax nel front end. link

Nilambar Sharma Nilambar Sharma
19 ago 2014 11:52:49

@Nilambar: Ciao amico..grazie per la tua risposta.. ho già provato il metodo "wp_ajax_nopriv_" come indicato nel link che hai condiviso. Puoi gentilmente guidarmi a trovare l'errore nel modo in cui ho usato per definire esplicitamente ajaxurl?

Zammuuz Zammuuz
19 ago 2014 12:13:15

Devi localizzare lo script usando la funzione wp_localize_script esempio

Nilambar Sharma Nilambar Sharma
19 ago 2014 12:16:11

Solo una nota veloce: ... eemail_id=" . $_POST['id']) è vulnerabile a un SQL injection.

David Hayes David Hayes
6 lug 2018 16:04:52
Tutte le risposte alla domanda 2
0

Devi localizzare lo script utilizzando la funzione wp_localize_script. Nell'area di amministrazione, ajaxurl è già disponibile. Ma nel front-end devi localizzare lo script per definire ajaxurl.

Esempio:

wp_enqueue_script( 'custom-ajax-request', '/percorso/di/settings.js', array( 'jquery' ) );
wp_localize_script( 'custom-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
19 ago 2014 12:20:32
1

In realtà, esiste una soluzione integrata nel core di WordPress per utilizzare Ajax sul front end! WordPress ha una libreria JavaScript poco conosciuta ma molto utile che può essere accessibile tramite l'oggetto JS window.wp, in questo modo:

// 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 fatto:', response);
});

// l'oggetto promise ha anche altri metodi:
// `done()` / `fail()` / `progress()` / `state()` / `abort()`

Il vantaggio è che questo oggetto è mantenuto e utilizzato dal core di WordPress. Quindi puoi essere sicuro che sia aggiornato, funzionante e il modo più robusto per gestire le tue richieste Ajax. Inoltre, nota che non è necessario gestire le dipendenze jQuery...

Se non hai l'oggetto JavaScript window.wp nel front-end, allora devi assicurarti di aggiungere wp-util alle dipendenze dei tuoi script JS, in questo modo:

wp_register_script( 'your-handle', 'https://your-domain.com/path/to/file.js', [ 'wp-util' ] );
6 nov 2016 19:56:17
Commenti

Ci sono documentazioni su wp.ajax? Grazie

ejntaylor ejntaylor
6 apr 2018 13:50:36