Laravel 5 jQuery Using AJAX

Question

I'm using Laravel 5 and I'm doing some filters on some collections in my controller. The problem is using AJAX to be the bridge between the blade template and Controller. Here is my jQuery code:

function listCreatedBy(str) {
        $.ajax({
          headers : {
             'csrftoken' : '{{ csrf_token() }}'
          },
          url: '{{ url("search") }}',
          type: "get", //send it through get method
          data:{txt:str},
          success: function(response) {
            console.log("ola");
            $('#results').html(response);
          },
          error: function(xhr) {
            console.log(xhr);
          }
        });
    }

Here is my route:

Route::get('/search/{txt}', 'PrestashopController@search')->name('search');

And here is my method in the controller:

public function search($searchText){
    var_dump($searchText);

    return "results"; //Just to see if it's returning correctly
}

This method is empty for now because I only want to see if I can complete the ajax code first. But it's returning a 404 code, Not Found. Any idea what I'm doing wrong?

Robin Knaapen · Accepted Answer · 2016-10-03 12:19:08Z

3

Add this to your ajax call

headers : {
    'csrftoken' : '{{ csrf_token() }}'
}

edit

i see you use the route

Route::("/search/{txt}" ...

Witch corresponds to

http://example.com/search/random%20text

What is probably happening is that you're using the route wrong the ajax call you're making will create an uri like this

http://example.com/search/?txt=some%20text

try this

$.ajax({
      headers : {
         'csrftoken' : '{{ csrf_token() }}'
      },
      url: "{{ url("search") }}/" + encodeURIComponent(str),
      type: "get", //send it through get method
      success: function(response) {
        console.log("ola");
        $('#results').html(response);
      },
      error: function(xhr) {
        console.log(xhr);
      }
});

edited Oct 3, 2016 at 12:19

answered Oct 3, 2016 at 12:05

Robin Knaapen

6064 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam Silva Over a year ago

I did, but still nothing. I updated the post to correct the typo in the route and to add this in the request. Still 404 error

ivant87 · Accepted Answer · 2016-10-03 12:24:22Z

2

I think you have typo error.

Route::get('/search/{$txt}'

try without $

Route::get('/search/{txt}',...

One more..try to use in the controller method this code in the scopes, not $searchtext.

public function search(Request $request)

and after that access to the $txt variable like this

$test = $request->get('txt');
var_dump($test

);

and in jQuery code use this:

function listCreatedBy(str) {
       var query_url = '{{ url("search") }}' + str;
        $.ajax({
          url: query_url ,
          type: "get", //send it through get method
          success: function(response) {
            console.log("ola");
            $('#results').html(response);
          },
          error: function(xhr) {
            console.log(xhr);
          }
        });
    }

NOTE: csrftoken is for submit forms

edited Oct 3, 2016 at 12:24

answered Oct 3, 2016 at 12:04

ivant87

706 bronze badges

3 Comments

Adam Silva Over a year ago

You're right, but it still giving me a 404 not found.

ivant87 Over a year ago

try to load the url from browser, if is okay, try it from the ajax form and from the developers tools of the browser, check the response. Give us the new Route() code and the url that you write into the adress bar.

Adam Silva Over a year ago

Now it's calling the method if I put the url directly in the browser. http://localhost/app/public/search/hello

Mayank Pandeyz · Accepted Answer · 2016-10-03 11:09:45Z

0

Try this:

$.ajax({
  url: '{{ url("/route_name") }}',  
  // here route_name is a named route that call a controller function
  type: "get", //send it through get method
  data:{txt:str},
  success: function(response) {
    $('#results').html(response);
  },
  error: function(xhr) {
    console.log(xhr);
  }
});

answered Oct 3, 2016 at 11:09

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

2 Comments

Mayank Pandeyz Over a year ago

ROUTE must be of type get

Adam Silva Over a year ago

And it is. Route::get('/search/{$txt}', 'PrestashopController@search');

Sarath Kumar · Accepted Answer · 2016-10-03 11:10:38Z

0

try with the full-Path URL..

 url: '{{ url("/search") }}',

let your AJAX be like this..

 $.ajax({
          url: '{{ url("/search") }}',
          type: "get", //send it through get method
          data:{txt:str},
          success: function(response) {
            document.getElementById("results").innerHTML = this.responseText;
          },
          error: function(xhr) {
            console.log(xhr);
          }
 });

answered Oct 3, 2016 at 11:10

Sarath Kumar

2,3531 gold badge14 silver badges26 bronze badges

2 Comments

Sarath Kumar Over a year ago

check the requst URL in console, or is there any error in console ..?

Adam Silva Over a year ago

Here is the general info in the console:

Request URL:http://localhost/a3p/public/search?txt=ddd Request Method:GET Status Code:404 Not Found Remote Address:[::1]:80

Komal · Accepted Answer · 2016-10-03 12:10:52Z

0

Try to do like this

$.ajax({
  url: "/search/"+str,
  type: "GET",
  data:'',
  success: function(response) {
    document.getElementById("results").innerHTML = this.responseText;
  },
  error: function(xhr) {
    console.log(xhr);
  }
});

Route::get('/search/{txt}', 'PrestashopController@getSearch');

public function getSearch($searchText){
  dd($searchText);
  return "results"; //Just to see if it's returning correctly
}

edited Oct 3, 2016 at 12:10

answered Oct 3, 2016 at 11:08

Komal

2,7364 gold badges26 silver badges33 bronze badges

6 Comments

Komal Over a year ago

Can plz do one thing for me.. go to browser and type your url e.g app.dev/search/mystring.. and tell me your method is called or not

Adam Silva Over a year ago

It's saying the route doesn't exist. But here is my route: Route::get('/search/{$txt}', 'PrestashopController@search');

Komal Over a year ago

Update this Route::get('/search/{txt}', 'PrestashopController@search');

Komal Over a year ago

Route::get('/search/{txt}', 'PrestashopController@getSearch'); public function getSearch($searchText){ dd($searchText); return "results"; //Just to see if it's returning correctly }

Komal Over a year ago

Now check.. I m updating my answer

|

Gaslan · Accepted Answer · 2016-10-03 12:24:08Z

You can try this one;

  $.ajax({
      url: "/search/",
      type: "GET",
      data:{txt:str},
      success: function(response) {
        document.getElementById("results").innerHTML = this.responseText;
      },
      error: function(xhr) {
        console.log(xhr);
      }
    });

Route:

Route::get('/search/', 'PrestashopController@getSearch');

Controller:

public function getSearch(Request $request){
  dd($request->txt);
  return "results"; //Just to see if it's returning correctly
}

Collectives™ on Stack Overflow

Laravel 5 jQuery Using AJAX

6 Answers 6

1 Comment

3 Comments

2 Comments

2 Comments

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

3 Comments

2 Comments

2 Comments

6 Comments

Comments

Related