質問編集履歴

4

エラー、コード詳細追加

2018/05/01 01:55

投稿

MF_19
MF_19

スコア27

test CHANGED
File without changes
test CHANGED
@@ -60,33 +60,13 @@
60
60
 
61
61
 
62
62
 
63
- ###原因、怪しい点
63
+ ###エラー
64
-
65
- 調べてみると、IEでは下記の記載方式から変更の必要があるのかもしれません。
64
+
66
-
67
- ただ具体的な記載方法が分からず、アドバイス頂けますと大変助かります。
68
-
69
-
70
-
71
- ・<div class='columns'>内などの
65
+ SCRIPT5007: Unable to get property 'style' of undefined or null reference
72
-
73
-  document.getElementByIdの書き方
66
+
74
-
75
-
76
-
77
- ・function update_table()内の
67
+ jquery.min.js, line 2 character 31689
78
-
79
-  getElementsByTagNameの書き方
68
+
80
-
81
-
82
-
83
- (jsの親/子の指定などが必要?)
69
+
84
-
85
-
86
-
87
- *3.1.1/jquery.min.jsを使用してますが
88
-
89
- IE9以降は対応していると思います
90
70
 
91
71
 
92
72
 

3

コードと問題点の詳細を追加しました。

2018/05/01 01:55

投稿

MF_19
MF_19

スコア27

test CHANGED
File without changes
test CHANGED
@@ -84,6 +84,12 @@
84
84
 
85
85
 
86
86
 
87
+ *3.1.1/jquery.min.jsを使用してますが
88
+
89
+ IE9以降は対応していると思います
90
+
91
+
92
+
87
93
  よろしくお願いします。
88
94
 
89
95
 

2

コード、問題点などの詳細を追加しました

2018/04/30 11:59

投稿

MF_19
MF_19

スコア27

test CHANGED
File without changes
test CHANGED
@@ -2,94 +2,334 @@
2
2
 
3
3
 
4
4
 
5
- 他の方が記載したコードを運用することになったのですが、
6
-
7
- フロントエンドの知識が乏しいため質問させて頂きます。
5
+ フロントエンドの知識があまりないため質問させて頂きます。
6
+
7
+
8
+
8
-
9
+ webサービスなのですが、
9
-
10
-
10
+
11
- chromeだと問題なく表示される部分があるのでが、
11
+ ブラウザの違いにより画面の表示が上手くいかない部分がありま
12
-
12
+
13
+
14
+
13
- IE10(9,8)だと表示されなくなってしまいました
15
+ 具体的には、chromeだと問題なく表示されるのですが、IE10(9,8)だと表示されなくなってしまいま
14
16
 
15
17
  (ubuntuなのでvirtualboxにIE10を入れています)
16
18
 
17
- *windowsOS上のIEでも表示がされないため、virtualboxの問題は無さそうです。
18
-
19
-
20
-
21
- 検証画面で確認すると該当箇所document.getElementById(最初href内onclick等)
22
-
23
- を使用している部分なので、
24
-
25
- 恐らくここに問題があるのかと思調べてみると下記のような質問も出てきました。
26
-
27
- (恐らく類似 https://teratail.com/questions/82363)
28
-
29
-
30
-
31
- 見様見真似xmlDocどに書き換えてみましたが上手いっていません。
32
-
33
-
34
-
35
- IEとdocument.getElementByIdの間に問題があると思いますが、
36
-
37
- 具体的にどのような手順で書き直すのか分からず質問させて頂きました。
38
-
39
-
40
-
41
- IE仕様に書き直すにはどような方法がありますしょうか。
42
-
43
-
44
-
45
- ### 該当ソースコード
46
-
47
-
48
-
49
- javascript&html
50
-
51
- ```javascript
52
-
53
- <div class='columns'>
54
-
55
-  <div id='div_link_{{request.id}}' class='column'>
56
-
57
-   <a href="/check_model?page=requests&model={{request.model_id}}&request{{request.id}}"
58
-
59
- onClick='document.getElementById("div_link_{{request.id}}").style="display: none";
60
-
61
- document.getElementById("div_dummy_{{request.id}}").style="";'>
62
-
63
-   {{request.request_name}}</a>
64
-
65
-
66
-
67
-   {% if request.status_id == 0 %}
68
-
69
-   <button id="btn_add" class="animatebutton"   onclick="document.getElementById('overlay_update_{{request.id}}').style.visibility   = 'visible';"
70
-
71
-   onmouseover='document.getElementById("icon_setting_{{request.id}}").className =   "fa fa-cog has-text-dark";'
72
-
73
-   onmouseout='document.getElementById("icon_setting_{{request.id}}").className = "fa   fa-cog has-text-info";'>
74
-
75
-    <span class="icon" style="margin-top:2px; margin-left:-10px">
76
-
77
-    <i id="icon_setting_{{request.id}}" class="fa fa-cog has-text-info"></i>
19
+ *windowsOS上のIEでも表示がされないため、virtualboxの問題は無さそうです。
20
+
21
+
22
+
23
+ 下記のコード長くなで一部を抜粋したもです。
24
+
25
+
26
+
27
+ ###表示されな部分
28
+
29
+ <div class='columns'>以下の部分がまるまる表示がされていません。
30
+
31
+
32
+
33
+ chromeは問題なく表示されていることから、文法等の間違いではなく、
34
+
35
+ IE仕様に適用出来ていない点に問題があると感じています。
36
+
37
+
38
+
39
+
40
+
41
+ ###開発者画面について
42
+
43
+ 下記開発者画面(chrome)確認
44
+
45
+
46
+
47
+ <td>{{request.status_name}}</td>の部分など値[test01]が取得できており、画面に表示もされています。
48
+
49
+
50
+
51
+ 開発者画面(IE)で確認
52
+
53
+
54
+
55
+ 最下段で値[test01]は取得できていますが、
56
+
57
+ その後にText-Empty Text Nodeと表示があり、画面には反映されていません。
58
+
59
+ この部分が問題点かと思います。
60
+
61
+
62
+
63
+ ###原因、怪しい点
64
+
65
+ 調べてみると、IEでは下記の記載方式から変更の必要があるのかもしれません。
66
+
67
+ ただ具体的な記載方法が分からず、アドバイス頂けますと大変助かります。
68
+
69
+
70
+
71
+ <div class='columns'>内などの
72
+
73
+  document.getElementByIdの書き方
74
+
75
+
76
+
77
+ ・function update_table()内の
78
+
79
+  getElementsByTagNameの書き方
80
+
81
+
82
+
83
+ (jsの親/子の指定などが必要?)
84
+
85
+
86
+
87
+ よろしくお願いします。
88
+
89
+
90
+
91
+ ### 該当ソースコード 一部抜粋
92
+
93
+
94
+
95
+ ```html
96
+
97
+ <div id="table_area">
98
+
99
+ <table class="table" id="table" style="width: 100%;">
100
+
101
+ ...
102
+
103
+
104
+
105
+  {% for group in group_list %}
106
+
107
+  {% for status_id, status_name in status_display.items() %}
108
+
109
+  <tbody class="table-body" id="table-g{{ group.id }}-s{{ status_id }}" style="display: none">
110
+
111
+   {% for request in request_list %}
112
+
113
+       <thead>
114
+
115
+       ・・・
116
+
117
+
118
+
119
+  <div class='columns'>
120
+
121
+  <div id='div_link_{{request.id}}' class='column'>
122
+
123
+  <a href="/check_model?page=requests&model={{request.model_id}}&request={{request.id}}"
124
+
125
+    onClick='document.getElementById("div_link_{{request.id}}").style="display: none";
126
+
127
+  document.getElementById("div_dummy_{{request.id}}").style="";'{{request.request_name}}</a>
128
+
129
+   {% if request.status_id == 0 %}
130
+
131
+ <button id="btn_add" class="animatebutton"
132
+
133
+ onclick="document.getElementById('overlay_update_{{request.id}}').style.visibility = 'visible';"
134
+
135
+ onmouseover='document.getElementById("icon_setting_{{request.id}}").className = "fa fa-cog has-text-dark";'
136
+
137
+ onmouseout='document.getElementById("icon_setting_{{request.id}}").className = "fa fa-cog has-text-info";'>
138
+
139
+          ・・・
140
+
141
+      </thead>
142
+
143
+    <tbody>
144
+
145
+  ・・・
146
+
147
+ </div>
148
+
149
+
150
+
151
+ <div id='div_dummy_{{request.id}}' class='column' style='display: none'>
152
+
153
+ {{request.request_name}}
154
+
155
+ <span class='icon' style="margin-left:10px">
156
+
157
+ <i id="icon_load" class="fa fa-refresh fa-spin"></i>
158
+
159
+ </span>
160
+
161
+ </div>
162
+
163
+ <td>{{request.status_name}}</td>
164
+
165
+ <td>{{request.model_name}}</td>
166
+
167
+ <td>{{request.arch_name}}</td>
168
+
169
+ <td>{{request.create_at}}</td>
170
+
171
+ <td>{{request.update_at}}</td>
172
+
173
+   </tbody>
174
+
175
+  </table>
176
+
177
+ </div>
178
+
179
+
180
+
181
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
182
+
183
+ <script language="javascript" type="text/javascript">
184
+
185
+   var loading = false;
186
+
187
+   update_table();
188
+
189
+   
190
+
191
+   ・・・
192
+
193
+
194
+
195
+ function update_table(){
196
+
197
+ var ul = document.getElementById("ul_status");
198
+
199
+ var items = ul.getElementsByTagName("li");
200
+
201
+
202
+
203
+ var groups = document.getElementById("group_list");
204
+
205
+ var selected_group_id = groups[groups.selectedIndex].value;
206
+
207
+
208
+
209
+ for (var i = 0; i < items.length; ++i) {
210
+
211
+ for (var j = 0; j < groups.length; ++j) {
212
+
213
+ if(items[i].className == "is-active" && groups[j].value == selected_group_id){
214
+
215
+ var table = document.getElementById("table-g" + groups[j].value + "-s" + items[i].value);
216
+
217
+ table.style="";
218
+
219
+ } else{
220
+
221
+ var table = document.getElementById("table-g" + groups[j].value + "-s" + items[i].value);
222
+
223
+ table.style="display: none";
224
+
225
+ }
226
+
227
+ }
228
+
229
+ }
230
+
231
+ }
232
+
233
+ ```
234
+
235
+
236
+
237
+ 開発者 検証画面
238
+
239
+
240
+
241
+ ### 開発者画面 chrome
242
+
243
+
244
+
245
+ ```html
246
+
247
+ <div id="table_area">
248
+
249
+ <table class="table" id="table" style="width: 100%;">
250
+
251
+ <thead>・・・</thead>
252
+
253
+  <tbody class="table-body" id="table-g1-s2" style="display: none;">
254
+
255
+
256
+
257
+  <div class="columns">
258
+
259
+  <div id="div_link_33" class="column">
260
+
261
+  <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;;
262
+
263
+ document.getElementById(&quot;div_dummy_33&quot;).style=&quot;&quot;;">test01</a>
264
+
265
+  </div>
266
+
267
+
268
+
269
+ <div id="div_dummy_33" class="column" style="display: none">
270
+
271
+ test01
272
+
273
+   <span class="icon" style="margin-left:10px">
274
+
275
+     <i id="icon_load" class="fa fa-refresh fa-spin"></i>
78
276
 
79
277
    </span>
80
278
 
279
+
280
+
281
+   <td>済</td>
282
+
283
+   <td>light</td>
284
+
285
+   <td>32</td>
286
+
287
+   <td>2018-04-30 01:04:19</td>
288
+
289
+   <td>2018-04-30 01:04:19</td>
290
+
81
- </button>
291
+  </tbody>
82
-
83
-
84
-
85
- <div id='overlay_update_{{request.id}}' class='overlay' style="visibility:hidden;
292
+
86
-
87
- <div class="middlediv">
293
+ </table>
88
-
89
-
90
-
91
-
92
-
93
-
94
294
 
95
295
  ```
296
+
297
+
298
+
299
+ ### 開発者画面 IE
300
+
301
+ ```html
302
+
303
+ <div id="table_area">
304
+
305
+ Text-Empty Text Node
306
+
307
+ ・・・
308
+
309
+ <table class="table" id="table" style="width: 100%;">
310
+
311
+ Text-Empty Text Node
312
+
313
+ ・・・
314
+
315
+ <tbody class="table-body" id="table-g1-s2" style="display: none;">
316
+
317
+ Text-Empty Text Node
318
+
319
+ ・・・
320
+
321
+ <div class="columns">
322
+
323
+ Text-Empty Text Node
324
+
325
+ ・・・
326
+
327
+ <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>
328
+
329
+ Text - test01
330
+
331
+ Text-Empty Text Node
332
+
333
+ ・・・  
334
+
335
+ ```

1

タグ変更:python

2018/04/30 10:47

投稿

MF_19
MF_19

スコア27

test CHANGED
File without changes
test CHANGED
File without changes