マウス操作ではなく、リンク(アンカー)による操作に切り替えてみた。まず検索結果の第一要素(１列目)を単なる文字列ではなく、AタグをcreateElementして、それをTDタグにアペンド、そしてそれをTRへ追加…という手順を踏む事にした。具体的にはこんな感じ。
// １カラム目の処理
var new_tr = document.createElement( 'tr' ) ;
var new_td = document.createElement( 'td' ) ;
var new_a = document.createElement( 'a' ) ;
a.id = row_identifier ;
a.innerHTML = 1st_column_string ;
jQuery( new_a ).on( 'click', my_click_process ) ;
new_td.appendChild( new_a ) ;
new_tr.appendChild( new_td ) ;
// ２カラム目の処理
new_td = ...
この処理を、行数分繰り返す事でアンカー(Aタグ)つきの表形式結果一覧が完成する。アンカーをクリックして、単にどこかへ飛ばすわけではないので、href属性は設定せずに、onClickで処理を挟むようにした。処理としては何かしらのポップアップウィンドウを表示する事を想定した。
そして次に取り掛かったのが、ポップアップの表示なのだが、ポップアップ表示と言ってもいろいろな種類がある。いわゆるalertではダイアログ内のレイアウトも限定されてしまうので、できればもう少しレイアウトが自由なのがいいなぁと色々調べてみると、HTML+CSSで作るポップアップや、jQuery UIのダイアログなど、結構候補が色々あった。とりあえず手っ取り早そうなjQuery UIのダイアログを試してみようと思って作ってみたのだが…。
$("#test_dialog").dialog( "open" ) ;
みたいに書いても、「dialogが関数として定義されていない」とエラーになる。jQueryの記述に慣れていないのもあるのかと思い、色々と書き方とか触ってみたのだが結果は変わらない。そしてこれは、必要なライブラリが足りてないとかではないのか？と思って調べてみたら、やっぱりデフォルトではjQuery UIは読み込まれていなさそう。という事で、早速jQuery UIを読み込んでみた。functions.phpに次のように書き加えてみた。
add_action( 'wp_enqueue_scripts', 'additional_scripts_enqueue' );
function additional_scripts_enqueue() {
wp_enqueue_script( 'jquery-ui-dialog' );
wp_enqueue_style( 'jquery-ui-dialog-min-css', includes_url().'css/jquery-ui-dialog.min.css' );
}
そして試してみると…、できた！！！想定通りのダイアログが画面にでてきた。PCの場合、ダイアログの位置や大きさも、表示した後に自由に変更できるようだけれど、スマホ(Chrome)では動かせなかった。まぁ動かす必要も無いので構わないのだが。その辺り、色々とデザイン等を見て考えるとしよう。今回は「OK」ボタンを配置したけれど、「×」ボタンはデフォルトでつくようだし、「簡易表示」「詳細表示」の２ボタンを配置すれば、「OK」ボタンは無くても良さそうに思う。
後、表示させるダイアログはHTML(今回の場合はWordPressの固定ページ)上にdivで囲った要素として、あらかじめ記述しておく必要がある。しかし処理が遅かったりするのか、余計な処理が多くて手間取っているのかまだ不明だが、表示させたくないのに画面上に一瞬表示されてしまう事がある。取りあえず以下のように非表示のスタイルを設定してみたが、これでも問題なくダイアログは表示されるようだし、しばらくこのままでいこうかな。
<div id="test_dialog" style="display: none ;">
<p>test dialog</p>
<button>簡易表示</button>
<input type="button" value="詳細表示" />
</div>
このjQuerty UIのダイアログで全て目的が達成されるようなら、次は実際の簡易表示、詳細表示の処理へと進む事になるが、どうやってやるのかは全く不明。雛形HTMLを用意して…でも、固定ページへ埋め込んで…でもダメだと思うからどうしようね。まぁそれはダイアログが完成した後に考えよう。取りあえずは固定ページを作って、そこへ別タブ(target=”_blank”)で表示するような流れまでできれば、ダイアログ関連も完了にできるから頑張りたい。