iT邦幫忙

0

上傳完成圖示語法_ajax、php

各位大大好:

想請問我用bootstrap做填寫表單,並用ajax再同一個頁面更新到資料庫,想請問要如何跑出一個視窗說已更新完成,像google日曆一樣,謝謝。
有沒有關鍵字可以搜尋程式呢?目前只有搜尋到進度條的教學..
https://ithelp.ithome.com.tw/upload/images/20180206/20097057DMq4WI1yXE.jpg

更新到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);
}
    

});

});

}
weiclin iT邦高手 4 級 ‧ 2018-02-06 22:17:55 檢舉
用 modal 去顯示完, 再用程式把 modal 關閉吧
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
froce
iT邦大師 1 級 ‧ 2018-02-06 22:30:13

http://api.jquery.com/jQuery.ajax/

beforeSend 把進度/上傳中先叫出來,然後用 complete 去關掉/變化。

mayyola iT邦研究生 2 級 ‧ 2018-02-09 11:11:45 檢舉

我有把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();
        }
       
});
});
}

我要發表回答

立即登入回答