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

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

新規登録して質問してみよう
ただいま回答率
85.50%
MySQL

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

PHP

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

Ajax

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

Laravel 5

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

Q&A

解決済

2回答

5547閲覧

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

waiemu

総合スコア14

MySQL

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

PHP

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

Ajax

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

Laravel 5

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

0グッド

1クリップ

投稿2018/12/18 08:52

編集2018/12/19 08:32

前提・実現したいこと

php 7.1.23
Laravel 5.6
JQuery 3.2.1

フレームワークLaravelを使って、モーダルウィンドウ内でAjax非同期通信、検索機能を作成中です。

1)モーダルウィンドウを表示

2)その中で検索

3)ページ遷移無しで該当ユーザーを表示

4)指定のユーザーをクリック

5)モーダルウィンドウが閉じて、クリックしたユーザーの情報を元のページのinput 文に挿入

6)送信

問題となっている個所は3番目の非同期で検索ワードに該当するユーザーを取得する機能の部分です。
取得するユーザーの条件を送信することで、出力されるユーザーの情報を変更できると思ったのですが、ご助力いただければ幸いです。

usersテーブル

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

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ウィンドウの動きは改善が必要。

投稿2018/12/21 06:49

waiemu

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

投稿2018/12/19 00:56

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問