在更新记录Ajax时引导成功警报 [英] Bootstrap successful alert in updating record Ajax
问题描述
我想在更新现有记录时使用引导警报显示成功消息。这是我的：
index.php
code>< 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-labelfor =transaction>注意< / label>
< div class =controlling>
< textarea rows =3columns =10name =notes><？php echo $ notes; ？>< / textarea>
< / div>
< / div>
< div class =control-group>
< div class =controls>
< button class =btn btn-customtype =submitid =submit_button>更新< / button>
< a href =＃class =back>< button class =btn btn-customonclick =goBack（）>后退< / button>< / a>
< / div>
< / div>
< / form>
< div id =resultclass =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'=& ，
'：transaction_id'=> $ transaction_id））;
echo'成功更新记录！
} else {
echo'必填字段缺少';
}
？>
我希望警报消息在屏幕的中心，但是发生的是，没有更新记录，警报背景是可见的，然后我更新的记录只是消息成功更新出现的时间。
p>如果我是正确的，你需要两个东西：
- 中心警报消息。
- Center the alert message.
- Display the alert box only after button click.
$ b
为此，您可以忽略添加警告和 alert-success 类。将HTML改为（以及文字对齐）：
< center>< div id =result < / div>< / center>
相反，我们将添加类，一旦里面的文本放置如：
$（＃submit_button）click（function（）{
$ .post（$（＃updateunit） .attr（action），
$（＃updateunit：input）serializeArray（），function（info）{
$（＃result）。html $ b //添加类
$（＃result）。addClass（alert alert-success）;
}）;
}）;
如果您想将框置于中间，请使用引导类：
$（＃result）。addClass（alert alert-success offset4 span4）;
基于网格系统的Bootstrap 2.3，你可以有12列，所以为了使框中心，我们将从左边剩下4列，这是 offset4 并且使框的长度为4列，这是 span4 的作用。
其他：
如果我想在警报消息通过5
秒时自动关闭该怎么办？并在快讯中显示关闭按钮
为了更流畅的解决方案，您可以：
//如果用户想要手动关闭
$（＃result），添加一个x按钮html（'< div class = alert alert-success>< button type =buttonclass =close>×< / button>'+ info +'< / div>'）
//定时警报框在5秒后关闭
window.setTimeout（function（）{
$（alert）。fadeTo（500，0）。 slideUp（500，function（）{
$（this）.remove（）;
}）;
}，5000）;
//将点击事件添加到x按钮以立即关闭
$（'。alert .close'）。on（click，function（e）{
$（this）.parent（）。fadeTo（500，0）.slideUp（500）;
}）;
I would like to use bootstrap alert in displaying success message in updating existing records. This is what I have:
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';
}
?>
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.
If I got it right, you need two things:
For this you can omit adding the alert and alert-success class in the HTML itself. Change your HTML to (along with aligning of text):
<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 system of 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 offset4 does and make the length of the box to be 4 columns which is what span4 does.
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
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);
});
这篇关于在更新记录Ajax时引导成功警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
