Come eseguire AJAX su un evento click di un pulsante?

Question

Come eseguire AJAX su un evento click di un pulsante?

27 lug 2011, 19:57:14

Visualizzazioni: 31.4K

Voti: 7

Aggiornamento: Sono riuscito a far funzionare AJAX, ma non nell'evento click. Ho aggiornato la domanda di conseguenza.

Sto provando del codice che ho trovato nella pagina: 'AJAX nei Plugin'.

Tuttavia non riesco a farlo funzionare e non so da dove iniziare a cercare. Funziona quando rimuovo la funzione click ed eseguo semplicemente il codice al caricamento della pagina.

Ho un file Javascript che appare così:

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

        // dalla versione 2.8 ajaxurl è sempre definito nell'header dell'admin e punta a admin-ajax.php

        jQuery.post(ajaxurl, data, function(response) {
            alert('Ricevuto dal server: ' + response);
        });
    });    
});

e da qualche parte nel mio script PHP che genera il pulsante che dovrebbe eseguire il Javascript (cioè la pagina di amministrazione), e anche il resto della pagina:

add_action('wp_ajax_my_action', 'my_action_callback');
echo 'test2';
function my_action_callback() {
  global $wpdb; // questo è il modo per accedere al database
  $whatever = $_POST['whatever'];
  $whatever += 10;
  echo $whatever;
  die(); // questo è necessario per restituire un risultato corretto
}

Ottengo sia l'Alert ('test') che l'echo 'test2', ma non l'alert di risposta. Non ci sono errori Javascript o altro. Il mio codice viene sicuramente eseguito, dato che posso vedere entrambi i 'test', ma perché AJAX non riceve alcuna risposta? La mia funzione PHP scompare dopo il caricamento della pagina? Forse non posso/non dovrei usare le funzioni AJAX integrate di WordPress?

Inoltre non mostra nemmeno una finestra di alert vuota, semplicemente non succede nulla.

joon

199

sviluppo plugin javascript ajax

Commenti

Due cose: 1) ajaxurl è definito e corretto? 2) Dove vedi che viene eseguito il echo 'test2'?

Ryan Kinal

27 lug 2011 20:15:58

1) sì (ho verificato), 2) prima di qualsiasi contenuto della pagina di amministrazione, proprio in cima.

joon

27 lug 2011 20:26:25

Stai mischiando le variabili jQuery, dovresti usare un wrapper no-conflict.

t31os

27 lug 2011 21:24:46

Mark, grazie, non lo sapevo. Tuttavia questo non ha cambiato molto, i risultati sono gli stessi

joon

28 lug 2011 15:02:59

Risposta aggiunta, per favore commenta riguardo alla domanda che ho sollevato all'interno della mia risposta.

t31os

28 lug 2011 16:30:29

Tutte le risposte alla domanda

Commenti

funziona fino a quando non provo ad aggiungere il JavaScript a un evento di click sul pulsante invece che al caricamento della pagina. Il codice viene eseguito, perché ricevo l'alert, ma probabilmente la funzione Ajax scompare dopo il caricamento della pagina.

joon

28 lug 2011 18:29:05

Prima c'era confusione con le variabili, funziona perfettamente con una funzione di click, guarda il mio codice aggiornato sopra (esempio funzionante).

t31os

28 lug 2011 18:50:08

Sembra che mi sia sfuggito del codice nell'esempio aggiornato, manca add_action( 'in_admin_header', 'my_ajax_button' ); all'inizio del codice, per tua informazione.

t31os

28 lug 2011 19:58:27

Ho risolto seguendo il tuo consiglio, grazie. È strano però che ho ricevuto entrambi i miei messaggi di 'test' e il codice non funzionava, perché non riesco proprio a immaginare cosa sto facendo di diverso al momento.

joon

29 lug 2011 14:16:06

Come detto inizialmente, penso fosse solo un caso di variabili jQuery mescolate, dovresti essere a posto usando l'approccio no-conflict che ho postato sopra (qualsiasi cosa dentro quella funzione document ready può usare tranquillamente $). Felice di aver aiutato.. ;)

t31os

29 lug 2011 15:41:02

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

Inizia da una base di codice funzionante..

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
        };

        // dalla versione 2.8 ajaxurl è sempre definito nell'header di admin e punta a admin-ajax.php
        $.post(ajaxurl, data, function(response) {
            alert('Ricevuto dal server: ' + response);
        });
    });


});
</script>
<?php
}

add_action('wp_ajax_my_action', 'my_action_callback');

function my_action_callback() {
     global $wpdb; // così si ottiene accesso al database

     $whatever = $_POST['whatever'];

     $whatever += 10;

             echo $whatever;

     exit(); // necessario per restituire un risultato corretto & exit è più veloce di die();
}

Questo è il codice (con una piccola modifica) dalla pagina del codex, e va perfettamente bene per me, quindi suggerirei di usarlo come punto di partenza.. se è quello che hai fatto inizialmente, a che punto si è rotto o ha smesso di funzionare?

NOTA: Mark sono io, uso un account secondario quando accedo al sito da un altro PC (che non è il mio).