JSファイル（JQuery）の読み込みについて

質問

セレクトボックスで、猫を選択したらAというJSファイルが動き、BというJSファイルに猫の画像URLを書出しています。
ボタンを押したら、BのJSファイルが動き、ページ上に猫の画像が表示されるというようなものを作っています。

セレクトボックスを変更し、ボタンを押すたびに、画像を変えたいのですが、うまく変わりません。
Bへの書出しはうまく行っていて、セレクトボックスを変えて、ボタンを押してから、ページ更新をして、もう一度ボタンを押すと、切り替わります。

セレクトボックス変更→ボタンを押す(変わらない)→ページ更新→ボタンを押す（変わる）

この作業で、セレクトボックスで指定した画像が表示されるので、JSファイルのキャッシュが残っているのかなと思い、ヘッダーや、.htaccessで、キャッシュ無効のコードを書いたり、JSファイルのURL呼び出しに、日付を入れたりしてみた（～.js?20150209010101 など）のですが、こちらも有効になりません。

このような場合、なにか対処方法をご存知でしたら教えていただけませんでしょうか。
どうぞよろしくお願いします。

回答No.6

t_ohta · ベストアンサー

グラフデータ部分を入れた新しいJSファイルを作成するのではなく、データだけをAjaxで取得してデータの入れ換えを行うような実装にすれば問題は無くなると思います。

お礼

t_ohtaさん

コメントありがとうございます。
そのやり方で出来ないか試してみて、グラフデータ部分だけ読み込むようにしたのですが、グラフが表示されないです。。
なにが悪いのか、、
そのグラフデータ部分を書き出して、その部分をコピーしてそのまま入れ込んだらちゃんと表示されるので、変数で入れるとうまくいかないのか、、、よくわからないです。

また、replot();　というのも再描画に使えるみたいなので、使ってみようと思いますが、まずはグラフが変数でちゃんと表示されるようにやってみたいと思いますが、タイトルと内容が変わってきましたので、こちらは閉じて、また新しく投稿させていただこうかと思います。

ありがとうございました。
またよろしくお願いします。

回答No.5

superside0

もしかして、　Aのイベントで、サーバー上のBのjsファイルを更新しているので
サーバー上で更新されたそのjsを再読み込みしたいということですね。

content="no-cache"を指定したり jsファイル名に日時をつけても、
イベントの発生のたびに　そのページで読み込み済のjsファイルを破棄して、
サーバーから再読み込みするということではないので
考えかたを変えないと　難しいのでは？

つまり、Aのイベントでサーバー上のjsを書き換えるのではなく
Aのイベントでの動作をJavaScriptのグローバル変数なりに記録して
Bではそれを参照して動作が可変するようにしたほうがスマートでは？

お礼

superside0 さん
コメントありがとうございます。

http://alphasis.info/jquery-plugins/jqplot/
↑このサイトのやり方ですと、グラフを書くために、グラフ表示のデータと、そのグラフ表示の仕様を書き込むコードが必要なのですが、可変するのは、グラフのデータ部分のみなんです。（セレクトボックス変更に基づき、取得したデータ）
BのJSファイルはグラフ表示用のベースのファイルです。グラフデータを入れる部分を固定文字列にして、Cファイルを作るときに、Bファイルを読み込んで、グラフデータを入れる固定文字列を置換して、グラフデータを入れ、Cファイルを作成しています。
ボタンを押した時に、読み込むのは、Cファイルです。

＞Aのイベントでの動作をJavaScriptのグローバル変数なりに記録して
Bではそれを参照して動作が可変するようにしたほうがスマートでは？

これは具体的にどのようにするのでしょうか。
可変のやりかたでグラフ切り替えもできるのでしょうか・・・？
JSファイルは1つでということでしょうか。

すみません、ちょっとイメージが湧きづらいのですが、考えてみます。
ありがとうございます。

回答No.4

t_ohta

一度読み込んだJSファイルは、ボタンを押してJavaScriptを実行しただけでは再読み込みされないので、正しい動作をしていると言えます。

CGIでJSファイルを書き換えるような実装は良くありませんので、ボタンを押した際に実行されるJavaScriptはセレクトボックスの選択内容を見て、プログラム内で画像のURLを生成してimgタグを書き換えるような動作にするといいでしょう。

お礼

t_ohta さん
コメントありがとうございます。

一度読み込んだJSファイルは、ボタンを押してJavaScriptを実行しただけでは再読み込みされないのですね！

数カ月前まではそれで切り替わっていたのですが、
最近確認したら、今まで動いていたものが動かなくなっていたのです。

ごめんなさい、わかりやすくと思って、簡単な例を上げたのですが、それですと教えていただきましたやり方でいいのかと思いますが、やりたいことを詳しくご説明しますね。

http://alphasis.info/jquery-plugins/jqplot/
↑こちらのサイトを参考に、グラフを作成したいと思っています。

そのため、セレクトボックスでグラフ表示したいことを選択し、それに基づいて、JSファイル（Aファイル）からCGIを起動して、WEB上のDBから値を取得し、グラフデータ部分を作成して、グラフ読み込み用のベースのJSファイル（Bファイル）を読み込み、グラフデータ部分を入れた新しいJSファイル（Cファイル）を作成して、ページ上でボタンを押したら、新しいJSファイル（Cファイル）を読み込んで、グラフの表示、切り替えをしたいです。
ややこしいのですが、わかりますでしょうか。

今まで試行錯誤した結果、このやり方がいいのかなと思ってやっていたのですが、もし他にいい方法がありましたら教えて下さい。

二度手間になってしまってすみません。

ただ、数カ月前まではこのやり方でできていたので、なにかの仕様が変わったのか？プログラムは修正していないので、原因が全くわからないのです。。

よろしくお願いします。

回答No.3

t_ohta

JSファイルに画像URLを書出すというのは、具体的にどのような処理を行っているのでしょうか。
ブラウザからサーバ上にあるJSファイルを書き換えるような処理を行っているのでしょうか。

お礼

t_ohta さん
コメントありがとうございます。

はい、処理はもっと複雑なので、質問では簡単な例を上げたのですが、

セレクトボックスを選択したら、JqueryからCGIにつなげて、CGI上でJSファイルの上書きをし、その上書きしたファイルをボタンを押したら起動させるようにしています。
よろしくお願いします。

回答No.2

Taiyonoshizuku

ん？なんか途中までしか投稿されてない。

とどのつまり、
どうやって呼び出しているか、動いているソースを提示してください。

お礼

Taiyonoshizukuさん
コメントありがとうございます。

どの部分を提示したらよろしいでしょうか。HTML部分でしょうか。

HTMLでしたら、ヘッダーは以下になります。

<!--キャッシュさせない-->
<meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Pragma" content="no-cache">
<meta equiv="Expires" content="0">

キャッシュさせたくないJSファイルの呼び出しは以下です。
<script type="text/javascript">//<![CDATA[
var url = "http://～～/yobidasi.js?" + new Date().getTime();
document.writeln('<script type="text/javascript" src="' + url + '"><\/script>');
//]]></script>

これで足りますでしょうか。
よろしくお願いします。

回答No.1

Taiyonoshizuku

とどのつまり