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>内に入れるとあっさりとできました。
その他ご助言いただきました皆様にも大変勉強になりました。
どうもありがとうございました。
回答3件
あなたの回答
tips
プレビュー