CODEWITHSUNDEEP
javascriptphpjqueryajaxwordpress
Sam Skirrow
Sam Skirrow

Reputation: 3697

Wordpress jQuery send value to database

I am trying to send a value to my wordpress database (wp_usermeta table) when a button is clicked.

Here is what I know so far, I know I need to post the value using AJAX, I also know that wordpress has a function for updating the wp_usermeta table, that is:

update_user_meta( $user_id, 'dashboard_onboarding_status', 'myValue' );

The good news is that myValue isn't a variable - I just want to send the word "complete" to the db. It's also an admin side script - I'm not sure if that makes a difference on how to call the ajax url.

Here is what I have codewise:

In my main js file, I have the following AJAX script:

$('.skizzar_onabording_dashboard #next.step5').click(ajaxSubmit);

    function ajaxSubmit(){
        jQuery.ajax({
            type:"POST",
            url: "/wp-admin/admin-ajax.php",
            data: {
                "value" : "completed"
            },
            success:function(data){
                console.log(data);
            }
        });

        return false;
    }

So when a user clicks on .skizzar_onabording_dashboard #next.step5 that should trigger the AJAX function.

Then in my main plugin php file I have the following:

function myFunction(){
    global $wpdb;
    $user_id = get_current_user_id();

    $completed = $_POST['value'];
    update_user_meta( $user_id, 'onboarding_status', $completed );
    die();
}
add_action('wp_ajax_myFunction', 'myFunction');

I think needless to say this doesn't work, but I'm very new to using AJAX and I ca't figure out why. Seems like it should be simple though - essentially I just want to press a button and add "completed" to the key "onboarding_status" in the usermeta table.

Upvotes: 1

Views: 2019

Answers (2)

dingo_d
dingo_d

Reputation: 11680

Almost all you need is located here.

First you'll need to localize your admin-ajax.php, beause calling it like url: "/wp-admin/admin-ajax.php" is not a good practice.

wp_localize_script( 'some_handle', 'ajax_post_to_db', array(
    'ajaxurl'   => admin_url( 'admin-ajax.php'),
));

Then your ajax script to call:

add_action( 'wp_ajax_my_action', 'my_action_callback' );

function my_action_callback() {
    global $wpdb;
    $user_id = get_current_user_id();

    $completed = $_POST['value'];
    update_user_meta( $user_id, 'onboarding_status', $completed );
    die();
}

And finally the ajax in your js file

$('.skizzar_onabording_dashboard #next.step5').on('click', function(){
    ajaxSubmit();
});

function ajaxSubmit(){
    jQuery.ajax({
        type:'POST',
        dataType: 'html',
        url: ajax_post_to_db.ajaxurl,
        data: {
            action: 'my_action_callback'
        },
        success: function(data){
            console.log(data);
        },
        error : function (jqXHR, textStatus, errorThrown) {
            console.log(jqXHR + ' :: ' + textStatus + ' :: ' + errorThrown);
        },
    });

    return false;
}

This should be it.

DISCLAIMER

I'm never 100% sure if it's 

data: {
    action: 'my_action_callback'
},

or 

data: {
    'action': 'my_action_callback'
},

But try it and see which one will give you your function callback. I'm pretty sure it should be the first one.

Also you can check the return of the ajax call in your inspector. Just go to 'Network' tab and select XHR and you should see admin-ajax.php and when you click on it you can see all the relevant data it sends (headers, response etc.).

Upvotes: 3

Moishy
Moishy

Reputation: 3648

add your ajax function as the action

 function ajaxSubmit(){
   var data = {
       'action': 'myFunction',
       'value' : 'completed'
    };
    jQuery.post("/wp-admin/admin-ajax.php", data, function(response) {
        console.log(response);
    });
}

Upvotes: 0

Related Questions