WordPress Button triggered ajax request

1
votes

So I have actually read stackoverflow questions about this, but they are somewhat quite old to work with newest version of wordpress.

My end goal is to submit to database some data from my forms but for now ajax response is not working for me. On custom page load in WP all code is loaded so all functions should work. All of this is inside of PHP file for now that why echo is used to create JS scripts. Here's the important part of my code

echo '<button id="ZapisPrace">Save</button>
<script>
jQuery("#ZapisPrace").click(function($){
    var data={
        action: "addToDB",
        info: "nomz"
    };
    jQuery.post(ajaxurl,data,function(response){
    alert("Response was "+ response);
    });
});
</script>';
add_action('wp_ajax_addToDB','pridajDoDB');
function pridajDoDB(){
    echo '<script>console.log("AAA")</script>';
    wp_die();
}

Using current version of WP so variable ajaxurl is pointing to the

/wordpress/wp-admin/admin-ajax.php

No console.log is happening, response is always 0, even when I remove pridajDoDB function or add_action. It's just not triggering the ajax request correctly. Can somebody let me know why? Also I have not used yet functions like wp_localize_script, wp_register_script or wp_enqueue_script because all of this is in one PHP file that's loaded, and I don't need to import jquery as far as I know its default available in WP. I am just learning how to use WP, PHP AJAX and jQuery, so I have still quite a lot to learn.

PS: I am supposed to use the WP way of using ajax.

2
javascriptphpjqueryajaxwordpress
Is the button inside a form? If so, it will submit the from when you click it, because type=submit is the default. Use type=button, or explicitly prevent the event default action from within the handler function. - CBroe
Tried to use it inside and outside of the form, it does trigger jQuery but the jQuery for some reason does not trigger the addToDB, - Therian

2 Answers

0
votes

Change php code as follows.

add_action('wp_ajax_addToDB','addToDB');
function addToDB(){
    echo "AAA";
    wp_die();
}
0
votes

Ok so I didn't figure out how code above works, however I managed to get it working trough different wp structure I found online:

BTW: I used onClick function here but it works even when replaced with jQuery click event.

add_action('wp_ajax_addToDB','pridajDoDB');

echo '<button onClick='triggerAjax()'>Save</button>?>';

<script>
function triggerAjax(){
    <?php $nonce = wp_create_nonce( 'subbmitData' );?>//used so ajax response can verify from where is the request coming
    jQuery.ajax({
        type: "post",url: "admin-ajax.php",data: { action: 'addToDB', _ajax_nonce: '<?php echo $nonce; ?>' },
        success: function(html){
                console.log(html);//this will console log everything that happens in ajax called php function. Echo works as well.
            }
        });
    }
</script>
<?php

function pridajDoDB(){
    check_ajax_referer( "subbmitData" );//this check from where is the request coming from
    //here database commands works but if you echo or console log something it will be just passed to success function above
    die();
}
?>