teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

追記

2017/11/07 03:23

投稿

yambejp
yambejp

スコア117946

answer CHANGED
@@ -1,4 +1,77 @@
1
1
  > 「async:false」は使っては使ってはいけないのでしょうか?
2
2
 
3
3
  そうですね。
4
- どうしても順序が必要なのであれば、$.whenやpromiseで処理すれば良いと思います
4
+ どうしても順序が必要なのであれば、$.whenやpromiseで処理すれば良いと思います
5
+
6
+
7
+ # 追記
8
+ 今回はIE対応のためdialogではなくdivで処理します
9
+ - mypage.htm
10
+ ```HTML
11
+ <body>
12
+ <input type="button" value="go">
13
+ <span id="hoge"></span>
14
+ <div id="modal">
15
+ <p>
16
+ <div>Loading ...</div>
17
+ <hr>
18
+ <input type="button" value="cancel">
19
+ </p>
20
+ </div>
21
+ <div id="modal_back"></div>
22
+ </body>
23
+ ```
24
+ ```CSS
25
+ #modal{
26
+ z-index:2;
27
+ display:block;
28
+ position:absolute;
29
+ left:45%;
30
+ top:45%;
31
+ border-style:outset;
32
+ width:100px;
33
+ background-Color:e0e0e0;
34
+ }
35
+ #modal_back{
36
+ z-index:1;
37
+ display:block;
38
+ position:absolute;
39
+ top:0px;
40
+ left;0px;
41
+ width:100%;
42
+ height:100%;
43
+ background-Color:rgba(0,0,128,0.6);
44
+ }
45
+ ```
46
+ ```javascript
47
+ $(function(){
48
+ var myxhr;
49
+ $('#modal,#modal_back').hide();
50
+ $('input[type=button][value=go]').on('click',function(){
51
+ $('#modal,#modal_back').show();
52
+ myxhr=$.ajax({
53
+ "url":"send.php",
54
+ "cache":false,
55
+ }).done(function(data){
56
+ $('#modal,#modal_back').hide();
57
+ $('#hoge').html(data);
58
+ });
59
+ });
60
+ $('#modal input[type=button][value=cancel]').on('click',function(){
61
+ if(myxhr) myxhr.abort();
62
+ $('#modal,#modal_back').hide();
63
+ });
64
+ });
65
+
66
+ ```
67
+
68
+ - send.php
69
+
70
+ ※3秒待って現在の日時を表示する
71
+
72
+ ```PHP
73
+ <?PHP
74
+ sleep(3);
75
+ print date("Y-m-d H:i:s");
76
+ ?>
77
+ ```