Inserting AJAX/javascript values into custom WordPress table

Question

This is a voting functionality that I have on my site. When the user clicks a button, their vote will be inserted into a custom table in WordPress. The AJAX returns the success message OK, but nothing is being inserted into the table. Where am I making a mistake? Here is my code(the AJAX script and PHP code are all on one page)

    <script type="text/javascript" >
        jQuery(document).ready(function(){
                var counter;
                var id;
           jQuery('.fa-plus').one('click', function(){
                counter = 0;
                id = jQuery(this).closest('div').prop("id");
                alert(id);
                //window.open("bride-profile.php");
                counter = counter+1;
                jQuery('#votes-count').parent().html(counter);

        });



        jQuery.ajax({
            url    :"http://localhost/-wiz/wordpress/",
            method :"POST",
            data   :{
                        'action' : 'add_votes',
                        'counter': counter,
                        'id'     : id,
            },
            success:function(data){
                alert(data);            
            }
        }).error(function(){
            alert("ERROR!");
    });   
});
    </script> <?php
}//end of function my_action_javascript
function add_votes(){
        $id = $_POST['id'];
        $votes= $_POST['counter'];
        $wpdb->insert(
            'fwwp_votes',
            array(
                'bride_id' => $id,
                'votes'    => $votes
            )
        );
    }
add_action( 'wp_ajax_no_priv_add_votes', 'add_votes' );
add_action( 'wp_ajax_add_votes', 'add_votes' );

and a bit of my mark-up:

foreach($applications as $application){
            $id = $application->id;
            echo       
            '<div class="col-md-3" id="'.$id.'">',
                    '<span class="pull-right votes" id="votes-count"><strong>0</strong></span>',
                    '<div class="disp" id="disp"><i class="fa fa-heart fa-fw"></i> Votes</div>',
                    '<i class="fa fa-plus fa-fw"></i> Vote for '.$application ->user_name.',
            '</div>';
            }

you have to echo 'success or anything';die(); at the end of the ajx php function@PamelaSillah — Parth Mahida
– Parth Mahida, Commented Nov 10, 2016 at 13:30

Pamela Sillah · Accepted Answer · 2016-11-14 07:11:08Z

ok, so it turns out all I had to do was insert my jQuery.ajax block into the onclick function, like so:

jQuery(document).ready(function(){
                jQuery('.site-footer').hide();
                var counter;
                var id;
        jQuery('.fa-plus').one('click', function(){
                counter = 70;
                id      = jQuery(this).closest('div').prop("id");
                alert(id);
                counter = counter+1;
                jQuery('#votes-count').parent().html(counter);


                jQuery.ajax({
            url    : "http://localhost/-wiz/wordpress/vote",
            type   : "POST",
            data   : {
                        'action' : 'add_votes',
                        'counter': counter,
                        'id'     : id
            },
            success:function(response){
                console.log(response);

            }
        }).error(function(){
            alert("ERROR!");
    });

Collectives™ on Stack Overflow

Inserting AJAX/javascript values into custom WordPress table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related