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

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

ただいまの
回答率

90.49%

  • JavaScript

    16960questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9256questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6915questions

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

  • CakePHP

    2354questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

別画面で表示すると真っ白になってしまう

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 2,070

k499778

score 501

前回の投稿の続きです。
画面の要素をコピーして別画面に表示したい

現在cakePHP3,PHP,HTML(ctp),JavaScript(jQuery)を使ってアプリ開発をしています。
前回の投稿にもある通り、「表示画面の内容を別画面で表示したい」と思っています。

しかしその実装中に不可解な現象が発生しました。

別画面側のctpファイルで、<a>タグをPOST送信するために

<a href="javascript:document.frm1.submit()">
  <form name="frm1" method="POST" action="http://localhost/cakephp3/Sample/tomato">
    <input type="hidden" name="id" value="1234">
  </form>
 ”とまと”
</a>

のようなコードを書いたのですが、そうすると別画面を表示した時に画面が真っ白になってしまったのです。

ただこのコードの

<form name="frm1" method="POST" action="http://localhost/cakephp3/Sample/tomato">
    <input type="hidden" name="id" value="1234">
  </form>


部分をコメントアウトすると、通常通り表示されます。

なぜでしょうか?
POST送信できるコードを使ったまま、別画面にしても真っ白にならない方法を知りたいです。

こういった経験のある方、また改善策がわかる方がいらっしゃれば教えていただけると助かります。
よろしくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • CHERRY

    2016/04/12 08:15 編集

    Web サーバーのエラーログに 何かエラーメッセージが出力されていないでしょうか?

    キャンセル

  • k499778

    2016/04/12 08:26 編集

    それがエラーメッセージが出てないんです。 リンクから別画面を表示した時は真っ白なんですが、 そこでF5(画面更新)すると画面が表示されるんです。 なんだか画面遷移が最後まで(ページの表示まで)行かず、途中で止まっているような感じもします。

    キャンセル

回答 2

checkベストアンサー

+1

まずブラウザのコンソール(例:chrome)でこのページを開いて記述したdomがhtmlにちゃんと出力されているか確認してみて下さい。
もし,出力されていないのであれば,サーバ側のコードにエラーがあり,実行が止まっています。
もし,domが存在しているのに出力されていない場合はhiddenやaタグやスタイルシートの影響を受けている可能性があるのでDOMを分離したり少しずつ書き方を変えてみて下さい。
それ以上根が深いバグがある可能性もない訳ではないですが,経験上何処かに文法ミスがある可能性が高い気がします。(特にctp)
また,それでも原因が解らないようでしたらvar_dumpやdebug_trace,IDE環境がありましたらXDEBUGデバッグ用のツールを用いてコードの逐次実行を行ってみるといいと思います。

追記

ちなみに

<form name="frm1" method="POST" action="http://localhost/cakephp3/Sample/tomato">
    <input type="hidden" name="id" value="1234">
 </form>


だけで実行するとどうなるか試してもらえないでしょうか。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/04/12 12:17 編集

    回答ありがとうございます。
    現状として、
    「デベロッパーツール」で見ると、Elementに
    白紙の内容のDOMが表示されており、

    「ソースを表示する」で見てみると、
    ちゃんとDOMが表示されているのです。

    そういったところもよくわかんないです。

    キャンセル

  • 2016/04/12 12:57 編集

    Element側が白紙になってるということは,出力されていないということですね。
    ソースを表示するでは,テンプレートエンジンの出力またはhtmlファイルに記述されているファイルがそのまま表示されていると思います。
    ctpではなくhtmlをそのまま出力しているのでしたっけ?
    デパロッパーツールでは一時的に出力にDOM要素を追加できるので,DOMをコピペしてedit as htmlなどを用いて無理やり追加してみるといいと思います。もし,それで,DOMが正常に読み込まれ,画面上にUIが追加されるのであれば,PHP側でバグが起きている可能性があります。

    キャンセル

  • 2016/04/12 21:12

    tkowさん、返答誠にありがとうございます。

    htmlではなく、ctpを呼び出してみます。出力しています。

    edit as htmlでDOMを一時的に追加できるのですね。
    デベロッパーツールのコンソールに書くのでしょうか?
    調べてみます。

    キャンセル

  • 2016/04/12 22:00 編集

    elementウインドウで挿入したい場所のDOMを右クリックするとedit as htmlという項目が出てくると思います。
    そこにタグをコピペすれば挿入されると思います。
    また追加情報でf5更新が効いていると拝見させていただいての予測ですがcakeを使ってるとのことでlink先でコントローラーのアクションをリクエストした後リダイレクトやviewのレンダリングをされていないのではないでしょうか。よくあるのはボタンがpost送信で実行した後の処理を忘れるなどがあります。リロードはGETで送信されるのでhtmlが出力されるのではないかと予想します。この辺りを確認お願いいたします。

    キャンセル

  • 2016/04/13 09:40 編集

    追加返答ありがとうございます。

    edit as htmlで「ソースを表示する」で表示できたタグ、つまり表示したいタグを追加すると、画面上にUIが表示されました。

    表示画面のformタグ部分を除くと、表示画面は表示されるので、
    遷移元画面(ctp)→コントローラー(php)→表示画面(ctp)
    の流れは問題ないんじゃないかな。と思ってはいますが、検証してみます。

    キャンセル

  • 2016/04/13 11:06 編集

    なるほど。
    リンク先のコードも見させていただきました。
    set関数を使った後,renderあるいはredirectでviewを呼び出していないのが気になっています。
    私はcakeも使ったことがありますが,主にrails開発メインなので大体同じ仕様になっていると思うという前提で,経験上の話をいたしますが,パラメータを保持したままMVCで画面を再描画する方法は,送信されたパラメータとともにrenderでviewファイルを渡す。同じURLでcookieなどにパラメータを入れてredirectさせてパラメータを渡す。ajaxでレスポンスにデータと再描画を行うコードを返す。
    というのが常套手段になります。
    DOMを一部削除するとrenderingされるのは少し不可解ですが,やはりpost先のアクション実行後のルーティングに問題がある可能性が高い気がするので,renderやredirectを使った方法に切り替える方が簡単に済む気がします。
    もしかするとcakeのルーティングの規約の問題やルーティングの設定ミスなどもあるかもしません。これらを試しても直らなければ私には手に負えない問題かもしれないので他の解る方が現れるのをお待ちいただければと思います。
    DOMを手動で挿入できることからcake側に問題があることは間違いありません。

    キャンセル

  • 2016/04/13 12:10 編集

    丁寧な対応ありがとうございます。

    レンダリングに関してだけ言うと、
    cakephp3では、コントローラのアクション名と同じ名前のビューがレンダリングされます。(キャメルケースとスネークケースによる違いはありますが。)
    そのためレンダリングの仕方に関しては問題のないように思われます。

    以下リンク「Viewのレンダリングと値のセット」参照
    http://qiita.com/s-kiriki/items/636ec1109f48fb977347


    その他の点に関しては、検証後また返答させていただきます。

    キャンセル

  • 2016/04/13 13:30

    確かにactionとview同じ名前にされていますね。
    また何か思いついたら書き込ませていただきます。

    キャンセル

  • 2016/04/13 23:31

    tkowさん何度も丁寧に接していただきありがとうございます。
    いろいろ対話している中で試行錯誤し、なんとか解決することができた模様です。

    前回投稿で記述しているのですが、
    呼出元画面でHTML文字列をパラメータに設定し、POST送信していました。
    そのHTML文字列がどうも悪さをしていたようです。
    パラメータとしてHTML文字列を飛ばさないようにすると、呼出先画面、いわゆる今回表示できなくて困っていた表示画面を表示することができました。

    ただ前回のデバッグで、HTML文字列を飛ばさないようにして検証したり、
    そもそもそれではなぜ表示画面のformタグがあるときとないときで表示されされないが変わるのかがよくわかりません。

    リロードすると画面表示できたのは、一度目は見えないおかしなクエリパラメータのせいで表示できず、リロード時は隠れたパラメータ抜きにして、そのURLのみを読みこんだから表示されたのかなと推測を立てています。

    いろいろとスッキリしない結果にはなってしまいましたが、tkowさんの協力もあって解決に至ることができました。
    長々と付き合っていただきありがとうございました。

    キャンセル

  • 2016/04/14 00:01

    なるほど。お疲れ様です。
    cakeでCSRF対策が働いていたのかもしれませんね。
    基本的にスクリプトやhtml文字列をサーバに送信する時はURLエンコーディングしたり,エスケープしたり,置換するものと思った方がいいと思います。
    フレームワーク使うとブラックボックス多くてエラーの原因の根が深くなって大変ですよね。
    こちらも勉強になりました。ありがとう御座います。

    キャンセル

+1

formタグをaタグの中に記述しているのはなぜでしょうか?
下記のようにaタグの外にformタグを出すとどうでしょう?

<form name="frm1" method="POST" action="http://localhost/cakephp3/Sample/tomato">
    <input type="hidden" name="id" value="1234">
</form>
<a href="javascript:document.frm1.submit()">  
 ”とまと”
</a>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/04/13 23:35

    回答有り難うございます。
    私もそう思ってaタグの位置を変えたりしたのですがうまくいきませんでした。

    ただなんとか解決に至りました。
    呼出元画面でパラメータとして渡していたHTMLコンテンツがどうも悪さしていたらしく、
    それを飛ばさないようにすると画面表示することができました。

    ただtkowさんの返信にも書いたように、どうも辻褄があわない事が多く、モヤッとした解決になってしまいました。

    とは言っても、とりあえず前に進むことができたので良しとします。
    ご協力ありがとうございました。

    キャンセル

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

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

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16960questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9256questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6915questions

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

  • CakePHP

    2354questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。