location.reload not working as expected

I have created a plugin that allows members to register for an event and cancel their registration if they wish. Registrants are stored in an SQL table and the table is displayed on the event page. After submitting their registration, I use location.reload to refresh the event page table. This works fine. However, when I use the exact same process after clicking the ‘Cancel’ button, location.reload appears to be reloading the page information as it was before the Cancel button was clicked (i.e. the cancellation was not processed through AJAX). However, when I add an alert after the AJAX call and before the location.reload, all works properly. Can anyone explain why this happens?

	$jq(".cancel_btn").click(function(){
		// Determine which cancel button was clicked
		var btnid = event.srcElement.id;
		var strlng = btnid.length;
		var rowid = btnid.substring(11,strlng);
		// alert("Cancel Row_ID " + rowid);
		
			$jq.ajax({
				url : ajax_rsvp.ajax_url,
				type : 'post',
				data : {
					action: 'rsvp_callback',
					registrant_type : 'cancel',
					delete_row : rowid
				},
				success:function(data) {
					// This outputs the result of the ajax request
					console.log(data);
					// Return response to client side
					$jq('#rsvp_response').html( data );

					return false;
				},
				error: function(errorThrown){
					console.log(errorThrown);
				}
			}); // End of AJAX function
			alert("Sorry you will be unable to attend");
			location.reload(true);
			
	}); // End of Cancel Button function