CODEWITHSUNDEEP
phpajaxlaravellaravel-5laravel-5.5
Jaaayz
Jaaayz

Reputation: 1563

Laravel 5.5 AJAX live data search won't work

I have a AJAX search in my blade files the show.blade.php and I am dislaying a specific user in that show method like this in the url: http://127.0.0.1:8000/client/1

Here is my route

Route::resource('client', 'ClientController',
        ['as' => 'encoder']);

It is a resouce controller that includes the show method to display a specific client.

This is what I did in my controller

public function show($id, Request $request)
    {
        $client = $this->clientRepository->with(['request' => function ($query) {
            $query->orderBy('created_at', 'desc');
        }])->findWithoutFail($id);

        $keyword = $request->get('keyword');

        if (!$keyword) {
            $client_requests = AnalysisRequest::where('client_id', $client->id)
            ->orderBy('created_at', 'desc')->get();
        } else {
            $client_requests = AnalysisRequest::where('client_id', $client->id)
            ->OrWhere('id', 'LIKE', '%keyword%')
            ->OrWhere('sample_descrition', 'LIKE', '%keyword%')
            ->OrWhere('special_instruction', 'LIKE', '%keyword%')
            ->orderBy('created_at', 'desc')->get();
        }

        // dd($client_requests);

        if (empty($client)) {
            Flash::error('Client not found');

            return redirect(route('encoder.client.index'));
        }

        echo view('encoder-dashboard.client.show', compact('client_requests'))
        ->with('client', $client)
        ->render();
    }

I have a show function that will display a specific client that the id is being passed as a params in the controller in order to show that specific client. Now I also have a request for that specific client that I want to search with.

This is what I have done in my AJAX.

$(document).ready(function(){
      $('.searchbar').on('keyup', function(){
          var text = $('#searchbar').val();
          $.ajax({
              dataType: "json",
              type:"GET",
              url: '{{ url('encoder/client') }}' + '/' + $('.id_search').val(),
              data: {text: $('.searchbar').val()},
              success: function(response) {
                console.log(response);
              }
          });
      });
  });

and in my show.blade.php

<div class="row">
                    <div class="col-sm-6">
                        <div class="form-group" id="results">
                            <input type="hidden" id="client_id" class="id_search" name="client_id" value="{{ $client->id }}">
                            <input class="form-control searchbar" id="searchbar" name="searchbar" placeholder="Search...">
                        </div>
                    </div>
                </div>

                @include('encoder-dashboard.client.request')

and finally the request.blade.php

<!-- The timeline -->
  @if (isset($client_requests) && count($client_requests) > 0)
  @foreach($client_requests as $request)
  <ul class="timeline timeline-inverse">
    <!-- timeline time label -->
    <li class="time-label">
          <span class="bg-red">
            {{ $request->created_at->format('M d, Y') }}
          </span>
    </li>
    <!-- /.timeline-label -->
    <!-- timeline item -->
    <li>
      <i class="fa fa-edit bg-blue"></i>

      <div class="timeline-item">
        <span class="time"><i class="fa fa-clock-o"></i> {{ $request->created_at->diffForHumans() }}</span>

        <h3 class="timeline-header">Request Code: <a href="{!! route('encoder.analysis-request.show', $request->id) !!}">{{ $request->reference_no() }}</a>
            @if ($request->rushable == 1)
              <p style="color:red">This request is for RUSH!</p>
            @else
            @endif
        </h3>

        <div class="timeline-body">
          Description: <b>{{ $request->sample_description }}</b>
          <br>
          Service Requested: <b>{{ $request->service->description }}</b>
          <br>
          Category Requested: <b>{{ $request->category->name }}</b>
          <br>
          Method Requested: <b>{{ $request->methodology->name }}</b>
          <br>
          Special Instruction: <b>{{ $request->special_instruction }}</b>
          <br>
          @if ($request->status == 'for_testing')
              Status: <span class="label label-warning">Pending</span>
          @elseif ($request->status == 'under_analyzation')
              Status: <span class="label label-info">Under Analyzation</span>
          @elseif ($request->status == 'finished')
              Status: <span class="label label-success">Finished</span>
          @endif
        </div>
        <div class="timeline-footer">
          <a class="btn btn-primary btn-xs" href="{!! route('encoder.analysis-request.show', $request->id) !!}">Read more</a>
          {{--  <a class="btn btn-danger btn-xs">Delete</a>  --}}
        </div>
      </div>
    </li>
  </ul>
  @endforeach
  @endif

I am doing something wrong? I didn't receive any errors in here right now.

I have an 500 internal server error earlier but manage to fix it because of just a wrong url.

GET http://127.0.0.1:8000/encoder/client/1?keyword=dsa 500 (Internal Server Error) send @ jquery.min.js:4 ajax @ jquery.min.js:4 (anonymous) @ 1:363 dispatch @ jquery.min.js:3 q.handle @ jquery.min.js:3

I had my csrf token in my meta in the app.blade.php and the script ajax setup headers.

Will I create a separate method in the controller that has a same GET request with no parameters being passed? and passed the id as an request input hidden for alternative purposes.

Maybe I should do I POST request instead of a GET request? But How? because I am also displaying a specific resource passing the id as a params.

Appreciate if someone could help. Thanks in advance.

Upvotes: 4

Views: 1525

Answers (6)

JPark
JPark

Reputation: 789

Without the output of your larvel.log it's really just speculation on what exactly the issue is. However, there are a couple potential issues I am seeing:

Change return data type

Your ajax request is explicitly asking for json as set with the dataType property. You could try changing your return in the controller to something like this:

return json_encode([
    'data' => view()->make('encoder-dashboard.client.show', 
        compact('client_requests'))
    ->with('client', $client)
    ->render();
]);

Or update your dataType in your ajax call:

$.ajax({
    dataType: "html",
    ....
});

Check if $client is empty

in your controller you are loading your $client by using findWithoutFail and then immediately calling $client->id in the if/else block:

if (!$keyword) {
    $client_requests = AnalysisRequest::where('client_id', $client->id)
    ->orderBy('created_at', 'desc')->get();
} else {
    ...
}

If $client is empty, then that would cause an error. Instead, move your empty check before the if/else block:

if (empty($client)) {
    Flash::error('Client not found');

    return redirect(route('encoder.client.index'));
}

if (!$keyword) {
  ...
}

Verify relations exists before chaining properties

In your request.blade.php, you are trying to get properties of your relations without checking if they are present. This would cause a crash if they didn't exist. Instead, check that are not empty first:

@if (!empty($request->service))
    @if (!$request->service->isEmpty())
        <br>
        Service Requested: <b>{{ $request->service->description }}</b>
    @endif
@endif

Upvotes: 0

Script47
Script47

Reputation: 14530

As others have mentioned and gone in to detail regarding, it seems that you are missing the CSRF token in your request. Some have suggested to add the token to the request but might I suggest a better approach to save you the hassle in the future of having to worry about it.

  1. In your blade layout template define in the head of your HTML a meta tag which references your CSRF token:

    <meta name="csrf-token" content="{{ csrf_token() }}">

  2. Define a global JavaScript file which you will include in your page before you include any of your other JavaScript files.

  3. Add to that global file the following code:

    $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

Now, that has setup a rule that every AJAX request should include the aforementioned CSRF token in the header of your request.

However, an Internal Server Error implies that the error is taking place elsewhere, therefore I would suggest that you direct your attention to storage/logs/laravel.log and see if the error has been logged in greater detail.

Upvotes: 0

DsRaj
DsRaj

Reputation: 2328

In the blade file setup the URL and get the URL from Blade or your Jquery code

Using the blade syntax in javascript is not the proper way. Also check for the token in the request otherwise you can ignore the token for this route

<input type="hidden" id="show_url" value="{{ action('ClientController@show') }}">


var showURL = $("#show_url").val();
$.ajax({
    dataType: "json",
    type:"GET",
    url: showURL+'/'+$('.id_search').val(),
    data: {text: $('.searchbar').val()},
    success: function(response) {
        console.log(response);
    }
});

Upvotes: 0

Florin Trifu
Florin Trifu

Reputation: 141

Your post is missing a clear question. I don't understand exactly what your specific problem is, but there is something that pops-up from your code:

url: '{{ url('encoder/client') }}' + '/' + $('.id_search').val(),

If your JavaScript is being loaded from an external file, url() method will not be accessible in the JavaScript and your code should report an error in your Developer Tools' console (you should see something like "Uncaught SyntaxError: Unexpected identifier"). If this is your case, replace

url: '{{ url('encoder/client') }}' + '/' + $('.id_search').val(),

with:

url: 'encoder/client/' + $('.id_search').val(),

Upvotes: 1

Polaris
Polaris

Reputation: 1249

In your in blade file, the head section:

<meta name="csrf-token" content="{{ csrf_token() }}">

csrf_token headers missing from your aJax. Replace with this:

 $.ajax({
              dataType: "json",
              type:"GET",
    headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
              url: '{{ url('encoder/client') }}' + '/' + $('.id_search').val(),
              data: {text: $('.searchbar').val()},
              success: function(response) {
                console.log(response);
              }
          });
      });

Upvotes: 1

abr
abr

Reputation: 2129

I haven't had the pleasure to try out the Route::resource even tho I feel I should have by now.

If you're looking for a different approach, you can do something among the lines:

  1. Specify the HTTP Verb on the route and point to a controller's method

.

Route::get('show', 'ClientController@show/{id}');
//On the post, the standard is to send the id within the body but you can play {id} on the url if that's your plan
Route::post('show', 'ClientController@show');

You can build the whole application using only POST if you want it to, but I find using standards makes things more readable like reading a book (GET some client and PUT some client translates into get information of a client and put information of a client into the application)

https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html

  1. You can and should return a view and not echoing it out (even if you can manage to access the view with it), and follow SOLID's principle whenever possible

https://hackernoon.com/solid-principles-made-easy-67b1246bcdf

  1. I'm not sure about this findWithoutFail($id), assuming an $id gets passed by that doesn't exist, what is it supposed to do? Woudln't it be better to do a FindOrFail or validate it?

To help with your debugging, since its aparently without errors: csrf token is required to be sent, as it's laravel protection against CSRF. If you wish to not use it, check the link below

https://laravel.com/docs/5.6/csrf

use dd to view the output of your queries, is it returning the expected result? are you receiving the view as expected? Try returning the data only (without the view) and console log the output

Edit: Post your status code 500 if you can't figure it out so we can help

Upvotes: 0

Related Questions