テーブルの中のモーダルが上手く表示できません。

Question

https://teratail.com/questions/a6dgv6h7dmsi7d
で、質問されていただいた
「Colorbox」でモーダルウィンドウを出すための続きのような質問です。

テーブルの中のモーダルが上手く表示できません。

<?php
      print("<table>");//テーブル書き出し

         $tw = "aaa";

         print("<tr>");
         print("<th></th>");
         print("<td><a href=#colorbox_inline class=trig-colorbox_inline>関連ツイート</a></td>");
         print("<div style=display: none>");
         print("<div id=colorbox_inline>");
         
         //ここが問題。一番に変数$twの内容が表示されてしまう
         print("{$tw}");
         
         //ちなみにこうすると一番に表示されないが、モダールにも表示されない
         //print("<td>{$tw}</td>");
         
         print("</div>");
         print("</div>");
         print("</tr>");
    
      print("</table>");
   

echo <<<EOM
<script>
   $('.trig-colorbox_inline').colorbox({
    inline: true,
    opacity: 0.6,
});
</script>
EOM;
?>

https://yasaidemo.com/kokutai_hearing/2.php

ご教示して頂ければ幸いです。

Comments

[m.ts10806]

「モーダル」です。

Answer 1

大きく２点

①属性値は全てクォートで囲った方が良いかと思います。

例：

print("<div style=display: none>");

↓

print("<div style='display: none'>");
もしくは
print("<div style=\"display: none\">");
もしくは
print('<div style="display: none">');

PHPマニュアル：文字列
上記の例など半角スペースがあることで正しくHTML出力されないのではないでしょうか。

②そもそものHTMLの構文としておかしい

tr直下に置けるのはtd/thです。
現状だとdivが置ける場所にありません。
HTMLが正しくないために、JavaScriptからも正しく認識されない、
CSSもきちんと適用されない。

あとは、どこをどうモーダルにしたいのかによります。

PHP度外視で正しく動くHTMLをモック（静的HTML）として作成し、
モック通りのHTMLを出力できるようにPHPを組んでください。

Comments

[yasaidemo]

ご回答ありがとうございます。

>①属性値は全てクォートで囲った方が良いかと思います。
こちらで解決しました!!

>②そもそものHTMLの構文としておかしい

>tr直下に置けるのはtd/thです。
>現状だとdivが置ける場所にありません。
>HTMLが正しくないために、JavaScriptからも正しく認識されない、
>CSSもきちんと適用されない。
こちらの意味合いが分からなくて
色々とやってみたりしていたのですが
理解不足で本当にすみません。
tr直下にdivが置けないということですので
外に置いたりしましたが
colorboxが反応しなくなってしまいました。
たぶん、「そういうことではない」ということかと思いますが、
すみません…。

>あとは、どこをどうモーダルにしたいのかによります。
最終的にはこちらを作成しています。
https://yasaidemo.com/kokutai_hearing/saerch.php
作りかけですので分からないと思いますが、
したいとことは、
関連ツイートをクリックすると
そのidの関連ツイートがモーダル表示するようにしたいのですが
今は全部同じ内容になってしまっています…。

>PHP度外視で正しく動くHTMLをモック（静的HTML）として作成し、
>モック通りのHTMLを出力できるようにPHPを組んでください。
はい、そうするようにします。

[m.ts10806]

解決方法として色々考えられますが、
もしループ処理で作られているのでしたら、
①tdの中にモーダルHTMLを置く
②モーダルHTMLをループの外に置いてクリック時のイベントでその行個別の情報を送って非同期で再検索して結果をHTML上に出力（JavaScriptが必要）

など考えられます。
提示のsearch.phpはループの外に置いたのでしょうか？
でしたら、②のパターンで、その列を特定可能な情報（IDなど）で非同期再検索になると思います。
①だと行数分モーダルのHTMLが設置されるのでちょっとパフォーマンス悪いかもしれません。
※IDなど付ける場合は重複IDがでないように注意してください。

[yasaidemo]

凄い素早く回答くださってありがとうございます。
何度か読んだりして
また改めてコメントします。
それにしても凄い人ですね。

[m.ts10806]

いえ基本は自身の経験から応えられることを応えているだけです。
多くは「通ってきた道」だから言えることもあると思います。
もちろん質問者さんがそれだけ具体的に情報を記載してくれているからというのもあると思いますよ。
ふわっとした内容ならふわっと応えるか、質問内容の修正を依頼します。

[yasaidemo]

私もふわっとした質問が多いので気をつけるようにします。
本当にありがとうございます!!

>提示のsearch.phpはループの外に置いたのでしょうか？
saerch.phpの中にループをおいてあります。
mysqlからデータを取り出してきています。

また改めてコメントしますね。

[m.ts10806]

ひとまず本件既に解決されたようですし、
「モーダルが表示されない」・・・はひとまず解決してるようにも見えるので、
コメントをヒントにもう少し頑張ってみて、
それでも解決しない際は新しく質問立ててください。

[yasaidemo]

はい、わかりました!!
ありがとうございました!!