javascript IEで表示されない

Question

前提・実現したいこと

フロントエンドの知識があまりないため質問させて頂きます。

webサービスなのですが、
ブラウザの違いにより画面の表示が上手くいかない部分があります。

具体的には、chromeだと問題なく表示されるのですが、IE10（9,8）だと表示されなくなってしまいます。
(ubuntuなのでvirtualboxにIE10を入れています）
*windowsOS上のIEでも表示がされないため、virtualboxの問題は無さそうです。

下記のコードは長くなので一部を抜粋したものです。

###表示されない部分

<div class='columns'>以下の部分がまるまる表示がされていません。

chromeでは問題なく表示されていることから、文法等の間違いではなく、
IE仕様に適用出来ていない点に問題があると感じています。

###開発者画面について
下記の開発者画面（chrome）で確認

<td>{{request.status_name}}</td>の部分など値[test01]が取得できており、画面に表示もされています。

開発者画面（IE）で確認

最下段で値[test01]は取得できていますが、
その後にText-Empty Text Nodeと表示があり、画面には反映されていません。
この部分が問題点かと思います。

###エラー
SCRIPT5007: Unable to get property 'style' of undefined or null reference
jquery.min.js, line 2 character 31689

よろしくお願いします。

該当ソースコード 一部抜粋

<div id="table_area">
	<table class="table" id="table" style="width: 100%;">
	  ...
		  
　{% for group in group_list %}
  　{% for status_id, status_name in status_display.items() %}
    　<tbody class="table-body" id="table-g{{ group.id }}-s{{ status_id }}" style="display: none">
    　　{% for request in request_list %}
　　　　　　<thead>
　　　　　    ・・・

　<div class='columns'>
  　<div id='div_link_{{request.id}}' class='column'>
    　<a href="/check_model?page=requests&model={{request.model_id}}&request={{request.id}}"
	　　　onClick='document.getElementById("div_link_{{request.id}}").style="display: none";
   		　document.getElementById("div_dummy_{{request.id}}").style="";'{{request.request_name}}</a>
		　　{% if request.status_id == 0 %}
			<button id="btn_add" class="animatebutton"
         		onclick="document.getElementById('overlay_update_{{request.id}}').style.visibility = 'visible';"																
                 onmouseover='document.getElementById("icon_setting_{{request.id}}").className = "fa fa-cog has-text-dark";'
         		onmouseout='document.getElementById("icon_setting_{{request.id}}").className = "fa fa-cog has-text-info";'>															  
　　　　　　　　　・・・
　　　　　</thead>
　　　<tbody>
　・・・																	
</div>

<div id='div_dummy_{{request.id}}' class='column' style='display: none'>
	{{request.request_name}}
	<span class='icon' style="margin-left:10px">
		<i id="icon_load" class="fa fa-refresh fa-spin"></i>
	</span>
</div>
	<td>{{request.status_name}}</td>
	<td>{{request.model_name}}</td>
	<td>{{request.arch_name}}</td>
	<td>{{request.create_at}}</td>
	<td>{{request.update_at}}</td>
　　</tbody>
　</table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
　　var loading = false;
　　update_table();
　　
　　・・・
  
  function update_table(){
	var ul = document.getElementById("ul_status");
    var items = ul.getElementsByTagName("li");
	
	var groups = document.getElementById("group_list");
	var selected_group_id = groups[groups.selectedIndex].value;
	
	for (var i = 0; i < items.length; ++i) {
		for (var j = 0; j < groups.length; ++j) {
			if(items[i].className == "is-active" && groups[j].value == selected_group_id){
				var table = document.getElementById("table-g" + groups[j].value + "-s" + items[i].value);
				table.style="";
			} else{
				var table = document.getElementById("table-g" + groups[j].value + "-s" + items[i].value);
				table.style="display: none";
			}
		}
    }
  }

開発者　検証画面

開発者画面　chrome

<div id="table_area">
<table class="table" id="table" style="width: 100%;">
  <thead>・・・</thead>
　<tbody class="table-body" id="table-g1-s2" style="display: none;">

　<div class="columns">
  　<div id="div_link_33" class="column">
  　<a href="/check_model?page=requests&amp;model=1&amp;request=33" onclick="document.getElementById(&quot;div_link_33&quot;).style.display=&quot;none&quot;;
document.getElementById(&quot;div_dummy_33&quot;).style=&quot;&quot;;">test01</a>
　</div>

<div id="div_dummy_33" class="column" style="display: none">
test01
　　<span class="icon" style="margin-left:10px">
　　　　<i id="icon_load" class="fa fa-refresh fa-spin"></i>
　　</span>

　　<td>済</td>
　　<td>light</td>
　　<td>32</td>
　　<td>2018-04-30 01:04:19</td>
　　<td>2018-04-30 01:04:19</td>
　</tbody>
</table>

開発者画面　IE

<div id="table_area">
  Text-Empty Text Node
    ・・・
  <table class="table" id="table" style="width: 100%;">
  Text-Empty Text Node
    ・・・
    <tbody class="table-body" id="table-g1-s2" style="display: none;">
    Text-Empty Text Node
      ・・・
      <div class="columns">
      Text-Empty Text Node
        ・・・
         <a onclick="document.getElementById("div_link_33").style.display="none";document.getElementById("div_link_33").style="";"href="/check_model?page=requests&amp;model=1&amp;request=33>
            Text - test01
          Text-Empty Text Node
            ・・・　　

Comments

[maisumakun]

ふつうのHTMLには入らない{{...}}というような構文がありますが、これは何で処理していますでしょうか。

[m.ts10806]

バックエンドはどの言語でしょうか？（RubyやPythonのように見えます）

[MF_19]

mts10806さん　はい、仰る通りpythonを使用しています。

[m.ts10806]

タグに追加しておいてください。

[MF_19]

maisumakunさん　{{request.id}}等についてはflaskというpythonのweb application flame workを使っていまして動的に変わる値を取得しています。　例えばここのページのURLが[xxx?page=requests&request=1]だった場合、ここの値は[1]になります。

[MF_19]

mts10806さん　タグが最高５個まででしたので、chromeタグを削除してpythonタグを追加しました。

Answer 1

htmlエスケープされていて&などとなってしまっているので、それをHTMLエスケープさせないようにする必要があると思います。
あと開発者画面IEのほうで気になるのが下記ですね。

<a onclick="document.getElementById("div_link_33").style.display="none";document.getElementById("div_link_33").style="";"href="/check_model?page=requests&amp;model=1&amp;request=33>

javascriptのコードがそのまま入り込んでしまっていますが、大丈夫でしょうか？
外だしされたほうが良いかと思いますし、もしそのままonclick=""内で利用するのであれば、"がかぶっていますので正しく処理が読みこれませんね。
'に変えるなど正しく認識させる対応が必要です。

外だしサンプル

<a href="/check_model?page=requests&model={{request.model_id}}&request={{request.id}}"
    　　　onClick='test("{{request.id}}")'>{{request.request_name}}</a>

function test(requestid){
 document.getElementById("div_link_"+requestid).style="display: none";
 document.getElementById("div_dummy_"+requestid).style="";
}

※実際はtestではなく処理名や機能名をきちんとつけてください。

というか組んでて気づいたんですが、

<a href="/check_model?page=requests&model={{request.model_id}}&request={{request.id}}"
    　　　onClick='document.getElementById("div_link_{{request.id}}").style="display: none";
           　document.getElementById("div_dummy_{{request.id}}").style="";'{{request.request_name}}</a>

<a>の > ←これ、ないですね。
そこが原因だったりして。

Comments

[MF_19]

ご回答ありがとうございます。　現状取り急ぎ下記に修正しました。
test01の文字が画面に出れば良いのですが、反応していません。
```html
<a onclick='document.getElementById("div_link_33").style.display="none";document.getElementById("div_link_33").style="";' href="/check_model?page=requests&amp;model=1&amp;request=33">test01</a>
```

[m.ts10806]

コメントではコードブロックが使えないのでコードブロックが使いたい場合は質問本文に追記してください。

取り急ぎでは枝葉のみとなってしまい解決まで遠のくばかりなので、着実に対応してください。

というか適当なfunctionを用意してそちらに記載する外だしの形の方が良いような。
htmlエスケープ部分がまだ大量に残ってそうなので、その部分は対応されたほうが良いです。

[MF_19]

失礼しました。ご回答ありがとうございます。
あと、すいません。
js,htmlをほぼ触ったことがなかったので、調べながらですがあまり理解出来ていません。

もし可能でしたら、参考コードを見せて頂けると大変助かります。

[m.ts10806]

それは良いのですが、申し訳ないのですが、
さすがにボリュームもあるため全てを提示することは出来ません。

まずは「<div class='columns'>以下の部分がまるまる表示がされていません。 」部分が今どうなっているかを教えてください。

[m.ts10806]

htmlエスケープ部分がまだ大量に残ってる部分はjs,htmlとは関係ないところなので、ご自身で対応いただければと思います。（私の方にPython環境が手元にないですし、おそらく調べればすぐ出てきます）

Answer 2

とりあえずこうしてみてください
onClick='document.getElementById("div_link_{{request.id}}").style.display="none"'

あとはテンプレ(?)をご利用であれば、処理後の生のHTMLを表示することは
可能でしょうか？

Comments

[MF_19]

yambejpさん
ご回答ありがとうございます。また返信が遅くなってしまい申し訳ありません。

頂いたコードを実行しました。
{{request.id}}に値は入力されているのですが、画面（IE10）には表示がされませんでした。

実行後のソースコード

```html
<div class='columns'>
<div id='div_link_33' class='column'>
<a href="/check_model?page=requests&model=1&request=33" onClick='document.getElementById("div_link_33").style.display="none"; document.getElementById("div_dummy_33").style="";'>test01</a>

<button id="btn_add" class="animatebutton" onclick="document.getElementById('overlay_update_33').style.visibility = 'visible';" onmouseover='document.getElementById("icon_setting_33").className = "fa fa-cog has-text-dark";'
onmouseout='document.getElementById("icon_setting_33").className = "fa fa-cog has-text-info";'>

<span class="icon" style="margin-top:2px; margin-left:-10px">
<i id="icon_setting_33" class="fa fa-cog has-text-info"></i>
</span>
</button>

<div id='overlay_update_33' class='overlay' style="visibility:hidden;">
<div class="middlediv">
　・
　・
　・
```

Answer 3

みなさん、ご回答ありがとうございました。
mts10806さんに色々ヒントを頂き、追加で変更を行いました。

chromeとIE10ではstyle.displayの挙動が違う点が主な原因でした。
style.visibilityなどを使い分けて対処したところ表示がされました。

まだ完璧な挙動ではないですが今回の表示に関しては行えたので、締めさせて頂きます。