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

質問編集履歴

2

追記に訂正を加えました。

2018/12/19 08:32

投稿

waiemu
waiemu

スコア14

title CHANGED
File without changes
body CHANGED
@@ -217,7 +217,7 @@
217
217
  ・フォームメソッドを【GET】に変更
218
218
  ・ajax通信成功時に$("#user-data").html(baseUrl, data) とする
219
219
  ・Chromeで確認したところ、Response 内で取得したいデータは入っています
220
- ・実際の画面には変化がないです
220
+ ~~実際の画面には変化がないです~~ $(".user-info").html(baseUrl, data) としたところ更新が起こりましたが、文字は変換されず、ソースを見てもすべてのユーザ情報が出力されていました。
221
221
  ・LaravelのPHPDebugerで確認すると、statu-code が 256 となっていましたが、こちらの意味もお教えいただけませんでしょうか(200番台なので、ちゃんと受理されているという印象ですが、意味の特定することができませんでした...)
222
222
 
223
223
  情報提示不足申し訳ありませんでした。

1

ルーティング情報、URL取得方法での処理(記述変更)、出たエラー 追記しました。

2018/12/19 08:32

投稿

waiemu
waiemu

スコア14

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,9 @@
1
1
  ### 前提・実現したいこと
2
+
3
+ php 7.1.23
4
+ Laravel 5.6
5
+ JQuery 3.2.1
6
+
2
7
  フレームワークLaravelを使って、モーダルウィンドウ内でAjax非同期通信、検索機能を作成中です。
3
8
 
4
9
  1)モーダルウィンドウを表示
@@ -44,11 +49,11 @@
44
49
  $json_query->where('name', 'like', '%' . $keyword_name . '%')
45
50
  //検索して受け取ったデータ
46
51
  if ($request->ajax()) {
47
- $json_keyword = json_decode($request->input('json_keyword '));
52
+ $json_keyword = $request->input('json_keyword ');
48
53
  $json_query = User::query();
49
54
  $json_query = User::where('name', 'like', '%' . $json_keyword . '%')
50
55
  $search_users= $json_query->get();
51
- return response()->json([$search_users], JSON_UNESCAPED_UNICODE);
56
+ return response()->json(['data' => $search_users], JSON_UNESCAPED_UNICODE);
52
57
  } else {
53
58
  $search_users= $query->get();
54
59
  return view('users.search_users', ['user' => $user, 'search_users' => $search_users])->with('keyword_name', $keyword_name);
@@ -81,7 +86,7 @@
81
86
  <div class="modal-body mx-auto">
82
87
  <form class="form-search form-inline" accept-charset="UTF-8" method="post">
83
88
  @csrf
84
- @method('POST')
89
+ @method('GET')
85
90
  <div class="input-group">
86
91
  <input type="text" name="keyword_name" id="keyword_name" placeholder="氏名 or 会社名" class="user-search-name" value="{{$request->keyword_name}}" />
87
92
  <span class="input-group-btn">
@@ -90,8 +95,8 @@
90
95
  </div>
91
96
  </form>
92
97
  <br>
98
+ <div id="user_data" class="card">
93
99
  @foreach($search_users $search_user)
94
- <div id="user_data" class="card">
95
100
  <!--検索で変更したい部分 -->
96
101
  <a data-id="{{ $search_user->id }}" data-name="select_user"href="#">
97
102
  <div class="user-info float-right ml-3">
@@ -102,8 +107,8 @@
102
107
  </div>
103
108
  </a>
104
109
  <!--/検索で変更したい部分/-->
105
- </div>
106
110
  @endforeach
111
+ </div>
107
112
  </div>
108
113
  <br>
109
114
  <div class="modal-footer w-100">
@@ -145,6 +150,7 @@
145
150
  ```
146
151
  <script>
147
152
  $(document).ready(function () {
153
+  var baseUrl = "{{ url('users/' . $user->id . '/admin/search_users') }}";
148
154
  $(function() {
149
155
  $('#search_button').on('click', function () {
150
156
  var getdata = $('#keyword_name').val();
@@ -165,13 +171,13 @@
165
171
  timeout: 5000,
166
172
  success: function(getdata)
167
173
  {
168
- console.log (getdata);
174
+ console.log (baseUrl, data);
169
175
  alert('SUCCESS'); // 成功メッセージ
170
- $('#user_data').html(data);
176
+ $("#user-data").html(baseUrl, data);
171
177
  },
172
- error: function (XMLHttpRequest, textStatus, errorThrown, getdata) // 接続が失敗
178
+ error: function (XMLHttpRequest, textStatus, errorThrown, data) // 接続が失敗
173
179
  {
174
- console.log(getdata);
180
+ console.log(data);
175
181
  alert('ERROR'); // エラーメッセージ
176
182
  }
177
183
  });
@@ -183,10 +189,36 @@
183
189
 
184
190
  ```
185
191
 
192
+ 追記
193
+ web.php
194
+ ```
195
+ //ユーザー選択画面
196
+ Route::get('users/{user}/admin/search_users', 'UserController@addUserSelected');
197
+
198
+ //検索ボタン押した時の処理 ajax
199
+ Route::get('users/{user}/admin/ajax-search', 'UserController@addUserSelected');
200
+
201
+ //ユーザー選択画面送信後の保存処理
202
+ Route::post('users/{user}/admin/add-search_users-store', 'UserController@addUserstore');
203
+ ```
204
+
186
205
  ### 試したこと
187
206
  Ajax通信自体は「SUCCESS」と成功のメッセージが出されるのですが、受け取ったデータの取り扱いがわかりません。
188
207
 
189
208
 
190
209
  上に書いたように、取得したデータをもとにもう一度PHP変数を再取得することが理想なのですが、不可ならば他の方法で模索したいと思います。
191
210
 
192
- どのように軌道修正を行っていけばよいか、アドバイスいただければ幸いです。
211
+ どのように軌道修正を行っていけばよいか、アドバイスいただければ幸いです。
212
+
213
+ ###追記
214
+ ・ルーティング情報追記しました。
215
+ ・URLを取得する方法は、今回の環境で試せていませんでした。ご助言ありがとうございます。
216
+ ・URLを取得する方法でコード修正を行いました。
217
+ ・フォームメソッドを【GET】に変更
218
+ ・ajax通信成功時に$("#user-data").html(baseUrl, data) とする
219
+ ・Chromeで確認したところ、Response 内で取得したいデータは入っています
220
+ ・実際の画面には変化がないです
221
+ ・LaravelのPHPDebugerで確認すると、statu-code が 256 となっていましたが、こちらの意味もお教えいただけませんでしょうか(200番台なので、ちゃんと受理されているという印象ですが、意味の特定することができませんでした...)
222
+
223
+ 情報提示不足申し訳ありませんでした。
224
+ 何かアドバイスいただければ幸いです。改めてお願い申し上げます。