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

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

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

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

JavaScript

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

解決済

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

testcase
testcase

総合スコア0

PHP

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

JavaScript

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

3回答

0評価

0クリップ

2138閲覧

投稿2017/08/14 16:58

編集2022/01/12 10:58

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

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

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

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

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

HTML

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

ヘッダのjQueryは

jQuery

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

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

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

jQuery

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

と宣言されており、

PHP

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

jQuery

<div id="stage"></div> <script type="text/javascript"> var array_item = <?php echo json_encode($array_item); ?>; var array_data = <?php echo json_encode($array_data); ?>; var data = [{ x: array_item, y: array_data, type: 'bar' }]; var layout = { height: 400, width: 500 };*/ var options = { title: 'Chart' }; Plotly.plot('stage', data, options); </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

<script type='text/javascript'> $(document).ready(function(){ $("#submit_bt").click(function(event){ //フォームのデフォルトの振る舞いを防ぐ event.preventDefault(); //初期化 $("#ajax_result").empty(); form_input(); }); }); function form_input(){ var word_val=$("#word_id").val(); $.ajax({ type: 'POST', url: './b.php', data:{ word:word_val }, dataType: 'html', }) .done(function(data, status, jqXHR){ $("#ajax_result").html(data); }) .fail(function(jqXHR, status, error){ $("#ajax_result").html("エラーです"); }) .always(function(jqXHR, status){ $("#ajax_result").html(status); }); } </script>

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

jQuery

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

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

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

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

jQuery

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

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

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

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

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

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

kei344
kei344

2017/08/15 16:48

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

2017/08/15 17:17

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

2017/08/15 17:27

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

PHP

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

JavaScript

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