How to disable link after first click and allow user to vote only if logged in

2 Views

i am working on a plugin in wordpress to vote up a post or vote down using ajax.
Everything is working fine but the problem is am not able to disable the onclick eventhandler after first click so whenever someone voting a post , he can add vote multiple times. I want to ignore that so i should be able to vote only once. If i click on vote up then the voteup anchor tag should be disable and votedown anchor tag should be enable. At the same time if i click on the votedown anchor tag then votedown should be disable and voteup should be enable. Also i want to enable the voting feature only if the user is logged in the wordrpess.

I have a function to show a popup if the user is not logged in.
i.e login_open();

Read More

If user is not logged in and try to vote up then this function should execute login_open();

Otherwise user should be able to vote or downvote only once ..

Here is my code //

php 

//Defining Base Paths
define('VOTEUPURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) );
define('VOTEUPPATH', WP_PLUGIN_DIR."/".dirname( plugin_basename( __FILE__ ) ) );

//Enqueue Script for the Admin Ajax and Cutom Js File
function voteme_enqueuescripts()
{
    wp_enqueue_script('voteme', VOTEUPURL.'/js/voteup.js', array('jquery'));
    wp_localize_script( 'voteme', 'votemeajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
    wp_localize_script( 'votedown', 'votedownajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}

add_action('wp_enqueue_scripts', voteme_enqueuescripts);


//Adding Vote up links to all the posts.
function voteme_getvotelink(){
$votemelink = "";

$post_ID = get_the_ID();
$votemecount = get_post_meta($post_ID, '_votemecount', true) != '' ? get_post_meta($post_ID, '_votemecount', true) : '0';

$link = $votemecount.' <a href="javascript:void(0);" onclick="votemeaddvote('.$post_ID.');">'.'Vote Up'.'</a>';

$link .=' <a href="javascript:void(0);" onclick="votemedownvote('.$post_ID.');">'.'Vote Down'.'</a>'; 

$votemelink = '<div id="voteme-'.$post_ID.'">';
$votemelink .= '<span>'.$link.'</span>';
$votemelink .= '</div>';

return $votemelink;
}

//Function to get the count
function get_current_vote_count(){
    $voteup_count = "";
    $post_ID = get_the_ID();
    $votemecount = get_post_meta($post_ID, '_votemecount', true) != '' ? get_post_meta($post_ID, '_votemecount', true) : '0';
    $votelink = '<span class="vote_count">'. $votemecount .'</span>';
    return $votelink;
    die($votelink);
}


//Add Vote Function
function voteme_addvote()
{
    $results = '';
    global $wpdb;
    $post_ID = $_POST['postid'];
    $votemecount = get_post_meta($post_ID, '_votemecount', true) != '' ? get_post_meta($post_ID, '_votemecount', true) : '0';
    $votemecountNew = $votemecount + 1;
    update_post_meta($post_ID, '_votemecount', $votemecountNew);
    $results.=$votemecountNew;
    // Return the String
    die($results);
}

// creating Ajax call of ADD VOTE for WordPress
add_action( 'wp_ajax_nopriv_voteme_addvote', 'voteme_addvote' );
add_action( 'wp_ajax_voteme_addvote', 'voteme_addvote' );


//Add Vote Function
function voteme_downvote()
{
    $results = '';
    global $wpdb;
    $post_ID = $_POST['postid'];
    $votemecount = get_post_meta($post_ID, '_votemecount', true) != '' ? get_post_meta($post_ID, '_votemecount', true) : '0';
    $votemecountNew = $votemecount - 1;
    update_post_meta($post_ID, '_votemecount', $votemecountNew);
    $results.= $votemecountNew;
    // Return the String
    die($results);
}

// creating Ajax call of DOWN VOTE for WordPress
add_action( 'wp_ajax_nopriv_voteme_downvote', 'voteme_downvote' );
add_action( 'wp_ajax_voteme_downvote', 'voteme_downvote' );

//Javascript and Ajax Calls 

function votemeaddvote(postId)
{
    jQuery.ajax({
    type: 'POST',
    url: votemeajax.ajaxurl,
    data: {
    action: 'voteme_addvote',
    postid: postId
},

success:function(data, textStatus, XMLHttpRequest){

    var vote_count_id = jQuery('.vote_count');
    jQuery(vote_count_id).html('');
    jQuery('.vote_count').append(data);
    var thisr = jQuery('.voter button:first-child')
    thisr.disable = true;
    // add any additional logic here
    }, 
    error: function(MLHttpRequest, textStatus, errorThrown){
        alert(errorThrown);
        }
    });
}

function votemedownvote(postId)
{
    jQuery.ajax({
    type: 'POST',
    url: votemeajax.ajaxurl,
    data: {
    action: 'voteme_downvote',
    postid: postId
},

success:function(data, textStatus, XMLHttpRequest){

    var vote_count_id = jQuery('.vote_count');
    jQuery(vote_count_id).html('');
    jQuery('.vote_count').append(data);
    },
    error: function(MLHttpRequest, textStatus, errorThrown){
        alert(errorThrown);
        }
    });
}

//HTML For Adding Votes 

<div class="voter">
 <a  onclick="votemeaddvote(<?php echo $post_ID; ?>);">VoteUp</a>
 <a  onclick="votemedownvote(<?php echo $post_ID; ?>)">Vote Down</a>
</div>
Post Views: 2

Related posts

Leave a Reply

2 comments

  1. Simplely using .one() instead of .on()

    Try something like this,

    $(".voter a:last-child").one( "click", function() {
   console.log("click");
   var data = $(this).data();
   console.log(data);
   votemedownvote(data.id);
});

  2. So what you could do is change some of your code

    Change the html to this:

    <div class="voter">
  <a data-id="<?php echo $post_ID; ?>">VoteUp</a>
  <a data-id="<?php echo $post_ID; ?>">Vote Down</a>
</div>

    And change your javascript like this since you are using jquery:

    $(".voter a").on( "click", function() {
   console.log("click");
   var data = $(this).data();
   console.log(data);
   votemeupvote(data.id);
   $(this).off();
});

    So var data get has the post id in json form to be sent.
    Using “this” you are able to target this specific element and turn its on click off. I removed your on embedded click events because usually you want to bootstrap those triggers so you can turn them off, which was your problem.
    You can do this by using jquery .on and .off methods.

    Edit: Forgot to add your function call. I added it. I will also add how your votedown can work:

    $(".voter a:last-child").on( "click", function() {
   console.log("click");
   var data = $(this).data();
   console.log(data);
   votemedownvote(data.id);
   $(this).off();
});

    Edit 2: Oh and I forgot to mention that this is only good for the front end. So in the backend you need someway to track if the person voted or not, maybe a table with user id, post id and voted true or false. That way you can track it when the ajax call comes and have php update the database.

    Fiddle