質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

モーダル内で画面遷移したい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 5,786

whiteperfume

score 61

いつもお世話になってます。

サイト内でボタンをクリックしたらモーダル画面が起動して、
 checkboxやinputに値を入力
 ↓
 確認画面(モーダルで)
 ↓
 送信ボタンをクリック
 ↓
 データをPHPに送信
 ↓
 送信できなかったら入力画面(モーダル)を再表示/完了画面を表示
というよくある機能を作りたいと思っています。PHPでは受け取ったデータをDBに格納します。

そこで質問なのですが、モーダル内での画面遷移はどのように実装するのでしょうか?検索してみても確認ダイアログのようなワンアクション用のものしか見つけられませんでした。

jQuery、ajax初心者のためどのようなワードで調べたらいいのかわからず的確な情報にたどり着けません。
ご教授お願いいたします。

<追記>
画面内遷移というのは、「モーダル画面の入力フォームで送信ボタンを押し、成功したらモーダル内が完了画面になる」ということです。エラーの場合は入力フォームに戻したいです。
よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

他の方が解答されていますが、すこしだけ噛み砕きます。
whiteperfumeさんにまず理解していただきたいのは2つです。

1.お望みの機能は「画面遷移」していない
2.よく見るモーダルはHTMLの一部分を上にかぶせ、表示非表示させているだけ

質問タイトルでも「モーダル内で画面遷移したい」とあるので細かく説明します。

「よくある機能」と仰るとおり、いろんなところで目にする機能だとおもいますが
モーダル内の表示が変わる機能の殆ど(絶対ではありませんが)は
「画面遷移(モーダル内だけ別ページを表示していて、違うページに移動する)」ではなく
モーダル内のHTMLを動的に書き換えているだけです。

そして、画面遷移することなくサーバーとの通信をする機能の一つが「Ajax」です。

よくあるモーダル内での通信の機能をさっくり説明しますと

トリガー(ボタンなど)クリック

入力用モーダル表示

入力モーダルの確認ボタンクリック

モーダル内のHTMLを動的に書き換え確認表示する

確認できたら「OK」ボタンなどを押す

Ajaxでサーバーと通信
(この間またモーダル内のHTMLを動的に書き換え「通信中」などと表示したりします)

通信結果が返ってくる

通信結果によってモーダル内のHTMLを動的に書き換える
(無事にDBに格納できたか、何かしらのエラーが出たか)

このような流れです。

ですので、実装方法を調べるには「画面遷移」という言葉を使わず
「jQuery モーダル 動的」などの単語で調べてみることをおすすめします。
上で回答して頂いてるような情報が出るかと思います。

※”HTMLを動的に書き換え”と言っているのはあくまで一例で、表示非表示を切り替えるだけの場合もあります。
※iFrameを使えば「画面遷移」できますが、それはAjax通信ではなくなるかと。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/29 17:31

    丁寧に解説ありがとうございます!

    なるほど・・・画面遷移ではなくただ中身が書き換わっているだけなんですね。

    教えていただいた検索ワードで探して、HTML書き換えをhtml()で行ったら、イメージしていた動きを実現できました。
    外部ファイルから読込んだHTMLにも置換が出来るようなのでそれでもっとリッチな実装にしていきたいと思います。
    ありがとうございました!

    キャンセル

+1

alertconfirmだけのようなシンプルなダイアログは別として、ブラウザ内で出すモーダルダイアログはほとんどの場合、ブラウザの枠内を書き換えているだけです(jQueryプラグインも各種ありますし、bootstrapにも入っています)。

ということで、基本的には単なるHTMLからPOST送信する場合と、ほとんど変わりません(送信のためのformやボタンを、モーダルとして表示される部分に配置するだけです)。

なお、ブラウザ外にモーダルを出す方法として、showModalDialog()というものがありますが、Chromeではすでにサポートが打ち切られているので、新規に使うことはおすすめしません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/28 15:11

    ご回答ありがとうございます。

    HTMLと同じということは、モーダル内で画面遷移(入力画面→確認画面)したい場合は、
     トリガー(ボタンなど)クリック
     ↓
     入力用モーダル表示
     ↓
     入力モーダルの確認ボタンクリック
     ↓
     確認用モーダルを別途表示

    という処理にするのでしょうか?窓は別に出さず同じモーダル内で遷移させたいのですがそこがわかりません。
    データをPHPへ渡す処理はajaxを使用しますのでそこは問題ありません。

    キャンセル

  • 2016/03/28 19:04

    ajaxがsuccessしたときに、ダイアログの中身を書き換えたらどうですか?
    $(ターゲットのelement).html( '書き換えるHTML' );
    ってやってください。

    キャンセル

  • 2016/03/29 17:32

    html()でHTMLの書き換えをすることが出来ました。
    ご回答ありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる