Q&A
ご回答ありがとうございます。
HTMLと同じということは、モーダル内で画面遷移（入力画面→確認画面）したい場合は、
トリガー（ボタンなど）クリック
↓
入力用モーダル表示
↓
入力モーダルの確認ボタンクリック
↓
確認用モーダルを別途表示
という処理にするのでしょうか？窓は別に出さず同じモーダル内で遷移させたいのですがそこがわかりません。
データをPHPへ渡す処理はajaxを使用しますのでそこは問題ありません。
いつもお世話になってます。
サイト内でボタンをクリックしたらモーダル画面が起動して、
checkboxやinputに値を入力
↓
確認画面（モーダルで）
↓
送信ボタンをクリック
↓
データをPHPに送信
↓
送信できなかったら入力画面（モーダル）を再表示/完了画面を表示
というよくある機能を作りたいと思っています。PHPでは受け取ったデータをDBに格納します。
そこで質問なのですが、モーダル内での画面遷移はどのように実装するのでしょうか？検索してみても確認ダイアログのようなワンアクション用のものしか見つけられませんでした。
jQuery、ajax初心者のためどのようなワードで調べたらいいのかわからず的確な情報にたどり着けません。
ご教授お願いいたします。
＜追記＞
画面内遷移というのは、「モーダル画面の入力フォームで送信ボタンを押し、成功したらモーダル内が完了画面になる」ということです。エラーの場合は入力フォームに戻したいです。
よろしくお願いいたします。
回答2件
0
ベストアンサー
他の方が解答されていますが、すこしだけ噛み砕きます。
whiteperfumeさんにまず理解していただきたいのは2つです。
1.お望みの機能は「画面遷移」していない
2.よく見るモーダルはHTMLの一部分を上にかぶせ、表示非表示させているだけ
質問タイトルでも「モーダル内で画面遷移したい」とあるので細かく説明します。
「よくある機能」と仰るとおり、いろんなところで目にする機能だとおもいますが
モーダル内の表示が変わる機能の殆ど（絶対ではありませんが）は
「画面遷移（モーダル内だけ別ページを表示していて、違うページに移動する）」ではなく
モーダル内のHTMLを動的に書き換えているだけです。
そして、画面遷移することなくサーバーとの通信をする機能の一つが「Ajax」です。
よくあるモーダル内での通信の機能をさっくり説明しますと
トリガー（ボタンなど）クリック
↓
入力用モーダル表示
↓
入力モーダルの確認ボタンクリック
↓
モーダル内のHTMLを動的に書き換え確認表示する
↓
確認できたら「OK」ボタンなどを押す
↓
Ajaxでサーバーと通信
（この間またモーダル内のHTMLを動的に書き換え「通信中」などと表示したりします）
↓
通信結果が返ってくる
↓
通信結果によってモーダル内のHTMLを動的に書き換える
（無事にDBに格納できたか、何かしらのエラーが出たか）
このような流れです。
ですので、実装方法を調べるには「画面遷移」という言葉を使わず
「jQuery モーダル 動的」などの単語で調べてみることをおすすめします。
上で回答して頂いてるような情報が出るかと思います。
※”HTMLを動的に書き換え”と言っているのはあくまで一例で、表示非表示を切り替えるだけの場合もあります。
※iFrameを使えば「画面遷移」できますが、それはAjax通信ではなくなるかと。
投稿2016/03/28 10:47
総合スコア429
0
alertやconfirmだけのようなシンプルなダイアログは別として、ブラウザ内で出すモーダルダイアログはほとんどの場合、ブラウザの枠内を書き換えているだけです（jQueryプラグインも各種ありますし、bootstrapにも入っています）。
ということで、基本的には単なるHTMLからPOST送信する場合と、ほとんど変わりません（送信のためのformやボタンを、モーダルとして表示される部分に配置するだけです）。
なお、ブラウザ外にモーダルを出す方法として、showModalDialog()というものがありますが、Chromeではすでにサポートが打ち切られているので、新規に使うことはおすすめしません。
投稿2016/03/28 05:25
総合スコア146544
ajaxがsuccessしたときに、ダイアログの中身を書き換えたらどうですか？
$(ターゲットのelement).html( '書き換えるHTML' );
ってやってください。
html()でHTMLの書き換えをすることが出来ました。
ご回答ありがとうございました！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/03/29 08:31