カテゴリ: Buttonのclickイベントでformのsubmitを抑止するjQueryを使っていると、Buttonのclickイベントに何らかの処理を書く機会は多いだろう。 最近、Buttonが押下されると$.ajaxメソッドでPOST送信を行うコードを書いていて、送信時に原因不明のエラーにしばらく悩まされたので、その原因と対策を書き留めておく。まず、問題のコードは以下のようなものだ。htmlはformタグの中にbuttonタグを配置している。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="./jquery-ui.min.css" /> <script src="./jquery-2.1.1.min.js"></script> <script src="./jquery-ui.min.js"></script> <script> $(document).ready(function() { $('#in-form').button() .click(function() { console.log('click!'); $.ajax({url: './target', type: 'POST'}) .done(function(data, textStatus, jqXHR) { console.log('done'); }) .fail(function(jqXHR, textStatus, errorThrown) { console.log('fail textStatus: ' + textStatus); }); }); $('#datepicker').datepicker(); }); </script> <title>Buttonのclickイベントでreturn false</title> </head> <body> <h1>Buttonのclickイベントでreturn false</h1> <form> <input type="text" id="datepicker" /> <button id="in-form">form内のbutton</button> </form> </body> </html> 1つしかないButtonを押下すると、$.ajaxメソッドでPOST送信する仕組みである。最初はこのままでも問題なく動いていたのだが、ちょっとしたタグの組み換えによって$.ajaxがエラーになり送信できなくなってしまったのだ。textStatusは"error"、jqXHR.statusは0となっていた。 タグを組み換えただけなのに何故エラーになってしまうのだろうとしばらく悩んだのだが、原因はButtonの押下によってformがsubmitされてしまっていたためだ。「そんなの当り前だろ。」と突っ込みたくなる方もいるかもしれないが、buttonタグをformでくくったのは本意ではなく、他のプラグインを利用するためにそうしていた。因みに$.ajaxメソッドを$.postメソッドに変更して試してみたが当然うまくいかなかった。 この問題の対策は簡単で、clickイベントのreturnでfalseを返せば良いだけである。これによってformのsubmitが抑止され、$.ajaxメソッド送信時のエラーは解消した。 $('#in-form').button() .click(function() { console.log('click!'); $.ajax({url: './target', type: 'POST'}) .done(function(data, textStatus, jqXHR) { console.log('done'); }) .fail(function(jqXHR, textStatus, errorThrown) { console.log('fail textStatus: ' + textStatus); }); // falseで戻ることによってsubmitを抑止 return false; }); また、formタグが必要ないのであれば、formタグを除去することも解決方法の1つだろう。 (2014/11/26)
Copyright© 2004-2018 モバイル開発系(K) All rights reserved.
[Home]
|