CODEWITHSUNDEEP
javascriptphpjqueryajaxwordpress
bob
bob

Reputation: 227

problems implementing AJAX post

I have a html link, here it is (post php interpretation): 

<a href="javascript:void(0)" onclick="vote_comment(28, 1);" class="vote-arrow">
     <img id="up-arrow-pic-comment-28" src="http://localhost/wordpress/wp-content/themes/backyard-    cures/images/up_arrow_grey.png" alt="vote up" />
</a>

Here is the function it is calling:

function vote_comment(comment_id, direction) {
    $.post('http://localhost/wordpress/wp-content/themes/backyard-cures/backyard_funcs.php',
           {voteType: direction, postId: comment_id, type: 'comment'},
           'updateIcon(vote_count, direction, comment_id)',
           'json');
}

Here is the backyard_funcs.php: 

if (isset($_POST['voteType'], $_POST['postId']) && is_user_logged_in()) {

    if($_POST['type'] == 'comment') {
        if (!get_user_meta(get_current_user_id(),'byc_comment_votes',true)) {
            add_user_meta(get_current_user_id(),'byc_comment_votes',array($_POST['postId'] => $_POST['voteType']),true)
            echo json_encode(array('vote_count' => $_POST['voteType'], 'direction' => $_POST['voteType'], 'comment_id' => $_POST['postId']));
        }
        else {
            echo json_encode(array('vote_count' => $_POST['voteType'], 'direction' => $_POST['voteType'], 'comment_id' => $_POST['postId']));
            //$old_vote=get_user_meta(get_current_user_id(),'byc_comment_votes['.$_POST[postId].']',true);
        }
    }    

} else {
    // bad request/hack attempt
    echo 2;
}

I know that the updateIcon function (which is supposed to be called on post success) is not being called. I have been using the chrome debugger. I know execution enters the vote_comment function and from there execution just dies (not sure why). I am not getting any console errors.

I realize this question may be simplistic or unclear. I apologize in advance, I am new to this (web development). Please let me know if any additional info is needed. Thanks in advance.

Upvotes: 0

Views: 45

Answers (2)

Drew Faubion
Drew Faubion

Reputation: 461

The third parameter should be a function, not a string. Here's an example with minimal changes to your code.

function vote_comment(comment_id, direction) {
    $.post('http://localhost/wordpress/wp-content/themes/backyard-cures/backyard_funcs.php', 
        {voteType: direction, postId: comment_id, type: 'comment'}, 
        function(data) { updateIcon(data.vote_count, data.direction, data.comment_id) },
        'json'
    );
}

Edit: added parsing to callback

Edit 2: Turns out the OP was having trouble using chrome debugger, I sent him this image for guidance: https://i.sstatic.net/Y1uzh.png

After viewing the ajax request response body, he was able to debug the issue on his own which turned out to be in the PHP.

Upvotes: 3

andrew
andrew

Reputation: 9583

jQuery post expects a function is the 3rd parameter.

function vote_comment(comment_id, direction) {
    $.post('http://localhost/wordpress/wp-content/themes/backyard-cures/backyard_funcs.php',
      {
      voteType: direction,
      postId: comment_id,
      type: 'comment'},
      'updateIcon(vote_count, direction, comment_id)' //the problem is here
      ,'json');
}

your code should probably look something like

function vote_comment(comment_id, direction) {
    $.post('http://localhost/wordpress/wp-content/themes/backyard-cures/backyard_funcs.php',
      {
      voteType: direction,
      postId: comment_id,
      type: 'comment'},
       function(data){
              //data is the server response
              updateIcon(data.vote_count, data.direction, data.comment_id);
       },
       'json');
}

Upvotes: 1

Related Questions