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

質問編集履歴

2

Ajax処理の内容追加

2018/03/21 11:04

投稿

rock_square
rock_square

スコア14

title CHANGED
File without changes
body CHANGED
@@ -50,6 +50,33 @@
50
50
  ```
51
51
  ※算出された到着時刻は、yyyy/mm/dd hh:mm (例:2018/03/21 17:14)です。
52
52
 
53
+ 具体的な方式としては
54
+
55
+
56
+ Ajaxでは
57
+
58
+ ```Ajax処理
59
+ $.ajax({
60
+ type: 'POST',
61
+ contentType: false,
62
+ processData: false,
63
+ url: send_url,
64
+ data: formData,
65
+ success: function(data) {
66
+ $('#cal_datetime').html(data);
67
+ },
68
+ error: function(data) {
69
+ alert('エラーが発生しました。');
70
+ },
71
+ });
72
+ ```
73
+ という様に、send_url に指定したプログラムで到着時刻の計算を行い、そこでの値を先の
74
+
75
+ <input id="arrival_time" type="text" class="form-control date_arrival" name="arrival_time" value="※算出された到着時刻" placeholder="yyyy/mm/dd hh:mm">
76
+
77
+ のvalueに「※算出された到着時刻」として入れて、<div>タグに挟まれた中身を書き換えています。
78
+
79
+
53
80
  書き換え後は、到着時刻側のみ Bootstrap 3 Datepicker が動作しない状況となりました。
54
81
 
55
82
  ChromeやFireFoxのデベロッパツールで見ているのですが、Consoleには特にエラーの出力はでていませんでした。

1

文言の補足

2018/03/21 11:04

投稿

rock_square
rock_square

スコア14

title CHANGED
File without changes
body CHANGED
@@ -41,7 +41,7 @@
41
41
 
42
42
  初期状態では、出発時刻、到着時刻 ともに正常に動作しています。
43
43
 
44
- 出発時刻が入力された場合 datetime() というJavaScriptの処理が呼び出され、Ajax にて出発時刻と所要時間から到着時刻が計算され、<div class="cal_datetime" id="cal_datetime">~</div> 内の内容が書き換えられられます。
44
+ 出発時刻が入力された場合 datetime() という別のJavaScriptの処理が呼び出され、Ajax にて出発時刻と所要時間から到着時刻が計算され、<div class="cal_datetime" id="cal_datetime">~</div> 内の内容が書き換えられられます。
45
45
 
46
46
  書き換えられる内容としては
47
47