AJAX - Run PHP function on button click

Question

I have a simple PHP based counter Wordpress function that updates the user meta every time the page is loaded.

What I would like to do is only run this function when a particular button is clicked.

My button markup

<a class="button" id="interaction-count" href="#">Interaction</a>

My current PHP function (Which currently runs, and updates the user meta, on each page load)

function setCvDownloads($postID) {
    $count_key = 'download_count';
    $count = get_user_meta($postID, $count_key, true);
    if($count==''){
        $count = 0;
        delete_user_meta($postID, $count_key);
        add_user_meta($postID, $count_key, '0');
    }else{
        $count++;
        update_user_meta($postID, $count_key, $count);
    }
}

Is is possible to run this when the interaction-count button is clicked instead? I assume some AJAX would be involved? If someone couple point me in the right direction that would be great

Correct - it is possible to run it when the interaction-count button is clicked and also yes, ajax would probably be the best option. — Professor Abronsius
– Professor Abronsius, Commented Sep 1, 2016 at 16:34
And another note you have not used $myValue anywhere in your function. — Naresh Kumar P
– Naresh Kumar P, Commented Sep 1, 2016 at 16:37
@NareshKumar.P Yes sorry, it was an old value, I have edited my question — Dean Elliott
– Dean Elliott, Commented Sep 1, 2016 at 17:04
That means you can choose the ajax method and it will work fine.. Will post up the ajax function asap. Have a check of it.. — Naresh Kumar P
– Naresh Kumar P, Commented Sep 1, 2016 at 17:06

halfer · Accepted Answer · 2016-09-02 07:27:42Z

1

Usage of the Ajax is the best option that will proceed.

<a class="button" id="interaction-count" href="#" onclick="setCvDownloads(<?php echo $post->ID);">Interaction</a>

You need to pass the post ID in that function since you have used it over to the function.

Ajax:

Make sure your file-path is correct in the URL of the Ajax syntax or else t will not work.

function setCvDownloads(a)
{
    $.ajax({
      type: "POST",
      url: "/savedata.php",
      data: "&post_id="+a,
      success:function(html)
      {
         // here you can provide if you need success notifications or as per your wish.
      }
    });
}

savedata.php

<?php
include('../../wp-config.php'); // Ensure that your wp-config file is connected here correctly.
$post_ID = $_POST['post_id']; // Getting the posted POST ID over ajax here.
$count_key = 'download_count';
    $count = get_user_meta($post_ID, $count_key, true);
    if($count==''){
        $count = 0;
        delete_user_meta($post_ID, $count_key);
        add_user_meta($post_ID, $count_key, '0');
    }else{
        $count++;
        update_user_meta($post_ID, $count_key, $count);
    }
?>

edited Sep 2, 2016 at 7:27

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Sep 1, 2016 at 16:42

Naresh Kumar P

4,2802 gold badges18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dean Elliott Over a year ago

The setCvDownloads function that I currently have is a PHP function so I assume it wont work in JS?

Naresh Kumar P Over a year ago

@DeanElliott. I have added the Ajax code over to my answer by editing it. Check and let me know. :)

halfer · Accepted Answer · 2016-09-02 15:24:06Z

1

Using jQuery. This jQuery code should do it, but you need a PHP file to capture the request.

$("#interaction-count").on("click", function(){
    $.ajax({
      type: "POST",
      url: "/somephpfile.php",
      data: {},
      success: success,
      dataType: dataType
    });
});

edited Sep 2, 2016 at 15:24

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Sep 1, 2016 at 16:48

SantiagoM

735 bronze badges

Comments

Davide Visentin · Accepted Answer · 2016-09-01 16:49:51Z

0

You can do also synchronously, but the best way is surely usin ajax.

So the code, in simple js (without jquery), would be:

<input type="button" ... onclick="CallPhpFunction()" />
....
<script>
function CallPhpFunction() {
    var xhttp=new XMLHttpRequest();
    xhttp.open('POST', 'phpscript.php', true);
    xhttp.send('data=somedata&otherData=someotherdata');
}
</script>

In the example I've also show how you can send data to the php script passing it to the send method. That can be used in the php script using $_POST.

edited Sep 1, 2016 at 16:49

answered Sep 1, 2016 at 16:42

Davide Visentin

7516 silver badges21 bronze badges

Comments

Jaytesh Barange · Accepted Answer · 2016-09-01 19:51:42Z

for doing this you need to add following code inside wordpress loop

<a class="button" id="interaction-count" href="#"
 onclick="increaseMyCount('<?php the_ID();?>')">Interaction</a>

<script type="text/javascript">
function increaseMyCount(numb_data)
{
jQuery.ajax({
method: "POST",
url: "<?php bloginfo('url');?>/wp-admin/admin-ajax.php",
data: { postid: numb_data, action: 'setcvdownloads' }
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
}
</script>

and in functions.php of theme file you need to write following code

<?php
function setCvDownloads() {
    $count_key = 'download_count';
    $postID=$_POST['postid'];
    $count = get_user_meta($postID, $count_key, true);
    if($count==''){
    $count = 0;
    //delete_user_meta($postID, $count_key);
    add_user_meta($postID, $count_key, '0');
    }else{
        $count++;
        update_user_meta($postID, $count_key, $count);
    }
    echo "Saved";
    wp_die();
}
add_action( 'wp_ajax_setcvdownloads', 'setCvDownloads' );
add_action( 'wp_ajax_nopriv_setcvdownloads', 'setCvDownloads' );
?>

Collectives™ on Stack Overflow

AJAX - Run PHP function on button click

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related