質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

Laravel 5.6 ajaxとmodalと検索フォームがうまくいかない件について

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,321

waiemu

score 12

前提・実現したいこと

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番台なので、ちゃんと受理されているという印象ですが、意味の特定することができませんでした...)

情報提示不足申し訳ありませんでした。
何かアドバイスいただければ幸いです。改めてお願い申し上げます。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

ajaxのtypeをGETにしているということはURL直叩きでも処理を実行できます。
おそらくusers/{user_id}/ajax-search?keyword_name={getdataの情報}
でアクセスすればajax実行したのと同じレスポンスが返ってくるはずなので、想定の情報が返ってくるか確認してみてください。
users/のルーティング設定も提示されたほうがいいかもしれませんね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

<script>
//非同期通信 ユーザー検索機能
$(function ajaxSearch() {
var baseUrl = "{{ url('users/' . $user->id . '/search_users') }}";
$('#search_button').on('click', function (e) {
e.preventDefault(e);
var getdata = $('#keyword_name').val();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}});
$.ajax({
type: "GET",
url:"{{ url('users/' . $user->id . '/search_users' }}",
data:{
'keyword_name':getdata
},
dataType: 'html',
processData: true,
cache: false,
})
.done(function(baseUrl, getdata) // 接続に成功
{
$("body").html(baseUrl + JSON.stringify(getdata), JSON.stringify(getdata));
$("body").addClass('modal-open');
$('.modal').modal();
})
.fail(function (XMLHttpRequest, textStatus, errorThrown, getdata) // 接続に失敗
{
console.log(getdata);
alert('ERROR'); // エラーメッセージ
})
return false;
});
});
$(function clickForm() {
$(".click_form").click(function (event) {
event.preventDefault();
$('.modal').modal();
var dataName = $(this).data("name");
var dataId = $(this).data("id");
console.log(dataName + "が選択されました");
$("#user_id").val(dataId);
$("#user_name").val(dataName);
$('.modal-backdrop.in').remove();
$(".modal-close").click();
return false;
});
});
mts10806さんにアドバイスいただいた
>URL直叩きでも処理を実行できます
とは異なるかもしれませんが、一応動きは完成させることはできました。

datatypeをhtmlにして、return もJSON形式ではなく通常のページを開く(view)処理を、同時にmodalを開く処理を書いて望みの動作ができました。
どうもありがとうございました。
ただし、modalウィンドウの動きは改善が必要。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる