Cum pot executa AJAX la click-ul unui buton?

Question

Cum pot executa AJAX la click-ul unui buton?

27 iul. 2011, 19:57:14

Vizualizări: 31.4K

Voturi: 7

Update: Am reușit să fac AJAX să funcționeze, dar nu în evenimentul de click. Am actualizat întrebarea pentru a reflecta acest lucru.

Încerc să folosesc niște cod pe care l-am găsit pe pagina: 'AJAX în Plugin-uri'.

Cu toate acestea, nu reușesc să-l fac să funcționeze și nu știu de unde să încep să caut. Funcționează când elimin funcția de click și rulez codul doar la încărcarea paginii.

Am un fișier Javascript care arată astfel:

jQuery(document).ready(function(){
    jQuery("#createremotesafe").click(function(){
        alert ('test');
        var data = {
            action: 'my_action',
            whatever: 1234
        };

        // începând cu 2.8 ajaxurl este întotdeauna definit în header-ul admin și indică către admin-ajax.php

        jQuery.post(ajaxurl, data, function(response) {
            alert('Am primit următorul răspuns de la server: ' + response);
        });
    });    
});

și undeva în scriptul meu PHP care generează butonul ce ar trebui să execute Javascript-ul (adică pagina de admin), precum și restul paginii:

add_action('wp_ajax_my_action', 'my_action_callback');
echo 'test2';
function my_action_callback() {
    global $wpdb; // așa obții acces la baza de date
    $whatever = $_POST['whatever'];
    $whatever += 10;
    echo $whatever;
    die(); // acest lucru este necesar pentru a returna un rezultat corect
}

Primesc atât Alert ('test') cât și echo 'test2', dar nu și alerta de răspuns. Nu există erori Javascript sau altceva. Codul meu rulează cu siguranță, deoarece pot vedea ambele 'test'-uri, dar de ce AJAX nu primește niciun răspuns? Funcția mea PHP dispare după încărcarea paginii? Poate că nu pot/nu ar trebui să folosesc funcțiile AJAX încorporate în WordPress?

De asemenea, nu afișează nici măcar o casetă de alertă goală, pur și simplu nu se întâmplă nimic.

joon

199

dezvoltare de plugin javascript ajax

Comentarii

Două lucruri: 1) Este ajaxurl definit și corect? 2) Unde vezi că se întâmplă echo 'test2'?

Ryan Kinal

27 iul. 2011 20:15:58

1) da (am verificat), 2) înaintea oricărui conținut al paginii de administrare, chiar în partea de sus.

joon

27 iul. 2011 20:26:25

Amesteci variabile jQuery, ar trebui să folosești un wrapper no-conflict.

t31os

27 iul. 2011 21:24:46

Mark, mulțumesc, nu știam despre asta. Totuși, asta nu a schimbat prea mult, rezultatele sunt la fel

joon

28 iul. 2011 15:02:59

Răspuns adăugat, te rog comentează în legătură cu întrebarea pe care am ridicat-o în răspunsul meu.

t31os

28 iul. 2011 16:30:29

Toate răspunsurile la întrebare

Comentarii

Funcționează până când încerc să adaug JavaScript la un eveniment de clic pe buton în loc de încărcarea paginii. Codul este executat, pentru că primesc alerta, dar funcția Ajax probabil dispare după încărcarea paginii.

joon

28 iul. 2011 18:29:05

Ați amestecat variabilele înainte, funcționează perfect cu o funcție de clic, vedeți codul meu actualizat mai sus (exemplu funcțional).

t31os

28 iul. 2011 18:50:08

Se pare că am omis ceva cod în exemplul actualizat, lipsește add_action( 'in_admin_header', 'my_ajax_button' ); la începutul codului, pentru informare.

t31os

28 iul. 2011 19:58:27

Am reușit să funcționeze urmând sfatul tău, mulțumesc. E ciudat totuși că am primit ambele mesaje 'test' și codul nu a funcționat, pentru că nu-mi pot imagina ce fac diferit acum.

joon

29 iul. 2011 14:16:06

Cum am spus inițial, cred că a fost doar o problemă de amestecare a variabilelor jQuery, ar trebui să fii în regulă folosind abordarea no-conflict pe care am postat-o mai sus (orice se află în interiorul acelei funcții document ready poate folosi în siguranță $). Mă bucur că am putut ajuta.. ;)

t31os

29 iul. 2011 15:41:02

t31os 18.7K · Accepted Answer · 2011-07-28T16:11:50Z

Începe de la o bază de cod funcțională...

add_action('in_admin_header', 'my_ajax_button');

function my_ajax_button() {
    echo '<a href="#ajaxthing" class="myajax">Test</a>';
}

add_action('admin_head', 'my_action_javascript');

function my_action_javascript() {
?>
<script type="text/javascript" >
jQuery(document).ready(function($) {

    $('.myajax').click(function(){
        var data = {
            action: 'my_action',
            whatever: 1234
        };

        // începând cu versiunea 2.8, ajaxurl este întotdeauna definit în antetul admin-ului și trimite către admin-ajax.php
        $.post(ajaxurl, data, function(response) {
            alert('Am primit acest răspuns de la server: ' + response);
        });
    });


});
</script>
<?php
}

add_action('wp_ajax_my_action', 'my_action_callback');

function my_action_callback() {
     global $wpdb; // asta este modul în care obții acces la baza de date

     $whatever = $_POST['whatever'];

     $whatever += 10;

             echo $whatever;

     exit(); // acest lucru este necesar pentru a returna un rezultat corect & exit este mai rapid decât die();
}

Acesta este codul (cu o ajustare minoră) de pe pagina codex și este perfect în regulă pentru mine, așa că aș sugera să îl folosești ca punct de plecare... dacă asta ai făcut inițial, în ce moment s-a defectat sau a încetat să funcționeze?

NOTĂ: Mark sunt eu, folosesc un cont secundar când accesez site-ul de pe un alt PC (care nu este al meu).