Bootstrap 更新 Ajax 记录时成功发出警报

我想使用引导警报来显示更新现有记录的成功消息。这就是我所拥有的：

索引.php

 <script type="text/javascript">
  $(document).ready(function(){
      $("#submit_button").click( function() {
          $.post( $("#updateunit").attr("action"), 
            $("#updateunit :input").serializeArray(),function(info){ 
              $("#result").html(info); 
          });
      });
      $("#updateunit").submit( function() {
          return false;   
      });
  });
  function clearInput() {
    $("#updateunit :input").each( function() {
      $(this).val('');
    });
}  

<div class="control-group">
                <label class="control-label" for="transaction">Notes</label>
                <div class="controls">
                  <textarea rows="3" columns="10" name="notes"><?php echo $notes; ?></textarea>
                </div>
              </div>
              <div class="control-group">
                <div class="controls">
                <button class="btn btn-custom" type="submit" id="submit_button">Update</button>
                <a href="#" class="back"><button class="btn btn-custom" onclick="goBack()">Back</button></a>
                </div>
              </div>

            </form>
            <div id="result" class="alert alert-success"></div>
          </div>

edit.php

  <?php
include('../../db.php');
if( isset($_POST['reservation_code']) || isset($_POST['transaction_code'])   ){
      $transaction_id = $_POST['transaction_id'];
      $reservation_code = $_POST['reservation_code'];
      $transaction_code = $_POST['transaction_code'];
      $notes = $_POST['notes'];

      $update = $conn->prepare("UPDATE tblunitreservation 
            SET reservation_code = :reservation_code,
            transaction_code = :transaction_code,
            notes = :notes
            WHERE transaction_id = :transaction_id");
      $update->execute(array(':reservation_code' => $reservation_code, 
                        ':transaction_code' => $transaction_code,
                        ':notes' => $notes,
                        ':transaction_id' => $transaction_id));
        echo 'Successfully updated record!';
} else {
        echo 'Required field/s is missing';
}
?>

我希望警报消息位于屏幕中央，但发生的情况是，当我不更新记录时，警报背景可见，然后我仅在消息成功更新出现时更新记录。

如果我没猜错的话，你需要做两件事：

1. 将警报消息居中。
2. 仅在单击按钮后才显示警报框。

为此，您可以省略添加alert and alert-successHTML 本身中的类。将 HTML 更改为（以及文本对齐）：

<center><div id="result"></div></center>

相反，一旦放置了其中的文本，我们将添加该类，例如：

$("#submit_button").click( function() {
          $.post( $("#updateunit").attr("action"), 
            $("#updateunit :input").serializeArray(),function(info){ 
              $("#result").html(info); 
              //adding class
              $("#result").addClass("alert alert-success");
          });
      });

Fiddle

如果您希望框也居中，请使用引导类：

 $("#result").addClass("alert alert-success offset4 span4");

基于网格系统在 Bootstrap 2.3 中，您可以有 12 列，因此为了使框居中，我们将从左侧留下 4 列，这就是offset4并使盒子的长度为 4 列，这就是span4 does.

Fiddle 2

额外的：

如果我想在超过5时自动关闭警报消息怎么办 秒？并在警报消息中显示关闭按钮

为了获得更流畅的解决方案，您可以执行以下操作：

 //adding a 'x' button if the user wants to close manually
 $("#result").html('<div class="alert alert-success"><button type="button" class="close">×</button>'+info+'</div>');

 //timing the alert box to close after 5 seconds
 window.setTimeout(function () {
     $(".alert").fadeTo(500, 0).slideUp(500, function () {
         $(this).remove();
     });
 }, 5000);

 //Adding a click event to the 'x' button to close immediately
 $('.alert .close').on("click", function (e) {
     $(this).parent().fadeTo(500, 0).slideUp(500);
 });

Fiddle 3