前提・実現したいこと
php 7.1.23
Laravel 5.6
JQuery 3.2.1
フレームワークLaravelを使って、モーダルウィンドウ内でAjax非同期通信、検索機能を作成中です。
1)モーダルウィンドウを表示
2)その中で検索
3)ページ遷移無しで該当ユーザーを表示
4)指定のユーザーをクリック
5)モーダルウィンドウが閉じて、クリックしたユーザーの情報を元のページのinput 文に挿入
6)送信
問題となっている個所は3番目の非同期で検索ワードに該当するユーザーを取得する機能の部分です。
取得するユーザーの条件を送信することで、出力されるユーザーの情報を変更できると思ったのですが、ご助力いただければ幸いです。
usersテーブル
id | name | age |
---|---|---|
1 | 一郎 | 30 |
2 | 次郎 | 29 |
3 | 三郎 | 28 |
4 | 四子 | 27 |
5 | 五子 | 26 |
6 | 六子 | 25 |
ex 1) keyword_name [郎]と入力したときにid[1,2,3]のユーザー情報をページ遷移無しで取得,表示
ex 2) keyword_name [子]と入力したときにid[4,5,6]のユーザー情報をページ遷移無しで取得,表示
テーブルの内容が書き換わる。
該当のソースコード
app/UserController.php
public function addUserSelected(Request $request, User $user) { $event_id = $event->id; #クエリ生成 $query = User::query(); if ($request->ajax()) { $json_keyword = $request->input('keyword_name'); $json_query->where('name', 'like', '%' . $keyword_name . '%') //検索して受け取ったデータ if ($request->ajax()) { $json_keyword = $request->input('json_keyword '); $json_query = User::query(); $json_query = User::where('name', 'like', '%' . $json_keyword . '%') $search_users= $json_query->get(); return response()->json(['data' => $search_users], JSON_UNESCAPED_UNICODE); } else { $search_users= $query->get(); return view('users.search_users', ['user' => $user, 'search_users' => $search_users])->with('keyword_name', $keyword_name); } }
users/search_users.blade.php
<div class="container"> <div class="form-group row mx-auto"> <div class="col-md-8 mx-auto"> <div class="card"> <div class="card-header"></div> <div class="card-body"> <div class="form-group event_edit_page"> <!-- モーダルを出現させる --> <input type="button" class="btn btn-primary mt-2 ml-3 mb-2" data-toggle="modal" data-target="#search-users" value="{{ __('ユーザーを選択する') }}"/> <!-- モーダル --> <div class="modal fade search_particiant_modal" id="search-users" tabindex="-1" role="dialog" aria-labelledby="search-users-label" aria-hidden="true" style="top:20%; background: none;"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header w-100"> <h5 class="modal-title">{{ __('ユーザーを選択する') }}</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span></button> </div> <div class="modal-body mx-auto"> <form class="form-search form-inline" accept-charset="UTF-8" method="post"> @csrf @method('GET') <div class="input-group"> <input type="text" name="keyword_name" id="keyword_name" placeholder="氏名 or 会社名" class="user-search-name" value="{{$request->keyword_name}}" /> <span class="input-group-btn"> <button id="search_button" name="button" type="button" class="btn btn-default input-icon-btn search_btn"><i class="fa fa-search"></i>{{ __(' 検索') }}</button> </span> </div> </form> <br> <div id="user_data" class="card"> @foreach($search_users $search_user) <!--検索で変更したい部分 --> <a data-id="{{ $search_user->id }}" data-name="select_user"href="#"> <div class="user-info float-right ml-3"> <div class="user-name h4">{{ $search_user->_name }}</div> <div class="user-age"> <div class="age">{{ $search_user->age }}</div> </div> </div> </a> <!--/検索で変更したい部分/--> @endforeach </div> </div> <br> <div class="modal-footer w-100"> <button type="button" class="btn btn-secondary" data-dismiss="modal"> {{ __('戻る') }} </button> </div> </div> </div> </div> <!--モーダルでないフォーム --> <form action="{{ url() }}" method="post"> @csrf @method('POST') <div class="card"> <div class="card-header"></div> <div class="card-body"> <div class="mb-4"> <label for="user_id">{{ __('選択するユーザー') }}</label> <input id="user_id" type="text" readonly="readonly" class="form-control" name="user_id" value="$user->name"> <br> </div> </div> </div> <br> <button type="submit" name="submit" class="btn btn-primary ml-4">{{ __('送信') }}</button> </div> </div> </form> </div> </div> </div> </div>
common.js
<script> $(document).ready(function () { var baseUrl = "{{ url('users/' . $user->id . '/admin/search_users') }}"; $(function() { $('#search_button').on('click', function () { var getdata = $('#keyword_name').val(); //非同期通信 ユーザー検索機能 $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }}); $.ajax({ type: "GET", url:"{{ url('users/' . $user->id . '/ajax-search') }}", data:{ 'keyword_name':getdata }, dataType: 'json', processData: true, cache: false, timeout: 5000, success: function(getdata) { console.log (baseUrl, data); alert('SUCCESS'); // 成功メッセージ $("#user-data").html(baseUrl, data); }, error: function (XMLHttpRequest, textStatus, errorThrown, data) // 接続が失敗 { console.log(data); alert('ERROR'); // エラーメッセージ } }); return false; }); }); }); </script>
追記
web.php
//ユーザー選択画面 Route::get('users/{user}/admin/search_users', 'UserController@addUserSelected'); //検索ボタン押した時の処理 ajax Route::get('users/{user}/admin/ajax-search', 'UserController@addUserSelected'); //ユーザー選択画面送信後の保存処理 Route::post('users/{user}/admin/add-search_users-store', 'UserController@addUserstore');
試したこと
Ajax通信自体は「SUCCESS」と成功のメッセージが出されるのですが、受け取ったデータの取り扱いがわかりません。
上に書いたように、取得したデータをもとにもう一度PHP変数を再取得することが理想なのですが、不可ならば他の方法で模索したいと思います。
どのように軌道修正を行っていけばよいか、アドバイスいただければ幸いです。
###追記
・ルーティング情報追記しました。
・URLを取得する方法は、今回の環境で試せていませんでした。ご助言ありがとうございます。
・URLを取得する方法でコード修正を行いました。
・フォームメソッドを【GET】に変更
・ajax通信成功時に$("#user-data").html(baseUrl, data) とする
・Chromeで確認したところ、Response 内で取得したいデータは入っています
・実際の画面には変化がないです $(".user-info").html(baseUrl, data) としたところ更新が起こりましたが、文字は変換されず、ソースを見てもすべてのユーザ情報が出力されていました。
・LaravelのPHPDebugerで確認すると、statu-code が 256 となっていましたが、こちらの意味もお教えいただけませんでしょうか(200番台なので、ちゃんと受理されているという印象ですが、意味の特定することができませんでした...)
情報提示不足申し訳ありませんでした。
何かアドバイスいただければ幸いです。改めてお願い申し上げます。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。