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

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

ただいまの
回答率

90.35%

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

解決済

回答 3

投稿 編集

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

testcase

score 13

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

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

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

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

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

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

ヘッダのjQueryは

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


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

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

<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
$array_item = array(嫌い, やや嫌い, 普通, やや好き, 好き);
$array_data = array(85, 47, 0, 24, 0);
?>
<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となるために、
ライブラリの問題かなと考えているのですが、すでに書いているために途方に暮れている次第です。

<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のコードの

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kei344

    2017/08/16 01:48

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

    キャンセル

  • testcase

    2017/08/16 02:17

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

    キャンセル

  • kei344

    2017/08/16 02:27

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

    キャンセル

回答 3

checkベストアンサー

0

$("#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/

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

<form method="post">

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

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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