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

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

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

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

JavaScript

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

Q&A

解決済

3回答

3011閲覧

PHPのWebアプリでフォームから次のページに遷移したらグラフライブラリが動かない。

testcase

総合スコア18

PHP

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

JavaScript

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

0グッド

0クリップ

投稿2017/08/14 16:58

編集2017/08/16 16:31

PHPでWebアプリを作っています。

トップページにフォームを置き、そこから次のページにPOSTでデータを渡し、
そのデータを元に処理をした結果をPlotly.jsというグラフライブラリに配列で渡して、グラフを表示させるというものです。

ところがこれが表示されません。

具体的にフォームのページをa.php
移動先のページをb.phpとします。

今、ただ跳ぶだけのページにしていますので、
a.phpのフォームは

HTML

1<form method="post"> 2<input type="hidden" name="word" id="word_id" value="あ" /> 3<input type="submit" value="送信" id="submit_bt" /> 4</form>

ヘッダのjQueryは

jQuery

1<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

のように宣言しています。

b.php単独ですと
ヘッダ部に

jQuery

1<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 2<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

と宣言されており、

PHP

1<?php 2$array_item = array(嫌い, やや嫌い, 普通, やや好き, 好き); 3$array_data = array(85, 47, 0, 24, 0); 4?>

jQuery

1<div id="stage"></div> 2 3<script type="text/javascript"> 4var array_item = <?php echo json_encode($array_item); ?>; 5var array_data = <?php echo json_encode($array_data); ?>; 6var data = [{ 7x: array_item, 8y: array_data, 9type: 'bar' 10}]; 11var layout = { 12height: 400, 13width: 500 14};*/ 15var options = { 16title: 'Chart' 17}; 18Plotly.plot('stage', data, options); 19</script>

となっています。

b.phpを直にブラウザで表示させると普通に棒グラフまで表示されますが、
a.phpからジャンプすると値は行ってるみたいなのですが、グラフが表示されません。

chromeをつかってますので、F12で表示を見てみますと、
Uncaught ReferenceError: Plotly is not defined
というエラーメッセージが出ます。

自分でも調べましたが、まずjQueryを読み込んでとか書かれていますが、
そのあたりをしてもそうなります。

ご存知の方、ご教授いただけないでしょうか?
よろしくお願いします。

(補足1)
ご指摘ありがとうございます。
はい、実際にはこのような感じでフックしておりまして、POST自体は実現できています。
a.php上でフォームの下にb.phpの出力が表示される感じです。
POST先でUncaught ReferenceError: Plotly is not definedとなるために、
ライブラリの問題かなと考えているのですが、すでに書いているために途方に暮れている次第です。

jQuery

1<script type='text/javascript'> 2$(document).ready(function(){ 3$("#submit_bt").click(function(event){ 4//フォームのデフォルトの振る舞いを防ぐ 5event.preventDefault(); 6//初期化 7$("#ajax_result").empty(); 8form_input(); 9}); 10}); 11 12function form_input(){ 13var word_val=$("#word_id").val(); 14$.ajax({ 15type: 'POST', 16url: './b.php', 17data:{ 18word:word_val 19}, 20dataType: 'html', 21}) 22.done(function(data, status, jqXHR){ 23$("#ajax_result").html(data); 24}) 25.fail(function(jqXHR, status, error){ 26$("#ajax_result").html("エラーです"); 27}) 28.always(function(jqXHR, status){ 29$("#ajax_result").html(status); 30}); 31} 32 33</script> 34

(補足2)
上記のjavascriptのコードの

jQuery

1.done(function(data, status, jqXHR){ 2$("#ajax_result").html(data); 3})

の箇所で、なんらかの書式でPlotly.jsを呼び出して解釈してね的な
記載方法はあるのでしょうか?

なんとなく、この箇所でデータを呼び出したけど、a.phpにはPlotly.jsが
つかわれてないような気がするのですが。

と、実は続きを書いていたはずが操作の誤りか、消えてしまいました。

jQuery

1.done(function(data, status, jqXHR){ 2 $("#ajax_result").html(data); 3 //連続して使えるようにするためボタン無効化解除 4 $button.attr('disabled', false); 5})

このように$button.attr('disabled', false);としてやると
グラフを呼び出したり、
ページ上で引き続きフォームを利用することができるようになりました。

しかし、新規でページ上で利用する際には、
結果の数値は出るのですが、グラフは出ません。
その状態でもう一度ボタンを押して初めて表示されます。

ただし、グラフが表示された状態でフォームのデータを変更して再びボタンを押すと
グラフは問題なく利用できます。
新規でページを呼び出した際には必ず1回目は表示されず、
もう1回ボタンを押して初めて表示されるようになるという次第です。

こちらにつきまして、みなさまの知見をお聞かせいただけますと幸甚です。
よろしくお願いします。

(解決)
kei344様のおっしゃる通り、a.phpに

javascript

1<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 2

<head></head>内に入れるとあっさりとできました。

その他ご助言いただきました皆様にも大変勉強になりました。
どうもありがとうございました。

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

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

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

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

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

kei344

2017/08/15 16:48

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
testcase

2017/08/15 17:17

かしこまりました。そのような機能があったのですね。今後気を付けます。
kei344

2017/08/15 17:27

ここは「質問への追記・修正の依頼」です。質問本文は編集することが可能なので、その依頼をしています。
guest

回答3

0

ベストアンサー

JavaScript

1$("#ajax_result").html(data);

上記コードではhead部分は#ajax_resultの要素内に入らないと思います。デベロッパーツールで確認してみてください。別途スクリプトタグだけ先に抜き出して追加するか、a.phpに元々読み込んでおくかどちらかではないでしょうか。

【開発者ツールを使おう! カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Chrome デベロッパーツールの使い方概要 | Web Tips】
http://weback.net/utility/1410/

投稿2017/08/16 14:29

kei344

総合スコア69357

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

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

0

外しているかも知れませんが、a.php から POST された場合の b.php の(実行済みの)ページをブラウザでソース表示し、その内容をよく見てみると原因がわかるかも知れません。
つまり、PHPのコードがどこかで HTML か javascript のコードを破壊している可能性があるかも知れません。(PHPのエラーコードがjavascriptのソース中に表示されてしまっているとか)
b.php単独で表示した場合のページのソースと比較すると分かりやすいと思います。

投稿2017/08/16 09:35

YoichiK

総合スコア89

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

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

0

<form method="post">

にpost先のurlが指定されていないのですがsubmmitをjQueryでフックしてaction先URLを変えていたりしてますか?

<form action="./b.php" method="post">

と書いたらb.phpにpostされるのではないかと思いました。

投稿2017/08/14 18:06

Tak1016

総合スコア1408

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問