jQuery 更新记录 Ajax 中的 Bootstrap 成功警报
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22679575/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap successful alert in updating record Ajax
提问by user255798
I would like to use bootstrap alert in displaying success message in updating existing records. This is what I have:
我想在更新现有记录时使用引导程序警报显示成功消息。这就是我所拥有的：
index.php
索引.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
<?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';
}
?>
I want the alert message to be in the centre of the screen but what happening is that when I do not update the record, the alert background is visible and then I update the record that is only the time the message Successfully update appears.
我希望警报消息位于屏幕中央，但发生的情况是，当我不更新记录时，警报背景是可见的，然后我只在出现消息成功更新时更新记录。
回答by AyB
If I got it right, you need two things:
如果我做对了，你需要做两件事：
- Center the alert message.
- Display the alert box only after button click.
- 将警报消息居中。
- 仅在单击按钮后显示警告框。
For this you can omit adding the alertand alert-successclass in the HTML itself. Change your HTML to (along with aligning of text):
为此，您可以省略在 HTML 本身中添加alert和alert-success类。将您的 HTML 更改为（连同文本对齐）：
<center><div id="result"></div></center>
Instead, we will add the class, once the text inside has been placed such as:
相反，一旦放置了里面的文本，我们将添加类，例如：
$("#submit_button").click( function() {
$.post( $("#updateunit").attr("action"),
$("#updateunit :input").serializeArray(),function(info){
$("#result").html(info);
//adding class
$("#result").addClass("alert alert-success");
});
});
If you want the box to be centered too, make use of bootstrap classes:
如果您也希望框居中，请使用引导程序类：
$("#result").addClass("alert alert-success offset4 span4");
Based on the grid systemof Bootstrap 2.3, you can have 12 columns, so to make the box center, we will leave 4 columns from the left which is what offset4does and make the length of the box to be 4 columns which is what span4does.
基于Bootstrap 2.3的网格系统，你可以有 12 列，所以为了使框居中，我们将在左边留下 4 列这是什么offset4，使框的长度为 4 列，这是什么span4。
Additional:
额外的：
what if I want to automatically close the alert message if it passes 5 seconds? and display the close button inside the alert message
如果我想在超过 5 秒后自动关闭警报消息怎么办？并在警报消息中显示关闭按钮
For a smoother solution, you can do:
要获得更顺畅的解决方案，您可以执行以下操作：
//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);
});
