Question

我想在更新现有记录时使用bootstrap alert来显示成功消息。这就是我所拥有的：

的index.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';
}
?>

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

Answer 1

如果我做对了，你需要两件事：

居中警报消息。
仅在按钮单击后显示警告框。

为此，您可以省略在HTML本身中添加alert和alert-success类。将您的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

如果你想让盒子居中，也可以使用bootstrap类：

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

基于Bootstrap 2.3的grid system，你可以有12列，所以为了使盒子居中，我们将从左边留下4列，这是offset4的作用，并使长度为该框为4列，这是span4所做的。

<强> 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

更新记录Ajax时引导成功警报

1 个答案:

附加：