CODEWITHSUNDEEP
javascriptphpjqueryajaxlaravel
Adam Silva
Adam Silva

Reputation: 1047

Laravel 5 jQuery Using AJAX

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?

Upvotes: 1

Views: 229

Answers (6)

ivant87
ivant87

Reputation: 70

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

Upvotes: 2

Gaslan
Gaslan

Reputation: 808

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
}

Upvotes: 0

Robin Knaapen
Robin Knaapen

Reputation: 606

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);
      }
});

Upvotes: 3

Komal
Komal

Reputation: 2736

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
}

Upvotes: 0

Sarath Kumar
Sarath Kumar

Reputation: 2353

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);
          }
 });

Upvotes: 0

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26288

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);
  }
});

Upvotes: 0

Related Questions