0

I'm trying to make a request using a third party program but it isn't working, can someone tell me what I'm doing wrong? The response just isn't being sent at all. I tried ordering the dependencies in order, placing the scripts at the top and the code after the form but it just isn't making the calls through XHR in console.

Controller:

class UserController extends Controller
{
    public function index(Request $request)
    {
        $search = request('name');
        return User::where('name', 'LIKE', "$search%")
            ->take(5)
            ->pluck('name');
    }
}

Route:

Route::get('/api/users', 'Api\UserController@index');

Script:

<script>
        $('#body').atwho({
            at: "@",
            delay: 500,
            callbacks: {
                remoteFilter: function (query, callback) {
                    //$.getJSON('/api/users', { name: query }, function (usernames) {
                    //    console.log('hey');
                    //    callback(usernames);
                    //});
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: '/api/users',
                        type: 'GET',
                        dataType: 'json',
                        data: {
                            name: query,
                            _token: {{csrf_token()}}
                        },
                        success: function (usernames) {
                            callback(usernames);
                            console.log('hey');
                        },
                        error: function () {
                            console.log('error');
                        }
                    });
                }
            }
        });
    </script>

It works fine here

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/jquery.atwho.css">
</head>
<body>
    <textarea type="" id="inputor"></textarea>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.js"></script>
<script src="/js/jquery.caret.js"></script>
<script src="/js/jquery.atwho.js"></script>
<script>
    $('#inputor').atwho({
        at:"@",
        data: ['Peter', 'Tom', 'Anne']
    });
</script>
</html>
user123
  • 247
  • 2
  • 11
  • Is there `script` file and `css` file included correctly in your laravel project? – A.A Noman Apr 19 '20 at 08:35
  • I think so, I've called it from my folder, in the order it is needed (i.e. Caret.js needed before Atwho.js). I placed it at the top, also at the bottom, I don't know what's wrong. I feel like I'm calling it just like I'm calling it in the research project. – user123 Apr 19 '20 at 08:38
  • Please check `inspect ` first and see try to identify what's wrong – A.A Noman Apr 19 '20 at 08:42
  • I have done this too, A.A Noman – user123 Apr 19 '20 at 08:50

2 Answers2

0

You have to use url look like this.

url: "{{url('')}}/api/users,
type: 'POST',

And your route should be placed in route\api.php. And your route should be look like this

Route::post('/users',       'ApiController@index');

And in your ApiController you write this code

class ApiController extends Controller{

    public function index(Request $request){

        $search = request('name');

        return User::where('name', 'LIKE', "$search%")->take(5)->pluck('name');

    }
 }
A.A Noman
  • 5,244
  • 9
  • 24
  • 46
0

I had to remove "defer" from app.js in the app.blade.php file.

user123
  • 247
  • 2
  • 11