skip to Main Content

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', 'ApiUserController@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>

2

Answers


  1. Chosen as BEST ANSWER

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


  2. You have to use url look like this.

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

    And your route should be placed in routeapi.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');
    
        }
     }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search