各位大大好:
想請問我用bootstrap做填寫表單,並用ajax再同一個頁面更新到資料庫,想請問要如何跑出一個視窗說已更新完成,像google日曆一樣,謝謝。
有沒有關鍵字可以搜尋程式呢?目前只有搜尋到進度條的教學..
更新到writeback.php資料庫
function myFunction() {
$(document).ready(function(){
var namen=$("#name").val();
var lab=$("#lab").val();
var phone=$("#phone").val();
var bdate=$(".change").attr("value");
var clr=$("#clr").val();
var thing=$("#thing").val();
var timest=$("#timest").val();
var timeov=$("#timeov").val();
$.ajax({
type: "POST",
url: "writeback.php",
data: {
"namen":namen,
"lab":lab,
"phone":phone,
"bdate":bdate,
"clr":clr,
"thing":thing,
"timest":timest,
"timeov":timeov
},
error: function(jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
},
success: function(data) {
alert('success: ' + data);
}
});
});
}
http://api.jquery.com/jQuery.ajax/
beforeSend 把進度/上傳中先叫出來,然後用 complete 去關掉/變化。
我有把beforeSend跟 complete ,不知道是不是寫入太快,圖片跑不出來..有再writeback.php也入sleep(5)可是會造成modal被lock住,然後loading的圖也跑不出來..
http://www.ee.nsysu.edu.tw/key/c.php
<div class="modal fade " id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> //這行的tabindex="-1"讓時間不能動 tabindex="-1"
<div class="modal-dialog" role="document">
<div class="form-row"">
<div class="form-group col-md-6 " >
<label for="recipient-name" class="col-form-label" >分機/電話:</label>
<input type="text" class="form-control" id="phone">
</div>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label" >事由:</label>
<textarea class="form-control" id="thing"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="send" class="btn btn-primary" onclick="myFunction()">Send message</button>
</div>
</div>
</div>
</div>
function myFunction() {
$(document).ready(function(){
var namen=$("#name").val();
var lab=$("#lab").val();
var phone=$("#phone").val();
var bdate=$(".change").attr("value");
var clr=$("#clr").val();
var thing=$("#thing").val();
var timest=$("#timest").val();
var timeov=$("#timeov").val();
$.ajax({
type: "POST",
url: "writeback.php",
async:false,
data: {
"namen":namen,
"lab":lab,
"phone":phone,
"bdate":bdate,
"clr":clr,
"thing":thing,
"timest":timest,
"timeov":timeov
},
error: function(jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
},
success: function(data) {
},
beforeSend:function(){
$("#cca").show();
$('#exampleModal').modal('hide');
},
complete:function(){
$("#cca").hide();
}
});
});
}