Question

我有关于使用ajax发布后重复数据的问题。我有没有id的按钮只有数据属性。我使用dataTable库。点击后，我用表单调用一个模态。表单中有两个字段：输入文本和输入隐藏。在点击事件中，我在隐藏控件中填充值。首次提交后一切都好。但是在第二次点击和第二次提交后使用相同的模态，我在控制台中有双重数据，如下所示：

Object {isSuccess: true, carId: 13550, message: "Post success"}
Object {isSuccess: true, carId: 13550, message: "Post success"}

我认为这个问题对某些人来说非常简单，但我不能单独解决它。此代码来自HTML DOM：

<table id="carsInventory">
<tr>
    <td>
        <button type="button" data-toggle="modal" data-target="#inv-bid-modal" data-car-id="13551" data-car-brand="MAZDA" data-car-model="Mazda6" class="btn btn-large btn-bids">Bid</button>
    <td>
</tr>
<tr>
    <td>
        <button type="button" data-toggle="modal" data-target="#inv-bid-modal" data-car-id="13550" data-car-brand="CADILLAC" data-car-model="CTS" class="btn btn-large btn-bids">Bid</button>
    <td>
</tr>
</table>


<div class="modal fade" id="inv-bid-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-toggle="bidModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <form id="inv-bid-form" method="post">
                <div class="modal-body">
                    <p class="intro-bid">
                        Your Maximum Bid:
                    </p>
                    <div class="input-group">
                        <span class="input-group-addon">$ </span>
                        <input id="userBid" type="text" value="" class="form-control" name="userBid" required pattern="\d+(\.\d{2})?">
                        <span class="input-group-addon">.00</span>
                    </div>
                    <i class="intro-bid">
                        ($100 USD Bid Increments)
                    </i>
                    <input id="invCarId" type="hidden" value="" name="invCarId" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    <input type="submit" class="btn btn-bid" value="Bid Now">
                </div>
            </form>
        </div>
    </div>
</div>

Javascript（底部加载）

$(document.body).on('click', "[data-target=#inv-bid-modal]", function(e)
   {

       var that     = $(this)
       var carBrand = that.attr('data-car-brand'),
           carModel = that.attr('data-car-model'),
           title    = $("#inv-bid-modal .modal-title"),
           car      = that.attr('data-car-id');

       submitBidForm( e, car );

       title.html('');
       title.append(carBrand + ' ' + carModel);

   });

   function submitBidForm(data, id)
   {
       var bidForm      = $("#inv-bid-form"),
           bidModal     = $("#inv-bid-modal"),
           objectBtn    = $(data.target),
           carId        = id,
           bidField     = $('#userBid'),
           carIdField   = $('#invCarId');;

       carIdField.val(carId);

       bidForm.submit(function(event)
       {
           event && event.preventDefault();
           var that     = $(this),
               bid      = bidField.val();

           if( bid < 100 )
           {
               setBsMessages('warning', 'Incorect increment!');
               bidField.val('');
               carIdField.val('');

           }else{

               var request =  $.ajax({
                   url          : '/car/rest/setBid/',
                   method       : 'POST',
                   async        : false,
                   data         : that.serialize(),
                   success      : function(result,textStatus, jqXHR)
                   {

                       if(result.isSuccess)
                       {
                           bidModal.modal('hide').fadeOut('fast');
                           objectBtn.attr('disabled',true);
                           bidField.val('');
                           carIdField.val('');
                       }else{
                           bidModal.modal('hide').fadeOut('fast');
                           bidField.val('');
                           carIdField.val('');
                           setBsMessages('error', 'Invalid bid!');
                       }
                   },
                   error: function (result, textStatus, errorThrown) {
                       bidModal.modal('hide').fadeOut('fast');
                       bidField.val('');
                       carIdField.val('');
                       setBsMessages('error', 'Error! ' + result);

                   }
               });
               return false;
           }
       });
   }

   function setBsMessages(type, message)
   {
       var messages = $("#inv-bid-messages");

       messages.append('<div id="bs-alert" class="alert alert-' + type + ' fade in">' + message+ '</div>');

       $('#bs-alert').delay(2000).fadeOut("slow", function () { messages.remove(); });
   }

PHP

public function setBid() {
    header('Content-type: text/json');
    header('Content-type: application/json');
    $result = false;

    if ( $_POST['invCarId'] ) {

        $this->load->model('bid');
        $bidModel = new bid();

        $carId = (int) $_POST['invCarId'];
        $bidValue = (int) $_POST['userBid'];

        if ( $bidModel->isExistBid($carId))
        {
            $data = [
                'isSuccess' => 'exist',
                'carId'     => $carId,
                'message'   => 'Bid exist'
            ];
            echo json_decode($data);
            exit;
        }

        if ( $bidModel->addBid( $carId, $this->current_user->id, $bidValue ) ) {

            $result = true;
        } else {
            $result = false;
        }

        $data = [
            'isSuccess' => (bool) $result,
            'carId'     => $carId,
            'message'   => 'Post success'
        ];

        echo json_encode($data);
        exit;

    } else {
        echo json_decode($result);
        exit;
    }
}

提前致谢。

Answer 1

我找到的解决方案是：

function submitBidForm(data, id)
   {
       var bidForm      = $("#inv-bid-form"),
           bidModal     = $("#inv-bid-modal"),
           objectBtn    = $(data.target),
           carId        = id,
           bidField     = $('#userBid'),
           carIdField   = $('#invCarId');;

       carIdField.val(carId);

       var status = true; // Set default status

       bidForm.submit(function(event)
       {
           event && event.preventDefault();
           var that     = $(this),
               bid      = bidField.val();

           if( bid == undefined || parseInt(bid) < 100 )
           {
               setBsMessages('warning', 'Incorect increment!');
               bidField.val('');
               carIdField.val('');

               return false;
           }
           if(status) {

           status = false; // Set status false to preventing second post 
               var request =  $.ajax({
                   url          : '/car/rest/setBid/',
                   method       : 'POST',
                   dataType     : 'json',
                   cache        : 'false',
                   data         : that.serialize(),
                   success      : function(result,textStatus, jqXHR)
                   {
                       if(result.isSuccess)
                       {
                           bidModal.modal('hide').fadeOut('fast');
                           objectBtn.attr('disabled',true);
                           bidField.val('');
                           carIdField.val('');
                           bidForm.reset();
                           var status = true; // Status true if post pass
                           return false; 

                       }else{
                           bidModal.modal('hide').fadeOut('fast');
                           bidField.val('');
                           carIdField.val('');
                           setBsMessages('error', 'Invalid bid!');
                       }
                   },
                   error: function (result, textStatus, errorThrown) {
                       bidModal.modal('hide').fadeOut('fast');
                       bidField.val('');
                       carIdField.val('');
                       setBsMessages('error', 'Error! ' + result);

                   }
               });
               return false;
            }
       });
   }

我知道解决方案并不是最好的，但它确实有效。我希望有人给出更明智的答案。

点击事件的重复数据，并使用ajax提交表单

1 个答案: