プルダウンメニューの選択変更時にPHPの処理を発動させる方法、およびPHPからJavascriptの自作関数を呼び出す方法

やりたかったことは以下の通り。

  1. あるプルダウンメニューで選択を変えると、 他のプルダウンメニューの選択状態などが変わる
  2. その変更内容は、DBから取得したい

<制約条件>
・Ajax(発音はエイジャックス)とかSmartyとか流行りのことは知らない

ということなのだが、
「よくわからないけどなんとかできるだろー」
とか適当に始めてみたところ、
かなりの罠があって、ひっかかりまくった。

解決するに当たり、先人の方々の解決メモに
大変お世話になったので、
私も罠の内容と解決策をメモしておく。


当初の方針は以下のようなものだった。

A. 「プルダウンメニューの選択を変えると処理が始まる」は
Javascriptを使う(selectタグのonChange())
B. Aの内容を元に、サーバサイド言語(ここではPHP)でDBとやりとりする
C. DBから取得した内容を元に、Javascriptで
他のプルダウンメニューの選択状態を変更する

しかし、問題が続発した。

問題1 AとBの連携:Javascript→PHPの処理呼び出し?

Aは、selectタグに仕込む。


<select id="id1" onChange="function()">

みたいな感じ。

このfunction()はJavascriptの外部ファイルとかで定義しておく。

Bは、PHPでDBと会話すれば良く、
これは調べればいくらでも出てくるので問題ない。

ところが、AとBの流れを考えると、

Aで呼び出されるJavascriptの関数から、
BのPHPでやる一連の処理を呼び出さなければならない

でもJavascriptからPHPを呼び出すのってどうやるの?

調べても、なんかできなさそうな感じだった。

<解決策>

form(HTML)→Javascript→PHP
はなんか無理そうだったので、
form(HTML)→PHP⇄Javascript
とした。

ベースの処理はPHPにする。
でないとDBとの会話ができない。
で、PHPにJavascriptのコードを吐かせて
Javascriptの処理を実行する、
みたいな感じ。

やり方はこちらを参照のこと。
PHPとJavaScriptの連携 - PHPプログラミング解説
PHP TIPS - 12. JavaScriptをPHPで記述しよう:ITpro

要は、下のようにしてPHPにJavascriptをお話ししてもらう。


print<<<EOF
<script type="text/javascript">
〜Javascriptでやりたいこと〜
</script>
EOF;

引数は、手抜きしてoptionのhiddenで渡す。

<トリガー>
onChangeだとJavascriptしか呼び出せないので、

<form method="POST" action="hogehoge.php">

みたいにしてphpファイルを呼び出すことにした。

ただこれだと、ボタンを押すと発動するのだが、
プルダウンメニューの変更では発動しない。
かつ、hogehoge.phpにページ遷移してしまうので、
元ページの他のプルダウンメニューを変更できなくなってしまう。

要は、プルダウンメニュー変更でhogehoge.phpを呼び出しつつも、
ページ遷移したくない。

調べたら、なんかできた。
値だけ送信してページは遷移させないためには? - CGI - 教えて!goo


<form target="fr1" action="hogehoge.php">
<select id="id1" onChange("this.form.submit()")>

として、その前あたりに


<iframe name="f1" width=0 height=0 style="visibility:hidden"></iframe>

みたいなフレームを仕込む、というやり方。
ページ遷移もなく、あたかもonChangeでPHPを呼び出している
ような感じになった。

これで第一ハードルクリア。

問題2 BとCの連携:PHP→Javascriptの処理呼び出し?

なんとかonChangeっぽくプルダウンメニュー変更でPHPの処理を発動し、
DBからデータを取り出すところまではできた。

しかし、その内容で他のプルダウンメニューの変更をする場合、
「PHPでDBから取得した内容をJavascriptに渡す」
ということが必要になる。

元のページ(HTML)で


<script type="text/javascript" src="hogehoge.js">

みたいな感じで呼び出しておいたのだけど、PHPの処理中に
「そんな関数知らね」
とかエラーが。もう意味わかんない。

<解決策>

PHPのファイル(hogehoge.php)の最初にも


print<<<EOF
<script type="text/javascript" src="hogehoge.js"></script>
EOF;

みたいにしてJavascriptの外部ファイルを読み込ませておく。
(むしろ呼び出し元のHTMLの方には不要)

これは、
「formで呼び出されたhogehoge.phpの世界」
で起きていることなので、
「元のHTMLの世界」
で呼び出しておいても関係ないのですな。
あらうっかり!

ページ遷移しない細工をしていたので、
気づくのに手間取ってしまった。

ともあれ、これでOK。

PHPの処理内で、自作のJavascriptの関数を呼び出せる。
呼び出し方は以下のような感じ。引数も渡せる。


print<<<EOF
<script type="text/javascript">
kansuu($var1);
</script>
EOF;

受けるJavascript側はこんな感じ。


function kansuu(var1){
〜やりたい処理〜
}

書くまでもないか?

問題3 他のプルダウンメニューの選択状態が変えられない

これで、だいたいやりたいところはできた。


  • onChangeっぽくプルダウンメニュー変更でPHPを呼び出し

  • PHPでDBからデータ取得

  • その内容をJavascriptの処理に渡す

最後の詰めで、Javascriptで他のプルダウンメニューの
選択状態を変えようと思ったのだけど、
なんかピクリともしない。なんで?

いつも通り


document.getElementById()

みたいに指定していると
「そんなの見つかりません」
とおっしゃる。

???

<解決策>

hogehoge.phpは、
ページ遷移を避けるために作ったフレーム内で動いている。
なので、同じフレーム内を指している


document.getElementById('id')

ではなく、


parent.document.getElementById('id')

としてやらないといけない。
うへ〜。罠だらけ。

ちなみに、プルダウンメニューの選択状態を変更をするには、


parent.document.getElementById('id').selectedIndex = the_index;

みたいにする。
私は、これ以外のやり方ではできませんでした。

the_indexは、がんばって取得する。

まとめ

  • PHPとJavascriptの連携はかなり強力
  • JavascriptからPHPを呼び出すのではなく、 PHPを走らせその中でJavascriptのコードを吐かせる
  • onChange()っぽく.phpファイルを呼び出すこともできる
  • PHP内でJavascriptの外部ファイルも読み込める

なんか結構なんでもできるな、というのが印象。
ただ、処理速度とかそういうのは考えていないので、
その辺りはえらい人になんとかしていただけるとうれしい。

ちなみに、この一連の制約はDBと会話するから発生していて、
例えばCSVから読み込むのでよければ、
こんなめんどくさいことは不要で、Javascriptだけでできた。

てか、Ajax(発音は以下略)使えばできるんでしょ?知らないけど。


お世話になったサイト
PHPとJavaScriptの連携 - PHPプログラミング解説
PHP TIPS - 12. JavaScriptをPHPで記述しよう:ITpro
PHP入門
フォームからの入力 | PHP Labo

皆さんの拍手が私のモチベーションです。
励ましのコメントも送れるよ!→

ガッツゴリラ

この最も大事な位置にガッツポーズをするゴリラが表示されていることに何の意味があるのだろうか?答え:何もありません。こんなところまでお読みいただきありがとうございました。

Macオンラインウエア情報検索

Loading
Macオンラインウエア情報検索についてはこちらを参照ください。 →「Macオンラインウエア情報検索」をアップデートしました2012

このブログ記事について

このページは、2012年8月30日 23:27に書かれたブログ記事です。

ひとつ前のブログ記事は「Safari6.0起動時に最後のセッション内容が再現されなくて困っているときにすると良いこと」です。

次のブログ記事は「web拍手にお答え 2012年7月〜8月」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

広告

アーカイブ