以下のURLを参考にし、テーブルの表示を行おうとしたところ、
テーブルで表示するデータの内容が表示されず、
"._hs($CN->GetFieldData('mes_type'))."などと表示されています。
これはなぜなのでしょうか？
また、参考URLでの固定対応もうまく動いていません。
「テーブルの内容が表示されない」といった観点で
自分で調査したうえで質問しておりますが、
解決できませんでしたのでご教授お願いいたします。

参考URL
https://webkaru.net/jquery-plugin/tbodyscroll/

[当質問に至るまでの経緯]
以下のページで固定対応を質問しておりましたが、IEでは動作しないことが判明し、上記の参考URLでの対応を行っていたところ、うまく固定対応ができなかったため質問しております。
https://teratail.com/questions/115462

aa_ichiran_list.phpでスクロール付きのテーブルを作成しています。

■aa_ichiran.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title>ABCシステム</title>
<link rel="stylesheet" type="text/css" href="css/import.css" media="screen,tv,print" />
<script src="js/pop_up.js" type="text/javascript"></script>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/input_check.js" type="text/javascript"></script>
<script src="js/jquery.pagination.js" type="text/javascript"></script>
<script src="js/jquery.json-2.2.min.js" type="text/javascript"></script>
<script src="js/jquery.tablefix_1.0.1.js" type="text/javascript"></script>
<script type="text/javascript" >
var page = 0;

//初期表示ページ
var start_page  = <?php echo $_SESSION["ichiran"]["page"] - 1; ?>;
var total_page  = 0;
var strsrc = "";    //検索項目値保存用
var sort = "";
var sort_type = "";    //ソートタイプ
var del_ary = new Object();// 削除用オブジェクト

function fncsrc() {

    //リスト表示
    $.post("./ichiran/aa_ichiran_list.php",
        strsrc + "&page=1&sort=" + sort + "&sort_type=" + sort_type + "&chache=" + get_cache() 
    , function(data) {

        try{

            var obj = $.evalJSON(data);
            total_page = obj.total_page;

            $('[id=tbldata]').html(obj.text);
★修正した箇所 ここから
			$(document).ready(function() {
			    $("#tbl_list").tbodyScroll({thead_height:"30px",tbody_height:"100px",head_bgcolor: "transparent",foot_bgcolor: "transparent"});
			});
★修正した箇所 ここまで

        }catch( e ){
            alert(data);
        }

    });
}


function fncdisp_details(id) {

    location.href = "details.php?id=" + id;
    return false;

}

$(document).ready(function () {

    $("#kensaku").click();

});
</script>
</head>

<body style="min-width:100%;">
<!--メインエリア開始-->
<div id="main">
<form id="frm_src">

<table class="hyou3" name="T1" id="T1">
  <tbody>
    <tr>
      <th>備品タイプ&nbsp;</th>
      <td><?php echo fnc_cbo_type("type","type",$_SESSION["ichiran"]["type"]); ?></td>
      <th>備品名</th>
      <td><input size="15" type="text" name="keikimei" maxlength="22" value="<?php echo _hs($_SESSION["ichiran"]["keikimei"]); ?>" /></td>
    </tr>
  </tbody>
</table>
</form>
</div>

<script type="text/javascript" src="fixed_midashi_src.js"></script>
<style type="text/css" media="screen">

div.scroll_div { overflow: scroll; }
</style>

★修正した箇所 ここから
<script src="jquery.tbodyscroll.js"></script>
<style>
th,td {width: 180px;}
</style>
★修正した箇所 ここまで

<body onLoad="FixedMidashi.create();">
<div class="scroll_div hyou2" id="tbldata" style="width:1168px;height:220px;">
</div>
</body>

<br>
<center>
<div name="Pagination" id="Pagination" class="pagination"></div>
</center>
<iframe id="ifm_post" height="0" width="0" src="" ></iframe>
</div>
<!--メインエリア終了-->
<!--フッターエリア開始-->
<?php echo file_get_contents('./common/inc_footer.php'); ?>
<!--フッターエリア終了-->
</body>
</html>

■aa_ichiran_list.php

<?php
$_argument = "lent_ichiran";

//アーギュメント取得
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    foreach($_POST as $_key => $_value) {
        $$_key = isset($_value) ? _ss($_value) : "";

        $_SESSION[$_argument][$_key] = $$_key;    //検索項目をセッションに格納
    }
}

//リスト生成
$sql_exe .= " ,(select mes_type from m_mestype where mes_code = d_measurehw.mes_code)  as mes_type ";
$sql_exe .= " ,(select maker_name from m_maker where maker_code = d_measurehw.maker_code)  as maker_name ";


$CN = new Clssqlserver;
$CN->DBConnect();
$sql .= ") as tbl ";

$CN->Query($sql_count.$sql);

$datanum = 0;//総件数取得
while ($CN->EOF() == true) {
    $datanum = $CN->GetFieldData('cnt_sql');
    $CN->MoveNext();
}

$page_disp_kensu = 10;    //1ページに表示する件数
//ページング
if (empty($page)) {
    $sql .= "WHERE rownum BETWEEN 1 AND ".($page_disp_kensu)." ";
} else {
    $sql .= "WHERE rownum BETWEEN " .((($page - 1) * $page_disp_kensu) + 1)." AND ".((($page - 1) * $page_disp_kensu) + $page_disp_kensu)."";
}

$CN->Query($sql_exe.$sql);
filelog("aa_ichiran_list.php:".$sql_exe.$sql);

★修正した箇所 ここから
★修正した箇所 ここまで

★修正した箇所 ここから
//ヘッダー部
$sort_keisokuki_img = _hs($sort_keisokuki_img);
$strHTML = <<<'eof'
<table id="tbl_list">
            <thead>
            <tr>
                <th scope="col" class="f-weight"><input type="checkbox" name="btn_on_check" id="btn_on_check" value="all" ></th>
                <th scope="col" class="f-weight">備品<br>タイプ</th>
                <th scope="col" class="f-weight"><a href="#" id="sort" name="keisokuki" param="{$sort_keisokuki_img}">備品名</a></th>
            </tr>
            </thead>
eof;
★修正した箇所 ここまで

$strHTML .= <<<'eof'
<tbody >
eof;

if ($datanum > 0) {

    while ($CN->EOF() == true) {
★修正した箇所　ここから
$strHTML .= "<tr ".$bgcolor.">";
$strHTML .= "<td align='center'>".$str_use_status."</td>";
$strHTML .= "<td class='break'>"._hs($CN->GetFieldData('mes_type'))."</td>";
$strHTML .= "<td class='break'>"._hs($CN->GetFieldData('mes_name'))."</td>";
$strHTML .= "</tr>";
★修正した箇所 ここまで
        $CN->MoveNext();

    }

} else {
    $strHTML .= <<<'eof'
    <tr><td colspan='28'>該当するデータがありません。</td></tr>
eof;
}

$CN->DBClose();

★修正した箇所　ここから
$strHTML .= <<<'eof'
    </tbody>
</table>
eof;

$output = array (
        'total_page' => ceil($datanum / $page_disp_kensu),
        'text' => $strHTML
);
★修正した箇所 ここまで

echo json_encode($output);
?>

hw_test

2018/03/14 00:05

すみません。調査して質問しておりますが、その経緯について詳しく記載するようにいたします。

m.ts10806

2018/03/14 00:40

これまでの質問と関連性があるので経緯を知ってもらうために、質問のリンクを置いた方が良いです。ただ、進んだ分だけ戻っているのでかなり状況は厳しいかなと。

hw_test

2018/03/14 00:55

これまでの経緯について追記しました。一部勘違いして理解していたのが原因のようですので、教えていただいた内容は再度こちらでも調べて理解していきます。

m.ts10806

2018/03/14 01:25

色々と質問を調整して書きましたが、PHPできちんと返すべきHTMLを作るというところを確立させるところと、プラグインの競合部分をなくす部分は特に注意してください。実現に向けては不要な記述が多すぎるように思います。

kei344

2018/03/14 01:44

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。

hw_test

2018/03/14 01:44

わかりました。注意して修正いたします。

m.ts10806

2018/03/14 02:00

私のコードをコピペしたようですが、それぞれ修正した箇所がどのような意図でどんな意味を持っているか理解されていますでしょうか？最初の質問から様々な回答やコメントをいただいていますが、目についたものだけを対応していて必要な部分をスルーしてしまっているため、だんだんコードがグチャグチャになっていっており、ゴールには全く向かっていないように思います。（これまでの回答やコメントを全てきちんと把握できていれば、おそらく今回の質問は立てなくて済んだはずなので）

hw_test

2018/03/14 02:20

初めのほうで指摘いただいた内容について勘違いした理解もありましたので、今一度これまでの指摘を見直してみます。

hw_test

2018/03/14 02:25

すみません。質問のソースがおかしいですね。

行動規範の内容に同意します

回答2件

ベストアンサー

前回の質問のコメントに書いて埋もれてしまっていて
今現在のソースに全く活かされていないようなので
対応されていない部分を解説込みで再掲します。

ichiran_list.phpにはtableのhtmlの出力のみ書く
javascript部分はjquery,プラグイン,実行の記述も含めて呼び出し元であるichiran.phpに書く

　JSONで受け取るのは表示したいHTMLのみであるべきです。
つまり、<html><head>～～～</head><body>XXXXX</body></html>のXXXXXの部分だけ書けば良い。
入れてしまうと以下のようなHTMLが出力されてしまい、HTMLとしておかしい。
正しくHTMLが組まれていないので、弊害が起きる可能性もあります。
※簡略化しています

HTML
1<html>
2 <head>
3  <title></title>
4 </head>
5 <body>
6  <div>
7   <!-- JSONで呼び出されるHTML -->
8   <html>
9    <head>
10     <title></title>
11    </head>
12    <body>
13       <table>
14       </table>
15    </body>
16   </html>
17   <!-- //JSONで呼び出されるHTML -->
18  </div>
19 </body>
20</html>

つまりJSONを渡す側は下記のように書いて、上記簡略化ソースで言えば

<table></table>に該当する部分だけを返すようにすれば良いです。

php
1～～DB接続・取得部分は省略しています
2
3//ヘッダー部
4$sort_keisokuki_img = _hs($sort_keisokuki_img);
5$strHTML = <<<'eof'
6<table id="tbl_list" class="demo">
7            <thead>
8            <tr>
9                <th scope="col" class="f-weight"><input type="checkbox" name="btn_on_check" id="btn_on_check" value="all" ></th>
10                <th scope="col" class="f-weight">備品<br>タイプ</th>
11                <th scope="col" class="f-weight"><a href="#" id="sort" name="keisokuki" param="{$sort_keisokuki_img}">備品名</a></th>
12            </tr>
13            </thead>
14eof;
15//↑提示のソースはそのままPHP関数が埋め込んであったので少し修正しています。
16// 何度か指摘していますがtableに入れているcellspacing="0" cellpadding="0" は不要かと。CSSで調整してください。
17
18～～～中間部分は省略しています（kei344さん指摘の部分はきちんと直してください）
19
20$strHTML .= <<<'eof'
21    </tbody>
22</table>
23eof;
24//↑提示のソースには</html>がありましたがこれは不要なので除外
25
26$output = array (
27        'total_page' => ceil($datanum / $page_disp_kensu),
28        'text' => $strHTML
29);
30
31echo json_encode($output);
32

実際にJavaScriptなりCSSなりが効いて動作を行うのは呼び出しもとであるichiran.php側で行われるべき。
つまり下記はichiran.phpに書く。

html
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
2<script src="jquery.tbodyscroll.js"></script>
3<script>
4$(document).ready(function() {
5    $(".demo").tbodyScroll({thead_height:"30px",tbody_height:"100px",head_bgcolor: "transparent",foot_bgcolor: "transparent"});
6});
7</script>
8<style>
9th,td {width: 180px;}
10</style>

tableにtbl_listというIDつけているのでdemoという明らかにテストっぽいのではなくIDあてたほうがいいんじゃないかなあ。

javascript
1$(document).ready(function() {
2    $("#tbl_list").tbodyScroll({thead_height:"30px",tbody_height:"100px",head_bgcolor: "transparent",foot_bgcolor: "transparent"});
3});

となると　 class="demo"　は不要ですね。
前回質問で「※demoの部分は任意の名前なので変更しても良いですがその場合はtableに記述する名前も同じにしてください」と書いた部分です。

html
1<table id="tbl_list">

他に考えられる要因（あくまで可能性のレベル）

親（ichiran.php）と子（aa_ichiran_list.php）でjQueryのバージョンが違う。

　導入したいプラグインはどちらのバージョンが対応しているか確認して統一すべき

親に様々なjQueryプラグインが読み込まれているので、干渉しあっている可能性がある。

　ブラウザの開発ツールのコンソールでエラー出てませんか？
→関係ないプラグインの読み込みや記述は全て一度削除し、今回のプラグインが正常に動作するか確認すること

その他アドバイス

いずれにしてもjquery.tbodyscroll.jsの使用方法が間違っているというより、PHPにおけるHTML出力部分でつまずいているので、まずは想定通りのHTMLを出すことに注力すべきです。
出たエラーだけを対応していても先には進みません。

前回の回答で他の方が「もつれた紐をほどくよりも最初からもつれないように端から巻いた方が絶対早い」「直すよりゼロから作り直したほうが早そう」と言ったコメントをいただいていますが、まさにそれです。

ちょこちょこ目の前のエラーを直すのではなく、必要な機能だけを単体でしっかり作って確認ができてからやっていった方が確実ですし、本質的なところから理解することができます。

ミニマムサンプルコード

本来、最初に作るべきは下記のようなミニマム構成のコードです。
おそらくある程度作ったものに対して後からこのプラグインを入れようとしたのもあり、
元々あったコードもあるかとは思いますが、必ず最小構成で、何の干渉もない状態のもので試した後に、
本来のコードに埋め込むようにしていくのが、何よりの近道です。

※動作確認はしてあります。が幅や見栄えなどは別途調整が必要です。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>test(json→tbodyscroll)</title>
6</head>
7<body>
8<button type="button">生成</button>
9<div id="tbldata"></div>
10<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
11<script src="./js/jquery.tbodyscroll.js"></script>
12<script>
13$(function() {
14	$("button").click(function(){
15        //リスト表示
16        $.post(
17        	"./m.php"
18        , function(data) {
19        	$('[id=tbldata]').html(data.text);
20        	$("#tbl_list").tbodyScroll({thead_height:"30px",tbody_height:"100px",head_bgcolor: "transparent",foot_bgcolor: "transparent"});
21        },
22        "json"
23      );
24   });
25});
26</script>
27</body>
28</html>

m.php

php
1<?php
2
3$strHTML = <<<EOF
4<table id="tbl_list">
5    <thead>
6        <tr>
7            <th><input type="checkbox" name="btn_on_check" id="btn_on_check" value="all" ></th>
8            <th>備品<br>タイプ</th>
9            <th>備品名</th>
10        </tr>
11    </thead>
12    <tbody>
13EOF;
14
15for($i=1;$i<=100;$i++){
16    $strHTML .= <<<EOF
17        <tr>
18            <td>ステータス{$i}</td>
19            <td>No.{$i}</td>
20            <td>備品名{$i}</td>
21        </tr>
22EOF;
23}
24
25$strHTML .= <<<EOF
26    </tbody>
27</table>
28EOF;
29$output = array (
30    'total_page' => 100,
31    'text' => $strHTML
32);
33
34echo json_encode($output);

ポイント：

PHPでエラーは起こさない（超大前提）
json返す側は必要なhtmlだけ返す（tableのみ）
jsonで返しているので、jsonで受け取るようにする

　evalJSONなくても$.postの引数でjsonを指定すれば取れます。

jQueryは削られた機能の関係からこのバージョン（1.4.3）を利用する

　このスクロールプラグインで利用しているmsie指定が1.9から使えなくなった

$.postは非同期で実行しているためHTML構築時ではテーブルは存在しない。

　存在しないタイミングでプラグインを呼び出しては効果がないので、テーブルがhtml上に現れた後にプラグインをそのテーブルに対して行う

投稿2018/03/14 01:04

編集2018/03/14 04:50

m.ts10806

総合スコア80850

hw_test

2018/03/14 01:59

回答ありがとうございます。指摘いただいた内容を反映してみました。これから動作確認してみます。「JSONで受け取るのは表示したいHTMLのみであるべき」こちらについて、私が間違った理解をしていたため大変参考になりました。おっしゃるっとおり、HTML出力がもやっとした部分が多く、調べながら進めているため多く説明させてしまいすみません。

m.ts10806

2018/03/14 02:02 編集

動作確認は良いとしても、回答のコード以外の部分が全く反映されていないのでほぼ進んでいません。 kei344さんの回答もあまり参考にされている感がありませんし。やはり最初から必要な部分のみで作り直すべきではないでしょうか。このままだと何日頑張ってもゴールには向かわないと思いますよ。

hw_test

2018/03/14 02:11

そちらについては、私のローカルコードだけ修正しておりました。今こちらのコードにも反映いたしました。皆さんの指摘を参考にしてもう少し動作確認し自ら修正してみます。最悪作り直しでしょうか。

m.ts10806

2018/03/14 02:19

以下、対応されていません。 > つまり、<html><head>～～～</head><body>XXXXX</body></html>のXXXXXの部分だけ書けば良い。 →<html><head>～～～</head><body>部分（出力したいtable以外のhtml）が残っている。 > 他に考えられる要因（あくまで可能性のレベル）のところ。あそこまでプラグインが大量に読み込まれていては何が原因か分かりません。 jQueryの違うバージョン同時に呼ばれているので干渉しあっていてもおかしくありません。 > 最悪作り直しでしょうか。以前から回答者みなさんがすすめています。最初の段階で必要なのはjQuery本体、tbodyscrollプラグイン、JSONを呼び出す記述、JSONで呼ばれるPHP（内容は簡略化したものが良い）　だけです。確かに作り直しは面倒だと感じるかもしれません。当初からですが、小手先だけではどうにもならない状態のままきています。今の小手先だけでちょこちょこ修正していって新たに問題が発生して、それを対応して・・・を延々と続けていく方がよっぽど面倒です。メリハリがないので自身のストレス蓄積にもつながります。こういうものはスクラップ＆ビルドが最も近道です。

hw_test

2018/03/14 02:49

プラグインについても気になりますので、それも含め確認してみます。

m.ts10806

2018/03/14 03:21

どこにも内容が定義されていないのにいきなり使われている変数もあるようなので、その辺りも精査した方が良いかと。

hw_test

2018/03/14 03:29

はい。変数などの定義は意図的に省略させていただいております。現状、エラーなく動作するようにはなったのですが、固定だけがうまくいっていません。 jquery.tbodyscroll.jsの配置も問題なく、正常に読めているようですが、1つの画面内でテーブルを呼び出しているために以下のものが効かないということはこれまでにあったりするのでしょうか？ https://webkaru.net/jquery-plugin/tbodyscroll/

m.ts10806

2018/03/14 03:57

>1つの画面内でテーブルを呼び出しているためにすみません。仰る意味がよく分かりません。

m.ts10806

2018/03/14 04:07

いずれにしても省略部分が多いと回答する側の再現確認ができません。結局のところ、他のプラグインの干渉はありそうです。あとはtbodyScrollを呼び出すタイミングとかですかね。どこで呼び出されているか分かりませんが fncsrc()が呼び出された後にtableができあがっているわけですよね。一方で、現在のソースではtbodyScrollは $(document).ready(function() { }); の中で呼び出されています。この中に書くことで「ドキュメントの読み込みが終わったら」呼び出されるようになります。つまり、ドキュメント読み込みが終わったときに#tbl_listがなければ、tbodyScrollは効かない　ということになります。該当のtableがHTML上に表示されたあと、つまり $('[id=tbldata]').html(obj.text); の後に入れてみてはいかがでしょうか。

hw_test

2018/03/14 04:08

うまく説明できずすみません。今回のようにaa_ichiran.phpからaa_ichiran_list.phpのtableを呼び出すというような場合です。

m.ts10806

2018/03/14 04:12

> 今回のようにaa_ichiran.phpからaa_ichiran_list.phpのtableを呼び出すというような場合です。そんなことはありません。正しくHTMLが構築できていて正しくプラグインをあてられていたら動的にHTMLを出力する場合でも問題なく利用できます。

hw_test

2018/03/14 04:48

そうなのですね。 tbodyScrollを呼び出すのを$('[id=tbldata]').html(obj.text);の後にしましたら、EdgeとChromeでは固定できました。ありがとうございます。しかし、IEだと固定されないので調べてみます。

m.ts10806

2018/03/14 04:50

ミニマムサンプルコードを回答に追記しました。最初はこういう形で作って確認してからいくべきですね。私のほうはIE11で確認できています。

m.ts10806

2018/03/14 04:59

おおよそ当該質問は解決して次のステップに進めたようなのでこの辺りで当該質問は解決済みとした方が良いですね。私の提示したミニマムサンプルコードとポイントあたりは、次に何かしら導入する際の参考としてみてください。

hw_test

2018/03/14 05:07

ありがとうございます。だいぶ理解でき、大変参考になる意見をいただけました。コードも参考にさせていただきます。またなにかありましたらよろしくお願いします。

m.ts10806

2018/03/14 05:07

解決のキッカケとなり、また理解も進んだようで何よりです。

行動規範の内容に同意します

"._hs($CN->GetFieldData('mes_type'))."などと表示されています。

そう表示されるように書いているから。

PHP
1        $strHTML .= <<<'eof'
2        <tr ".$bgcolor.">
3            <td align='center'>".$str_use_status."</td>
4            <td class='break'>"._hs($CN->GetFieldData('mes_type'))."</td>
5            <td class='break'>"._hs($CN->GetFieldData('mes_name'))."</td>
6          </tr>
7eof;

変数の中身が入っているなら、とりあえずこう書けば中身が表示されると思います。

PHP
1        $strHTML .= "<tr ".$bgcolor.">";
2        $strHTML .= "<td align='center'>".$str_use_status."</td>";
3        $strHTML .= "<td class='break'>"._hs($CN->GetFieldData('mes_type'))."</td>";
4        $strHTML .= "<td class='break'>"._hs($CN->GetFieldData('mes_name'))."</td>";
5        $strHTML .= "</tr>";

投稿2018/03/13 11:44

kei344

総合スコア69400

hw_test

2018/03/14 00:07

ご回答ありがとうございます。こちらで以前教えていただいた<<<'eof'の使い方を一部勘違いしておりました。データ部では<<<'eof'を使うと文字列そのものが表示されてしまうのですね。参考URLのほうの固定対応が効かないのはほかに原因がありますでしょうか？ jquery.tbodyscroll.jsの使用について調べてみましたが自分では解決できませんでした。

kei344

2018/03/14 01:32

> 固定対応が効かないのはほかに原因がありますでしょうか？ HTMLの構造がそもそもおかしいので、本でも買って勉強されることをお勧めします。ざっとコードを見た感じJavaScriptもあまりわかっていない様子ですね。jQueryで呼び出すような複雑なことをせず、PHPだけでテーブルを出力するように1から書き直すことをお勧めします。

hw_test

2018/03/14 05:08

わかりました。まだ理解できていないということがよくわかりました。回答ありがとうございました。

行動規範の内容に同意します

あなたの回答