Apel AJAX în WordPress front-end

19 aug. 2014, 10:48:08
Vizualizări: 22.9K
Voturi: 1

În plugin-ul meu folosesc două apeluri AJAX în backend care funcționează bine. Pentru a oferi aceeași funcționalitate în frontend, am încărcat o copie a acestor două funcții cu alte nume, iar codul meu este:

În fișierul principal al plugin-ului:

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']);
    //afișează query-ul pentru debug
    //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');

și în settings.js:

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

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

     jQuery.post(ajaxurl, data, function(response) {
        //alert('Am primit de la 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]);
          });
       });
   }

iar pagina plugin-ului care declanșează acest showEntryfront() este:

<select name="eemail_subject_drop" id="eemail_subject_drop" onchange="showEntryfront(this.value)">
                <option value="">Selectează subiectul email-ului</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>

A doua funcție face același lucru, doar că tabela din baza de date este diferită.

Consola Firebug îmi arată încă:

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

iar textarea nu se completează cu datele din tabela WP_eemail_Table. Vă rog să notați că această funcționalitate a mers în backend-ul wp-admin. Știu că apelul AJAX în admin se va încărca automat prin admin-ajax.php, dar cum pot implementa același lucru în frontend? Este vreo greșeală în codul meu?

4
Comentarii

ajaxurl nu este disponibil în frontend. Trebuie să-l definiți explicit pentru frontend. Verificați acest lucru, puteți obține o referință pentru implementarea ajax în frontend. link

Nilambar Sharma Nilambar Sharma
19 aug. 2014 11:52:49

@Nilambar: Salut prietene..mulțumesc pentru răspuns.. am încercat deja metoda "wp_ajax_nopriv_" așa cum este descris în linkul pe care l-ai împărtășit. Poți să mă ghidezi să identific eroarea în modul în care am definit explicit ajaxurl?

Zammuuz Zammuuz
19 aug. 2014 12:13:15

Trebuie să localizezi scriptul folosind funcția wp_localize_script exemplu

Nilambar Sharma Nilambar Sharma
19 aug. 2014 12:16:11

Doar o scurtă observație: ... eemail_id=" . $_POST['id']) este vulnerabil la injecție SQL.

David Hayes David Hayes
6 iul. 2018 16:04:52
Toate răspunsurile la întrebare 2
0

Trebuie să localizați scriptul folosind funcția wp_localize_script. În partea de administrare, ajaxurl este deja disponibil. Dar în partea de front-end trebuie să localizați scriptul pentru a defini ajaxurl.

Exemplu:

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' ) ) );
19 aug. 2014 12:20:32
1

Există de fapt o soluție integrată în nucleul WordPress pentru a folosi Ajax pe front-end! WordPress are o bibliotecă JavaScript puțin cunoscută, dar foarte utilă, care poate fi accesată prin obiectul JS window.wp, astfel:

// În JS:

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

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

// obiectul promise are și alte metode:
// `done()` / `fail()` / `progress()` / `state()` / `abort()`

Avantajul este că acest obiect este întreținut și folosit de nucleul WordPress. Astfel, poți avea încredere că este la zi, funcțional și cel mai robust mod de a gestiona Ajax. De asemenea, reține că nu trebuie să te ocupi de chestiuni legate de jQuery...

Dacă nu ai obiectul JavaScript window.wp pe front-end, atunci trebuie să te asiguri că adaugi wp-util la dependințele scripturilor tale JS, astfel:

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

Există documentație pentru wp.ajax? Mulțumesc

ejntaylor ejntaylor
6 apr. 2018 13:50:36