[JavaScript]如何避免頁面重複submit的動作

  • 16502
  • 0
  • 2008-12-16

即使使用AJAX的ModalUpdateProgress,仍無法避免keyboard click按鈕的動作,
透過javascript攔截頁面事件,檢查Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()是否為true,
取消多餘的postback。

在有AJAX control toolkit的輔助後,

為了避免user 在 submit的過程中,重複點選按鈕重複送出click指令,

通常會直接使用ModalUpdateProgress來作page blocker的動作。

可是經過測試之後發現,即使是AJAX的ModalUpdateProgress,仍然有兩個問題。

1.無法block keyboard的動作。

2.在ModalUpdateProgress的ProgressTemplate 浮現之前,仍然可以重複submit。

重複submit很常會影響到資料存取的部分,導致重複新增或新增失敗。

針對這個問題,用了很多奇奇怪怪的手法與網路上的參考,但終於有點不夠完美。

也有參考過ASP.NET魔法學院jeff377大大的在今年3月的文章,

頁面 submit 時鎖定整個頁面的控制項

但面對畫面上有許多局部postback的updatepanel,不太會修改成我需要的結果。

(原始的code會導致form上物件disable沒有還原,我有使用ScriptManager註冊js)

 

後來有同事幫忙找到,根本解決重複AsyncPostBack的方法,只需要註冊一段javascript,在FormLoad,呼叫pageLoad()即可。

function pageLoad()
{           Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(cancelPostBack);
}


function cancelPostBack(sender, args)
{
    if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack())        
    {
        //alert('One postback at a time please');
        args.set_cancel(true);
    }

}

 

 


blog 與課程更新內容,請前往新站位置:http://tdd.best/