Attend event form with ajax

Question

I've created a Wordpress website with gigs from a band. All the logged in users can select if they've attended that specific gig. Something like setlist.fm.

So I've created a new table wp_gigs_attending. This table has 3 fields:

1. attending_id
2. post_id
3. user_id

The attending_id is ofcourse the primary key (A.I), the post_id is the id of the gig you've attended and the user_id is your user id, so the id of the current user.

Everything works, but I've added my PHP code in my template and also without ajax. When I click on the form, the page refreshes, which doesn't looks very good.

So I want to submit that form (only a button) with ajax.

On the single-gig.php template:

<?php if ( is_user_logged_in() ) {  ?>
    <div class="attended">
        <form method="post" id="attending" class="attended__form">
            <input type="submit" name="submit" value="attend" />
        </form>
    </div>
<?php } ?>

<script>
    jQuery(function(){
        jQuery('#attending').on('submit', function(e){
            e.preventDefault();

            jQuery.ajax({
                type: 'post',
                url: '<?php bloginfo('template_directory'); ?>/inc/attend.php',
                data: jQuery('#attending').serialize(),
                succes: function(){
                    alert('form was succesfully submitted');
                }
            })
        });
    });
</script>

In my /inc folder I have to code that check if I've already attended that gig or not.

1. If I haven't attended that gig -> click on form button -> insert row in table
2. If I have attended that gig -> click on form button -> delete that row.

This is the code in attended-gig.php:

//get the user id
$current_user = wp_get_current_user();
$current_user_id = $current_user->ID;

//get the post id
$current_post_id = get_the_ID();

//check if already attended
$attending = $wpdb->get_var(
    $wpdb->prepare(
        "SELECT attending_id FROM " . $wpdb->prefix . "gigs_attending
        WHERE user_id = %d AND post_id = %d LIMIT 1",
        $current_user_id, $current_post_id
    )
);

if ( $attending > 0 ) {
    $isAttending = true;
} else {
    $isAttending = false;
}


//actions
if($isAttending == false) {
    //if not attended yet, insert the user_id and post_id in the table
    $success = $wpdb->insert("wp_gigs_attending", array(
        "user_id" => $current_user_id,
        "post_id" => $current_post_id,
    ));

} else {
    //if attended yet, delete the row in the table
    $succes = $wpdb->get_var(
        $wpdb->prepare(
            "DELETE FROM " . $wpdb->prefix . "gigs_attending
            WHERE user_id = %d AND post_id = %d LIMIT 1",
            $current_user_id, $current_post_id
        )
    );
}

I know that the queries are working fine. But I receive a 500 (internal server error) on that file.

The wanted result:

1. A user hasn't attended that specific gig yet -> Clicks on the button -> inserts a new row in the table -> the button has now an extra class, so that it is visible that he attended that gig.
2. A user maybe made a mistake and selected that he attended a specific gig. He clicks on the same button to undo it -> delete that row in the table -> removes the extra class on the button.

When a user goes to the singe-gig.php, it must be visible that he already attended that gig, so the attended class must by there on that button.

Answer 1

First of all. You'll need to follow the ajax best practices in Wordpress. That means, add the right actions for your functions and call them also with the admin ajax url.

So your jQuery ajax should call the admin_url, and you'll need to send along an 'action' data in this example, the name of the action: 'subscribe'; (wp_ajax_subscribe minus the wp_ajax_ ). You can include that with a hidden input field called with name 'action' and value 'subscribe', so you serialize function picks it up from the submit event.

url: '<?php echo admin_url( 'admin-ajax.php' )?>',

add_action( 'wp_ajax_subscribe', 'ja_ajax_subscribe' );
add_action( 'wp_ajax_nopriv_subscribe', 'ja_ajax_subscribe' );

function ja_ajax_subscribe(){

   $result = 'some data';

   wp_send_json_success($result);
}