What is the best way to avoid the user entering the same record twice. I have the following in my plugin
jQuery(document).ready(function(){
jQuery("#submit").click(function(){
var points = jQuery("#points]").val();
jQuery.ajax({
type: 'POST',
url: MyAjax.ajaxurl,
data: {"action": "updateRedeemPoints", "points":points},
success: function(data){
alert(data);
}
});
});
My Function is just posting to I want to stop it inserting to the db twice but it should produce a friendly looking message box than javascript default or is it possible to use bootstrap notifications with this.
wp_localize_script( 'gogreen', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php')));
function updateRedeemPoints(){
$userId = get_current_user_id();
$mykey = 'player_id';
$single = true;
$playerId = get_user_meta( $userId, $mykey, $single );
$points=$_POST['points'];
global $wpdb;
$wpdb->insert(
'4hSIc_pods_player_ranking',
array(
'points_to_redeem' =>$points,
'player_id'=>$playerId,
'date_to_be_awarded' => current_time('mysql', 1),
'approved'=>'false'
));
$headers = "From: " . $form_data['name'] . " <" . $form_data['email'] . ">n";
$headers .= "Content-Type: text/plain; charset=UTF-8n";
$headers .= "Content-Transfer-Encoding: 8bitn";
wp_mail( 'davidbuckleyni.co.uk', 'test', 'test', $headers );
BTW I am using a bootstrap model if it makes a difference.
echo "<div id='thanks' class='modal fade' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>";
echo "<div class='modal-dialog'>";
echo "<div class='modal-content'>";
echo "<div class='modal-header'>";
echo "<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>Ã</button>";
echo "<h4 class='modal-title'>Redeem Points</h4>";
echo "</div>";
echo "<form class='form-horizontal' class='contact' name='redemmpointsForm' id='redemmpointsForm' >";
echo " <div class='form-group'>";
echo "<h3>You may only redeem the maxium points of : <?php echo $maxpoints;?></h3>";
echo "<input type='hidden' name='playerid' value='<?php echo $playerId;;?>' />";
echo "<input type='number' valuemax='<?php echo $maxpoints;?>' name='points' id='points' class='form-control' placeholder='How many points do you wish to redeem.' />";
echo "<label class='control-label col-md-4' for='Comments'>Comments?</label>";
echo "<input type='text' name='comments' />";
echo " </div>";
echo " <div class='form-group'>";
echo " <div class='col-md-6'>";
echo " <input type='button' class='btn btn-success' name='submit' id='submit' Text='Submit'>";
echo " <a href='#' class='btn' data-dismiss='modal'>Close</a>";
echo " </div>";
echo " </div>";
echo "</form>";
echo " </div>";
echo " </div>";
echo " </div>";
You can disable the submit button before the AJAX request, and show a message to the user when you receive a successful response from the server.
Since you are using bootstrap already, you could use Bootstrap alerts for the friendly success message.
For example, include something like
in your form, hide it by default in css, and show it in the Ajax success callback.
In the Ajax error callback, you should enable the button again, and display an error message to to user (e.g. with alert-error).