CODEWITHSUNDEEP
phpjqueryajaxwordpress
Ino van den Berg
Ino van den Berg

Reputation: 163

Can't display ajax result WordPress

I have the following simple HTML structure

<button class="aardappel" value="im a value">HENK!</button>
<p class="leeg" value="niks"></p>

What's supposed to happen is once I click the button the p tag gets replaced with the result from my php function

I have the following jQuery

    jQuery(".aardappel").on("click", function(){
    jQuery.ajax({
        url : ajax_testing.ajaxurl,
        data: {
            action      : "test_printer",
            buttonvalue : jQuery(this).val()
        },
        type: "POST",
        //dataType: "html",
        succes: function(data){
            console.log(data);
            //jQuery(".leeg").html(data);
        },
        error: function(){
            console.log("foutje");
        },
        completed: function(){
            console.log("doe ik iets?");
        }
    })

and this is the function ajax is calling

add_action( 'wp_ajax_test_printer', 'test_printer' );
add_action( 'wp_ajax_nopriv_test_printer', 'test_printer' );
function test_printer()
{
    $result = <<<HTML

    <p>{$_POST["buttonvalue"]}</p>

HTML;

    echo $result;
    exit();
}

When I press the button I recieve the admin-ajax.php file with the following content enter image description here

But also when I press the button nothing get logged in the console, in other words, error, succes and completed are not triggering and thus I can't display the result on my page. What am I doing wrong?

Upvotes: 0

Views: 29

Answers (1)

Vel
Vel

Reputation: 9267

Try this script. typo error. it is success function not succes;

<script>
    jQuery(".aardappel").on("click", function(){
        jQuery.ajax({
            url : ajax_testing.ajaxurl,
            data: {
                action      : "test_printer",
                buttonvalue : jQuery(this).val()
            },
            type: "POST",
            //dataType: "html",
            success: function(data){
                console.log(data);
                //jQuery(".leeg").html(data);
            },
            error: function(){
                console.log("foutje");
            },
            completed: function(){
                console.log("doe ik iets?");
            }
        });
    });

</script>

Upvotes: 1

Related Questions