質問編集履歴

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

waiemu

waiemu score 12

2018/12/19 17:32  投稿
Laravel 5.6 ajaxとmodalと検索フォームがうまくいかない件について
### 前提・実現したいこと
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">&times;</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番台なので、ちゃんと受理されているという印象ですが、意味の特定することができませんでした...）
情報提示不足申し訳ありませんでした。
何かアドバイスいただければ幸いです。改めてお願い申し上げます。
  • PHP

    28090 questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • MySQL

    8333 questions

    MySQL（マイエスキューエル）は、TCX DataKonsultAB社などが開発するRDBMS（リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

  • Ajax

    1595 questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • Laravel 5

    3013 questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。
1 ルーティング情報、URL取得方法での処理（記述変更）、出たエラー　追記しました。

waiemu

waiemu score 12

2018/12/19 15:53  投稿
Laravel 5.6 ajaxとmodalと検索フォームがうまくいかない件について
### 前提・実現したいこと
 
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 = json_decode($request->input('json_keyword '));
           $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([$search_users], JSON_UNESCAPED_UNICODE);
           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">&times;</span></button>
                 </div>
                 <div class="modal-body mx-auto">
                 <form class="form-search form-inline" accept-charset="UTF-8" method="post">
                 @csrf
                 @method('POST')
                 @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)
                   <div id="user_data" class="card">  
<!--検索で変更したい部分 -->
                     <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>
<!--/検索で変更したい部分/-->
                   </div>  
                 @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 (getdata);
         console.log (baseUrl, data);
         alert('SUCCESS'); // 成功メッセージ
         $('#user_data').html(data);
         $("#user-data").html(baseUrl, data);
       },
       error: function (XMLHttpRequest, textStatus, errorThrown, getdata) // 接続が失敗
       error: function (XMLHttpRequest, textStatus, errorThrown, data) // 接続が失敗
       {
         console.log(getdata);
         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 内で取得したいデータは入っています
・実際の画面には変化がないです
・LaravelのPHPDebugerで確認すると、statu-code　が 256 となっていましたが、こちらの意味もお教えいただけませんでしょうか（200番台なので、ちゃんと受理されているという印象ですが、意味の特定することができませんでした...）
情報提示不足申し訳ありませんでした。
何かアドバイスいただければ幸いです。改めてお願い申し上げます。
  • PHP

    28090 questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • MySQL

    8333 questions

    MySQL（マイエスキューエル）は、TCX DataKonsultAB社などが開発するRDBMS（リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

  • Ajax

    1595 questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • Laravel 5

    3013 questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る