web-dev-qa-db-fra.com

L'appel frontal Ajax ne fonctionne pas avec wp_ajax, wp_enqueue_script et wp_localize_script

Je pense que j'ai presque compris l'idée que Ajax est une entreprise Wordpress, complètement ravi de l'apprendre, mais je suis maintenant totalement perplexe.

La première place est le méchant! J'ai ceux-ci dans mon fichier de plugin principal:

wp_enqueue_script( 'function', plugin_dir_url( __FILE__ ) . 'function.js', array( 'jquery', 'json2' ) );
wp_localize_script( 'function', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

add_action('wp_ajax_nopriv_pfxconversion', 'pfxconversion');

Voici ce qui est function.js

$(document).ready(function() {

    $("#convert").click(function () {
                var from = $("#from").val();
                var to = $("#to").val();
                var amount = $("#amount").val();

    //Make data string
     var dataString = "amount=" + amount + "&from=" + from + "&to=" + to;

         $.ajax({
           type: "POST",
           action: pfxconversion,
           url: MyAjax.ajaxurl,
           data: dataString,
           success: function(data){

           $('#result').show();

            //Put received response into result div
            $('#result').html(data);
           }
         });
    });
});

et voici la fonction que je connais qui fonctionne parfaitement en dehors de Wordpress.

function pfxconversion () {
//Get Posted data
$amount = $_POST['amount'];
$from = $_POST['from'];
$to = $_POST['to'];

//make string to be put in API
$string = "1".$from."=?".$to;

//Call Google API
$google_url = "http://www.google.com/ig/calculator?hl=en&q=".$string;

//Get and Store API results into a variable
$result = file_get_contents($google_url);

//Explode result to convert into an array
$result = explode('"', $result);

################################
# Right Hand Side
################################
$converted_amount = explode(' ', $result[3]);
$conversion = $converted_amount[0];
$conversion = $conversion * $amount;
$conversion = round($conversion, 2);

//Get text for converted currency
$rhs_text = ucwords(str_replace($converted_amount[0],"",$result[3]));

//Make right hand side string
$rhs = $conversion.$rhs_text;

################################
# Left Hand Side
################################
$google_lhs = explode(' ', $result[1]);
$from_amount = $google_lhs[0];

//Get text for converted from currency
$from_text = ucwords(str_replace($from_amount,"",$result[1]));

//Make left hand side string
$lhs = $amount." ".$from_text;

################################
# Make the result
################################

echo $lhs." = ".$rhs;exit;
}

Le problème est que je n’obtiens pas le résultat de ma requête function/ajax imprimée dans le fichier #result

Toute aide est grandement appréciée.

Edit Je reçois maintenant une valeur -1 dans #result, après avoir changé mon js de $ en jQuery - Firebug signalait une erreur ($ n'est pas une fonction).

Edit 2 Je suis presque certain d'avoir l'action en ce moment, mais je reçois toujours une sortie dans #result of -1:

jQuery(document).ready(function() {

    jQuery("#convert").click(function () {
                var from = jQuery("#from").val();
                var to = jQuery("#to").val();
                var amount = jQuery("#amount").val();

    //Make data string
     var dataString = "amount=" + amount + "&from=" + from + "&to=" + to;

         jQuery.ajax({
           type: "POST",
           url: MyAjax.ajaxurl,
           data: "action=pfxconversion"&dataString, 
           success: function(data){
           jQuery('#result').show();

            //Put received response into result div
            jQuery('#result').html(data);
           }
         });
    });
});
plugin-developmentajax
1
Danny

Regardez en haut de votre code source HTML généré. Voyez-vous quelque chose comme ceci:

<script type='text/javascript'>
/* <![CDATA[ */
var MyAjax = {"ajaxurl":"http:\/\/localboast\/home\/wp2\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>

wp_localize_script échappe maintenant à tout ce que vous y entrez. Alors que le problème que j'ai.

0
Abdussamad

Dans votre jQuery, essayez peut-être quelque chose comme ceci:

jQuery( document ).ready( function() {

    jQuery( "#convert" ).click( function() {
        var from = jQuery( "#from" ).val();
        var to = jQuery( "#to" ).val();
        var amount = jQuery( "#amount" ).val();

        //Make data string
        var dataString = "amount=" + amount + "&from=" + from + "&to=" + to;

        jQuery.post( MyAjax.ajaxurl, {
            action: 'pfxconversion',
            data: dataString
        }, function( data ) {

            if( data.response === 'success' ) {

                // Success
                jQuery( '#result' ).show();

                //Put received response into result div
                jQuery( '#result' ).html( data.html );

            } else {

                // Failure

            }

        } );
    } );
} );

La fonction PHP à laquelle cet appel AJAX envoie et reçoit des données doit renvoyer un tableau codé JSON et j’ai aussi ajouté une variable "succès" et "échec" appelée response, pourriez aussi bien le renvoyer avec votre appel AJAX pour plus de précision.

Votre tableau codé JSON que vous renvoyez au AJAX devrait ressembler à ceci:

$response = json_encode( array( 'response' => 'success', 'html' => 'some value' ) );
echo $response;
exit; // This is needed to send back properly

Modifier

En vous basant sur votre exemple, vous devriez changer cette ligne:

echo $lhs." = ".$rhs;exit;

à quelque chose comme

echo json_encode( array( 'html' => $lhs." = ".$rhs, 'response' => 'success' ) ); exit;

Et vous pourrez y accéder avec data.html dans votre fonction AJAX.

Éditer 2

Sur une autre note, vous devez mettre vos scripts en file d'attente dans le hook wp_enqueue_scripts comme ci-dessous. Vous voudriez enlever ces codes et les replacer dans votre plugin comme ceci (aussi changé l'emplacement du fichier pour utiliser plugins_url()):

function enqueue_some_scripts() {

    wp_enqueue_script( 'json2' );
    wp_enqueue_script( 'jquery' ); // If not loaded in your theme already, wouldn't hurt here though I don't think!

    wp_enqueue_script( 'function', plugins_url( 'function.js', __FILE__ ), array( 'jquery', 'json2' ) );
    wp_localize_script( 'function', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

}

add_action( 'wp_ajax_nopriv_pfxconversion', 'pfxconversion' );
add_action( 'wp_enqueue_scripts', 'enqueue_some_scripts' );
2
Jared

C'est une réponse incroyablement tardive, mais dans WP vous devez die() à la fin de votre fonction php AJAX. Si vous ne mourez pas, vous obtenez cette réponse 0. Consultez le fichier wp-admin/admin-ajax.php.

1
Tim Jacobs