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

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

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

715閲覧

【jQuery】Barba.jsが動きません。

Masa-Y

総合スコア30

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2019/04/13 01:10

編集2019/04/13 01:34

実現したいことは以下です。

  • ユーザーがメールフォームに入力し内容確認ボタン押す
  • ページ全体は遷移せずに、フォーム枠部分のみが内容確認の表示に置きかわる
  • →内容確認し送信ボタンを押すと、同じく「送信しました」の表示に置きかわる(前のページに戻るを押すと、同じくフォーム枠だけが戻る)

上記を動作させるためBarba.jsを組み込んだのですが、うまく機能しません。
フォームの表示自体は、ご覧のようにphpで切り替わるようにしたのですが、
ボタンを押すとページがリロードされトップ位置に戻ってしまいます。
長いシングルページのため、
最下部のフォーム位置までまたスクロールしないと確認できない状態です。

ajax初心者なのですが、記載場所や記法などに誤りがあるでしょうか。
ネット情報を探し回りましたが、お手上げ状態です..。
ご存知の方、ご教示頂けないでしょうか。

また、ほかにわかりやすい方法があれば代替策でもいいので、
どうかよろしくお願いします。

php

1<!-- 上記略 --> 2 <section class="contact_form py-5"> 3 4 <?php 5 // 変数の初期化 6 $page_flag = 0; 7 if( !empty($_POST['confirm']) ) { 8 $page_flag = 1; 9 } elseif( !empty($_POST['submit']) ) { 10 $page_flag = 2; 11 } 12 ?> 13 14 <div id="barba-wrapper"> 15 <div class="barba-container"> 16 17 <?php if( $page_flag === 1 ): ?> 18 19 <?php require('confirm.php'); ?> 20 21 <?php elseif( $page_flag === 2 ): ?> 22 23 <?php require('done.php'); ?> 24 25 <?php else: ?> 26 27 <div class="container"> 28 <h1 class="bolder pb-3">以下のフォームにご記入いただき、<span class="inlineblock">「送信ボタン」をクリックしてください。</h1> 29 <p class="small text-dimgray text-center">※必要な場合をのぞいて、こちらから何度もメール<span class="inlineblock">することはございませんので、ご安心ください。<span class="inlineblock"></span></p> 30 </div> 31 <div class="contact_form_wrapper px-3"> 32 <form action="" method="post"> 33 <p class="form_flex"> 34 <label class="formtitle" for="name">お名前<span class="required">【必須】</span></label><input type="text" id="name" name="name" placeholder="山田太郎" required/> 35 </p> 36 <div class="jobs"> 37 <p class="formtitle"> 38 <span>ご職業 <span class="required">【必須】</span></span> 39 </p> 40 <div> 41              <!-- 中略 --> 42 </div> 43 </div> 44 <p class="form_flex"> 45 <label class="formtitle" for="mail">メールアドレス<span class="required">【必須】</span></label><input id="mail" type="email" name="mail" placeholder="example@mail.jp" required/> 46 </p> 47 <p class="form_flex textarea"> 48 <label class="formtitle" for="comment">その他</label><textarea id="comment" type="textarea" name="message" placeholder="疑問点などがございましたらご記入ください"></textarea> 49 </p> 50 <div class="btn_wrapper"> 51 <p class="submit"> 52 <input type="submit" name="confirm" value="入力内容を確認する" /> 53 </p> 54 <p class="reset"> 55 <input type="reset" value="リセット" /> 56 </p> 57 </div> 58 </form> 59 </div> 60 61 <?php endif; ?> 62 63 </div> 64 </div> 65 </section> 66 67 68 </main> 69 <footer> 70 </footer> 71 72 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 73 <script src="js/jquery.pjax.js"></script> 74 <script src="https://unpkg.com/@barba/core@next"></script> 75 <script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script> 76 77 78 <script> 79 $(function() { 80 Barba.Pjax.start(); 81 }); 82 </script> 83 84<!-- 以下略 -->

php

1<!-- confirm.php --> 2 3<div id="barba-wrapper"> 4 <div class="barba-container"> 5 6 <div class="container"> 7 <h1 class="bolder pb-3">以下の内容でよろしければ、下の<span class="inlineblock">「送信する」をクリックしてください。</span></h1> 8 </div> 9 <div class="contact_form_wrapper px-3"> 10 <form class="confirm_form" action="" method="post"> 11 <div class="form_flex"> 12 <p class="formtitle">お名前</p><p class="confirm_item"><?php echo $_POST['name']; ?></p> 13 </div> 14 <div class="form_flex"> 15 <p class="formtitle">ご職業</p><p class="confirm_item"><?php echo $_POST['job']; ?></p> 16 </div> 17 <div class="form_flex"> 18 <p class="formtitle">メールアドレス</p><p class="confirm_item"><?php echo $_POST['mail']; ?></p> 19 </div> 20 <div class="form_flex"> 21 <p class="formtitle">その他</p><p class="confirm_item"><?php echo $_POST['message']; ?></p> 22 </div> 23 24 <div class="btn_wrapper"> 25 <p class="submit"> 26 <input type="submit" name="submit" value="送信する" /> 27 </p> 28 <p class="reset"> 29 <input type="submit" name="goback" value="もどる" /> 30 </p> 31 </div> 32 33 <input type="hidden" name="name" value="<?php echo $_POST['name']; ?>"> 34 <input type="hidden" name="job" value="<?php echo $_POST['job']; ?>"> 35 <input type="hidden" name="mail" value="<?php echo $_POST['mail']; ?>"> 36 <input type="hidden" name="message" value="<?php echo $_POST['message']; ?>"> 37 </form> 38 </div> 39 40 </div> 41</div>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/04/13 01:19

インデントはもう少しきちんと揃えられたほうが良いと思います。 問題の切り分けもメンテナンスもしづらくないですか?
Masa-Y

2019/04/13 01:38

ありがとうございます、インデントをある程度直しました。大変失礼しました。
m.ts10806

2019/04/13 01:39

日頃から意識してコーティングするのはもちろん、フォーマット機能、構文チェック機能のあるエディタの利用は必須ですので
Masa-Y

2019/04/13 01:46

ありがとうございます。普段からもう少し整理して書くようにします。 エディタはAtomを利用していますが、あまり使いこなせていないかもしれません。
guest

回答1

0

ベストアンサー

行われているのはリロードではなくフォーム送信です。
buttonのtypeがsubmitであればpreventDe faultやreturn falseでイベントを意図的にキャンセルする記述をしないかぎり、formのactionに指定したURIに向けてフォーム情報の送信を行います。
pjaxなど物理的な画面遷移を伴わない場合はtypeはbuttonにされたほうが良いです。
表示画面で$_POSTで受け取らせてる時点でpjax成り立ってないような?
そのあたり「ajaxとはなにか」「pjaxとはなにか」という基本概念からおさえたほうが良いと思います。
Barba.jsの紹介記事幾つか読みましたが使い方間違ってるようにも見えます。
少なくとも、フォーム送信してはダメですね。

入力→確認→送信としても、今のようなガッツリ入力項目のあるフォームより
1項目2項目程度にとどめたミニマムコードで試してください。
でないと何が原因で思う通り動かないかの切り分けに時間と労力ばかりかかってしまいます。

特にphpの処理が関係する場合、
「どこからどこまでをphpに持たせるか」をきちんと考えて組まないと
早い段階でお手上げ状態になって破綻します。

htmlの中にロジックをがっつり書くのは可読性も悪くしますし問題の切り分けを困難にします。
処理事態はhtmlの記述よりも前に記載し、出力部分のみ変数などで書かれた方が良いです。
※特に途中に書かれてるrequireとか個人的には絶対にやめてほしい

最下部のフォーム位置までまたスクロールしないと確認できない状態です。

送信ボタンを上にも設けたり、overflowでコンテンツ部分だけスクロールさせたり
できる工夫は結構ありますよ。

投稿2019/04/13 01:31

編集2019/04/13 01:43
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Masa-Y

2019/04/13 02:12

色んなアドバイスありがとうございます、勉強になります。 ・ajax、pjaxの基本概念を理解する ・まずミニマムコードで試すこと ・どこからどこまでをphpに持たせるかの整理 早速やってみます。ありがとうございました。 非同期通信での表示切り替えを実現させたいので、 他の方法はもうすこし後で検討したいと思います。
m.ts10806

2019/04/13 02:38

いずれにしてもミニマムコードから試してくださいね。 pjaxとレイアウトと送信処理 全部個々に切り離せます。
Masa-Y

2019/04/13 03:16

やってみます! 何度も無知な質問すみません、途中のrequireはなぜ絶対NGなのでしょうか? よろしければ望ましい書き方をアドバイスいただける嬉しいです。
m.ts10806

2019/04/13 04:51

最も気になるのは可読性。 requireはファイルを読み込むものですが、おおよそは切り分けたPHPプログラムの使用が想定されます。 つまり、処理も何もなく、単にHTMLだけおかれたファイルであればfile_get_contents()のほうが望ましいです。.phpである必要はありません。HTMLしかないので.htmlでいいです。 「変数を使いたい」ということでしたらrequireは正しいですが、 file_get_contents()でもrequire()でも基本的に冒頭で使うほうが可読性を損ないません。いずれも「処理」なので、回答に書きましたように、「処理」は出力前に書くようにしてください。 それこそ「PHPにどこまで持たせるか」というところを切り分けてください。そうすれば見えてくることもあります。 動くからってそれが本来望ましい使い方とは限らないからです。
Masa-Y

2019/04/13 13:30

そういう事なんですか...。すごく勉強になります。 自分自身、可読性というものにあまり意識が向いていなかった事に気づかされました。すぐに改善していきたいと思います。ありがとうございます。 あと、アドバイスを受けて自分なりに色々やってみましたが、結局今回は、Barba.jsは用いずにPOSTの送信処理で対応するのが、一番スマートでわかりやすい事にようやく、気づきました。 お問い合わせ内容確認クリック→confirm.phpに遷移 送信ボタンsubmitクリックの場合:phpで「送信しました」画面に切り替え 戻るボタンクリックの場合:onClick="history.back() で戻る という形で対応する事にしました なぜかajaxにこだわっていましたが、客観的なユーザビリティっていうものをもう少し冷静に考えるようにしなきゃいけないなって思いました。 でも、本当に勉強になりました。感謝です。 またこちらで質問させていただく事があるかもしれないので、 そのときはタイミングがあえばご指導くださると嬉しいです ありがとうございました。
m.ts10806

2019/04/13 21:35

ユーザービリティ で言うとpostで送信しようがpjaxでコンテンツ部分だけ切り替えようが関係ないですよ。 ちゃんと入力したものが送信されたらそれでOKです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問