質問編集履歴
4
エラー、コード詳細追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -29,21 +29,11 @@
|
|
|
29
29
|
その後にText-Empty Text Nodeと表示があり、画面には反映されていません。
|
|
30
30
|
この部分が問題点かと思います。
|
|
31
31
|
|
|
32
|
-
###
|
|
32
|
+
###エラー
|
|
33
|
+
SCRIPT5007: Unable to get property 'style' of undefined or null reference
|
|
33
|
-
|
|
34
|
+
jquery.min.js, line 2 character 31689
|
|
34
|
-
ただ具体的な記載方法が分からず、アドバイス頂けますと大変助かります。
|
|
35
35
|
|
|
36
|
-
・<div class='columns'>内などの
|
|
37
|
-
document.getElementByIdの書き方
|
|
38
36
|
|
|
39
|
-
・function update_table()内の
|
|
40
|
-
getElementsByTagNameの書き方
|
|
41
|
-
|
|
42
|
-
（jsの親/子の指定などが必要？）
|
|
43
|
-
|
|
44
|
-
*3.1.1/jquery.min.jsを使用してますが
|
|
45
|
-
IE9以降は対応していると思います
|
|
46
|
-
|
|
47
37
|
よろしくお願いします。
|
|
48
38
|
|
|
49
39
|
### 該当ソースコード 一部抜粋
|
3
コードと問題点の詳細を追加しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -41,6 +41,9 @@
|
|
|
41
41
|
|
|
42
42
|
（jsの親/子の指定などが必要？）
|
|
43
43
|
|
|
44
|
+
*3.1.1/jquery.min.jsを使用してますが
|
|
45
|
+
IE9以降は対応していると思います
|
|
46
|
+
|
|
44
47
|
よろしくお願いします。
|
|
45
48
|
|
|
46
49
|
### 該当ソースコード 一部抜粋
|
2
コード、問題点などの詳細を追加しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,48 +1,168 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
|
-
他の方が記載したコードを運用することになったのですが、
|
|
4
|
-
フロントエンドの知識が
|
|
3
|
+
フロントエンドの知識があまりないため質問させて頂きます。
|
|
5
4
|
|
|
5
|
+
webサービスなのですが、
|
|
6
|
-
|
|
6
|
+
ブラウザの違いにより画面の表示が上手くいかない部分があります。
|
|
7
|
+
|
|
7
|
-
IE10（9,8）だと表示されなくなってしまいま
|
|
8
|
+
具体的には、chromeだと問題なく表示されるのですが、IE10（9,8）だと表示されなくなってしまいます。
|
|
8
9
|
(ubuntuなのでvirtualboxにIE10を入れています）
|
|
9
|
-
*windowsOS上のIEでも表示がされないため、virtualboxの問題
|
|
10
|
+
*windowsOS上のIEでも表示がされないため、virtualboxの問題は無さそうです。
|
|
10
11
|
|
|
11
|
-
検証画面で確認すると該当箇所はdocument.getElementById（最初のhref内のonclick等）
|
|
12
|
-
を使用している部分なので、
|
|
13
|
-
|
|
12
|
+
下記のコードは長くなので一部を抜粋したものです。
|
|
14
|
-
（恐らく類似 https://teratail.com/questions/82363）
|
|
15
13
|
|
|
14
|
+
###表示されない部分
|
|
16
|
-
|
|
15
|
+
<div class='columns'>以下の部分がまるまる表示がされていません。
|
|
17
16
|
|
|
17
|
+
chromeでは問題なく表示されていることから、文法等の間違いではなく、
|
|
18
|
-
IE
|
|
18
|
+
IE仕様に適用出来ていない点に問題があると感じています。
|
|
19
|
-
具体的にどのような手順で書き直すのか分からず質問させて頂きました。
|
|
20
19
|
|
|
21
|
-
IE仕様に書き直すにはどのような方法がありますでしょうか。
|
|
22
20
|
|
|
23
|
-
###
|
|
21
|
+
###開発者画面について
|
|
22
|
+
下記の開発者画面（chrome）で確認
|
|
24
23
|
|
|
25
|
-
javascript&html
|
|
26
|
-
```javascript
|
|
27
|
-
<div class='columns'>
|
|
28
|
-
<div id='div_link_{{request.id}}' class='column'>
|
|
29
|
-
<a href="/check_model?page=requests&model={{request.model_id}}&request{{request.id}}"
|
|
30
|
-
onClick='document.getElementById("div_link_{{request.id}}").style="display: none";
|
|
31
|
-
document.getElementById("div_dummy_{{request.id}}").style="";'>
|
|
32
|
-
|
|
24
|
+
<td>{{request.status_name}}</td>の部分など値[test01]が取得できており、画面に表示もされています。
|
|
33
25
|
|
|
26
|
+
開発者画面（IE）で確認
|
|
27
|
+
|
|
28
|
+
最下段で値[test01]は取得できていますが、
|
|
29
|
+
その後にText-Empty Text Nodeと表示があり、画面には反映されていません。
|
|
30
|
+
この部分が問題点かと思います。
|
|
31
|
+
|
|
32
|
+
###原因、怪しい点
|
|
33
|
+
調べてみると、IEでは下記の記載方式から変更の必要があるのかもしれません。
|
|
34
|
+
ただ具体的な記載方法が分からず、アドバイス頂けますと大変助かります。
|
|
35
|
+
|
|
36
|
+
・<div class='columns'>内などの
|
|
37
|
+
document.getElementByIdの書き方
|
|
38
|
+
|
|
39
|
+
・function update_table()内の
|
|
40
|
+
getElementsByTagNameの書き方
|
|
41
|
+
|
|
42
|
+
（jsの親/子の指定などが必要？）
|
|
43
|
+
|
|
44
|
+
よろしくお願いします。
|
|
45
|
+
|
|
46
|
+
### 該当ソースコード 一部抜粋
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<div id="table_area">
|
|
50
|
+
<table class="table" id="table" style="width: 100%;">
|
|
51
|
+
...
|
|
52
|
+
|
|
53
|
+
{% for group in group_list %}
|
|
54
|
+
{% for status_id, status_name in status_display.items() %}
|
|
55
|
+
<tbody class="table-body" id="table-g{{ group.id }}-s{{ status_id }}" style="display: none">
|
|
56
|
+
{% for request in request_list %}
|
|
57
|
+
<thead>
|
|
58
|
+
・・・
|
|
59
|
+
|
|
60
|
+
<div class='columns'>
|
|
61
|
+
<div id='div_link_{{request.id}}' class='column'>
|
|
62
|
+
<a href="/check_model?page=requests&model={{request.model_id}}&request={{request.id}}"
|
|
63
|
+
onClick='document.getElementById("div_link_{{request.id}}").style="display: none";
|
|
64
|
+
document.getElementById("div_dummy_{{request.id}}").style="";'{{request.request_name}}</a>
|
|
34
|
-
|
|
65
|
+
{% if request.status_id == 0 %}
|
|
66
|
+
<button id="btn_add" class="animatebutton"
|
|
35
|
-
|
|
67
|
+
onclick="document.getElementById('overlay_update_{{request.id}}').style.visibility = 'visible';"
|
|
36
|
-
|
|
68
|
+
onmouseover='document.getElementById("icon_setting_{{request.id}}").className = "fa fa-cog has-text-dark";'
|
|
37
|
-
|
|
69
|
+
onmouseout='document.getElementById("icon_setting_{{request.id}}").className = "fa fa-cog has-text-info";'>
|
|
70
|
+
・・・
|
|
71
|
+
</thead>
|
|
72
|
+
<tbody>
|
|
73
|
+
・・・
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
<div id='div_dummy_{{request.id}}' class='column' style='display: none'>
|
|
77
|
+
{{request.request_name}}
|
|
78
|
+
<span class='icon' style="margin-left:10px">
|
|
79
|
+
<i id="icon_load" class="fa fa-refresh fa-spin"></i>
|
|
80
|
+
</span>
|
|
81
|
+
</div>
|
|
82
|
+
<td>{{request.status_name}}</td>
|
|
83
|
+
<td>{{request.model_name}}</td>
|
|
84
|
+
<td>{{request.arch_name}}</td>
|
|
85
|
+
<td>{{request.create_at}}</td>
|
|
86
|
+
<td>{{request.update_at}}</td>
|
|
87
|
+
</tbody>
|
|
88
|
+
</table>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
92
|
+
<script language="javascript" type="text/javascript">
|
|
93
|
+
var loading = false;
|
|
94
|
+
update_table();
|
|
95
|
+
|
|
96
|
+
・・・
|
|
97
|
+
|
|
98
|
+
function update_table(){
|
|
99
|
+
var ul = document.getElementById("ul_status");
|
|
100
|
+
var items = ul.getElementsByTagName("li");
|
|
101
|
+
|
|
102
|
+
var groups = document.getElementById("group_list");
|
|
103
|
+
var selected_group_id = groups[groups.selectedIndex].value;
|
|
104
|
+
|
|
105
|
+
for (var i = 0; i < items.length; ++i) {
|
|
106
|
+
for (var j = 0; j < groups.length; ++j) {
|
|
107
|
+
if(items[i].className == "is-active" && groups[j].value == selected_group_id){
|
|
108
|
+
var table = document.getElementById("table-g" + groups[j].value + "-s" + items[i].value);
|
|
109
|
+
table.style="";
|
|
110
|
+
} else{
|
|
111
|
+
var table = document.getElementById("table-g" + groups[j].value + "-s" + items[i].value);
|
|
112
|
+
table.style="display: none";
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
開発者 検証画面
|
|
120
|
+
|
|
121
|
+
### 開発者画面 chrome
|
|
122
|
+
|
|
123
|
+
```html
|
|
124
|
+
<div id="table_area">
|
|
125
|
+
<table class="table" id="table" style="width: 100%;">
|
|
126
|
+
<thead>・・・</thead>
|
|
127
|
+
<tbody class="table-body" id="table-g1-s2" style="display: none;">
|
|
128
|
+
|
|
129
|
+
<div class="columns">
|
|
130
|
+
<div id="div_link_33" class="column">
|
|
131
|
+
<a href="/check_model?page=requests&model=1&request=33" onclick="document.getElementById("div_link_33").style.display="none";
|
|
132
|
+
document.getElementById("div_dummy_33").style="";">test01</a>
|
|
133
|
+
</div>
|
|
134
|
+
|
|
135
|
+
<div id="div_dummy_33" class="column" style="display: none">
|
|
136
|
+
test01
|
|
38
|
-
|
|
137
|
+
<span class="icon" style="margin-left:10px">
|
|
39
|
-
|
|
138
|
+
<i id="icon_load" class="fa fa-refresh fa-spin"></i>
|
|
40
139
|
</span>
|
|
41
|
-
</button>
|
|
42
140
|
|
|
141
|
+
<td>済</td>
|
|
142
|
+
<td>light</td>
|
|
143
|
+
<td>32</td>
|
|
144
|
+
<td>2018-04-30 01:04:19</td>
|
|
145
|
+
<td>2018-04-30 01:04:19</td>
|
|
146
|
+
</tbody>
|
|
147
|
+
</table>
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
### 開発者画面 IE
|
|
151
|
+
```html
|
|
152
|
+
<div id="table_area">
|
|
153
|
+
Text-Empty Text Node
|
|
154
|
+
・・・
|
|
155
|
+
<table class="table" id="table" style="width: 100%;">
|
|
156
|
+
Text-Empty Text Node
|
|
157
|
+
・・・
|
|
43
|
-
<
|
|
158
|
+
<tbody class="table-body" id="table-g1-s2" style="display: none;">
|
|
159
|
+
Text-Empty Text Node
|
|
160
|
+
・・・
|
|
44
|
-
<div class="
|
|
161
|
+
<div class="columns">
|
|
162
|
+
Text-Empty Text Node
|
|
45
|
-
・
|
|
163
|
+
・・・
|
|
164
|
+
<a onclick="document.getElementById("div_link_33").style.display="none";document.getElementById("div_link_33").style="";"href="/check_model?page=requests&model=1&request=33>
|
|
165
|
+
Text - test01
|
|
166
|
+
Text-Empty Text Node
|
|
46
|
-
・
|
|
167
|
+
・・・
|
|
47
|
-
・
|
|
48
168
|
```
|
1
タグ変更：python
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|