Javascript で、操作結果を alert で表示するところがあるんですが、味気ないので何かないかなと調べたら、こんなプラグインがありました。
非常にきれいなアラートを表示する「jQuery Alert Dialogs」-JavaScript Library Archive
「jQuery Alert Dialogs」はjQueryで非常に美しいアラートやプロンプトを表示するJavaScriptライブラリです。
ガントチャートを、jQuery UI resizableで長さを変えて、その結果をアラートで表示していたのですが、jConfirm を使えば確認後に変更した日付を、DBに反映させる処理を行なわせることができます。
と、書いたものの、使ってみると思うような動きになりません。
どうやら、jConfirm の結果を待たずに、先に処理が進んでしまうようです。
2011-01-25 - Cyokodog :: Diary
jQuery Alert Dialogs の場合では、confirm 関数のようにユーザの入力処理を待ってくれないので、一旦、SUBMIT 処理をキャンセルした後、jConfirm 関数でダイアログを表示し、OK を選択した時のみ、サブミット処理を起動するようにする必要があります。この時、サーバサイドで何のボタンによりサブミットされたかを判別できるよう、対象ボタンの CLICK イベントでサブミットさせる必要があります。
ガーン！
jQuery UI resizable の場合は、ボタンのように再帰的にサブミットさせるのは難しいですね。 どうしましょ？
同じようなプラグインで、「How to Create a jQuery Confirm Dialog Replacement」の jquery.confirm.js も試してみましたが、結果は同じでした。 confirm() ならちゃんと待ってくれるようですが。
結局、if文の後に処理を置くのは諦めて、先にリサイズ後のガントチャートの幅・位置設定をしてしまい、OKボタンが押されたらDBへの日付更新、Cancelボタンならガントチャートの幅・位置を元に戻すことにしました。
でもこれだと、Cancelボタン後の処理が画面に反映されません。 「画面遷移なし」が理想ではありますが、location.reload で画面をリロードしてお茶を濁しました。
ちなみに jConfirm は古いプラグインなので、jQuery UI ThemaRoller には対応していないんですよね。 改造してみようかなとも思ったのですが、面倒くさそうだったので結局は jQuery UI Dialog の confirm を使いましたとさ。 チャンチャン。