How do i stop duplicate entrys on a modal dialog

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.

Read More
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>";

Related posts

1 comment

  1. 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

    <div class="alert alert-success alert-dismissible" id="points-success" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <strong>Success!</strong> Great! Your points have been redeemed.
    </div>
    

    in your form, hide it by default in css, and show it in the Ajax success callback.

    jQuery(document).ready(function(){
    
        jQuery("#submit").click(function(){
            var points = jQuery("#points]").val();
            jQuery(this).prop("disabled", true);
            jQuery.ajax({
                type: 'POST',
                url: MyAjax.ajaxurl,
                data: {"action": "updateRedeemPoints", "points":points},
                success: function(data){
                     jQuery("#points-success").show();
                }
            });
       });
    

    In the Ajax error callback, you should enable the button again, and display an error message to to user (e.g. with alert-error).

Comments are closed.