質問: いつもお世話になってます。 サイト内でボタンをクリックしたらモーダル画面が起動して、 checkboxやinputに値を入力 ↓ 確認画面(モーダルで) ↓ 送信ボタンをクリック ↓ データをPHPに送信 ↓ 送信できなかったら入力画面(モーダル)を再表示/完了画面を表示 というよくある機能を作りたいと思っています。PHPでは受け取ったデータをDBに格納します。 そこで質問なのですが、モーダル内での画面遷移はどのように実装するのでしょうか?検索してみても確認ダイアログのようなワンアクション用のものしか見つけられませんでした。 jQuery、ajax初心者のためどのようなワードで調べたらいいのかわからず的確な情報にたどり着けません。 ご教授お願いいたします。 <追記> 画面内遷移というのは、「モーダル画面の入力フォームで送信ボタンを押し、成功したらモーダル内が完了画面になる」ということです。エラーの場合は入力フォームに戻したいです。 よろしくお願いいたします。
回答: 他の方が解答されていますが、すこしだけ噛み砕きます。 whiteperfumeさんにまず理解していただきたいのは2つです。 1.お望みの機能は「画面遷移」していない 2.よく見るモーダルはHTMLの一部分を上にかぶせ、表示非表示させているだけ 質問タイトルでも「モーダル内で画面遷移したい」とあるので細かく説明します。 「よくある機能」と仰るとおり、いろんなところで目にする機能だとおもいますが モーダル内の表示が変わる機能の殆ど(絶対ではありませんが)は 「画面遷移(モーダル内だけ別ページを表示していて、違うページに移動する)」ではなく **モーダル内のHTMLを動的に書き換えている**だけです。 そして、画面遷移することなくサーバーとの通信をする機能の一つが「Ajax」です。 よくあるモーダル内での通信の機能をさっくり説明しますと トリガー(ボタンなど)クリック ↓ 入力用モーダル表示 ↓ 入力モーダルの確認ボタンクリック ↓ モーダル内のHTMLを動的に書き換え確認表示する ↓ 確認できたら「OK」ボタンなどを押す ↓ Ajaxでサーバーと通信 (この間またモーダル内のHTMLを動的に書き換え「通信中」などと表示したりします) ↓ 通信結果が返ってくる ↓ 通信結果によってモーダル内のHTMLを動的に書き換える (無事にDBに格納できたか、何かしらのエラーが出たか) このような流れです。 ですので、実装方法を調べるには「画面遷移」という言葉を使わず 「jQuery モーダル 動的」などの単語で調べてみることをおすすめします。 上で回答して頂いてるような情報が出るかと思います。 ※”HTMLを動的に書き換え”と言っているのはあくまで一例で、表示非表示を切り替えるだけの場合もあります。 ※iFrameを使えば「画面遷移」できますが、それはAjax通信ではなくなるかと。