<input type="submit">を<input type="image" src="">にしたい場面はたくさんありますが、ajaxでの接続で挙動がおかしい場面があったのでメモ。
通常のボタンでsubmitする場合
※HTML <form action="#" id="hoge"> <button name="btn_submit" id="btn_hoge" type="button" value="hoge">hoge</button> </form> // dojo.connect <script type="text/javascript"> // イベントハンドラの登録 dojo.addOnLoad(function() { // btn_hoge要素にイベントハンドラを設定する。 // onclickイベントを引っ掛けて、hogeフォームの内容をsubmit // /fuga/piyoアクションをコールして、json形式でレスポンスを受け取る。 dojo.connect(dojo.byId("btn_hoge"), "onclick", function() { dojo.xhrPost({ url: "/fuga/piyo/format/json", content:{"a":"b"}, form: "hoge", handleAs: "json", load: function(data){ alert('OK'); }, error: function(error, args) { alert('NG'); } }); }); }); </script>
※Zend /** * Fugaコントローラ */ class FugaController extends Zend_Controller_Action { /** * piyoアクションのコンテキストとしてjsonを登録 */ public function init() { parent::init(); $contextSwitch = $this->_helper->getHelper('contextSwitch'); $contextSwitch->addActionContext('piyo', 'json') ->initContext(); } /** * Piyoアクション */ public function PiyoAction() { // View変数をシリアライズしてjsonとして返却 // {"viewMessages":"abc"} $this->view->message = 'abc'; } }
上記は、普通にajax通信できますが、以下のようにボタンを画像にすると、dojoのイベントハンドラでerror関数がコールされ、error変数として「Error: Unable to load /fuga/piyo/format/json status:0」という良く分からないエラーが返却されます。
※HTML <form action="#" id="hoge"> <input type="image" src="" name="btn_submit" id="btn_hoge" value="btn_submit" /> </form>
サーバでログ取ってみても、postされてたりされてなかったり、規則性なくランダムにサーバにリクエストが到達しているようでした。
error関数も複数回コールされることがあり、1回のボタン押下で何回か/puga/piyoアクションがコールされることもありました。
何でそんなことになるのか分かりませんでしたが、dojo.connectでinput属性のエレメントにハンドラを設定しているのが問題っぽい。
<form action="#" id="hoge"> </form> <input type="image" src="" name="btn_submit" id="btn_hoge" value="btn_submit" />
こんな感じでformの外にimage要素を配置すると、サーバには1回だけ行儀よくPOSTし、返却値も期待するJSON形式で受け取れるようになります。
formの中にいる<input type="image">な要素にdojo.connectすると、dojoで接続されたイベントハンドラと、form自体のactionとの両方が実行されてしまうようです。
0 件のコメント:
コメントを投稿