fc-vista: jQueryでAjax中にボタンを無効にする

2013年2月3日日曜日

jQueryでAjax中にボタンを無効にする

TwitterBootstrap+jqueryでAjax後ボタンを押せなくするメモ
http://zenback.itmedia.co.jp/contents/logmemotips.com/archives/2938

上の肝心のソースが見えなくなっていたので書いてみました。
大事なところはjQuery.ajax()の前処理をするbeforeSendと後処理をするcompleteですね。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Hello</title>
<script type="text/javascript"
 src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
 $(function() {
  $("button").click(function() {
   $.ajax({
    beforeSend: function(){
     $("button").attr("disabled","true"); 
     $("div").text("Waiting...");
    },
    type:"GET",
    url:"hello",
    success: function(msg){
     $("div").text(msg);
    },
    complete: function(xhr,event){
     $("button").removeAttr("disabled");
    }
   });
  });
 });
</script>

</head>
<body>
 <button>Submit</button>
 <div></div>
</body>
</html>

0 件のコメント:

コメントを投稿