javascript - How to use AJAX to get value form controller into a popup

I want to get data from a controller and display it in a html pop-up when a button is clicked.

At this point the POPUP is showing when the button is clicked but the data isn't loaded

At this point I need that onclick the values get loaded and show them in the popup.

index.blade.php

 <button data-toggle="modal" data-target="#edit" id ="uid" name="uid" value="<?php echo $user->id ?>">
    </button>
    
    <div class="modal fade" id="edit" tabindex="-1" role="">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="card card-signup card-plain">
                    <div class="modal-header">
                        <div class="card-header card-header-primary text-center">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                <i class="material-icons">clear</i>
                            </button>
                            <h4 class="card-title">Editar</h4>
    
                        </div>
                    </div>
                    <div class="modal-body">
                        <form class="form" method="POST" action = "{{ route('/alteruser') }}" name = 'user'>
             @csrf
    
                             <div class="card-body">
                                <div class="form-group bmd-form-group">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">
                                                <i class="material-icons"></i>
                                            </div>
                                        </div>
                                        <input name = 'name' type="text" class="form-control" placeholder="<?php echo $seluser->id  ?? ''?>" id='id' disabled>
                                        <input name = 'name' type="text" class="form-control" "<?php echo $seluser->name  ?? ''?>" id='name'>
                                        <input type="text" class="form-control" placeholder="<?php echo $seluser->email  ?? ''?>" id = 'email'>
                                        <input type="password" placeholder="<?php echo $seluser->password  ?? ''?>" class="form-control" id = 'password'>
                                        <input type="text" placeholder="<?php echo $seluser->nif  ?? ''?>" class="form-control" id = 'nif'>
                                       <input type="text" placeholder="<?php echo $seluser->contacto  ?? ''?>" class="form-control" id = 'contact'>
                                        <input type="text" placeholder="Grupo" class="form-control" id = 'grupo'>
                                    </div>
                                </div>
       
                                <button type="submit" class="btn btn-primary btn-link btn-wd btn-lg" name = 'uid'>Confirmar</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
                               

UserController@GetUser:

    public function getUser() {

    $id = $_POST['uid'];

    $seluser = DB::table('users') -> where('id', $id) -> first();

    $view = view('/users/index',compact('seluser'))->render();

    return response(['status'=> 1, 'data' => $view]);

  }

Ajax code in index.blade.php:

     $(document).ready(function(){
   $("#uid").click(function (e){
              e.preventDefault();

              $.ajax({
              type: 'POST',
              url: baseUrl+"/getUser",
              data:{uid: $("#uid").val()},
              dataType: 'json',

              success: function(data) {
              $('#edit').html(data.html);
            }
              });
   });
});

I'm new at AJAX so i assume the error is in it

Answer

Solution:

Here is an example for what you're trying to do : Controller for GET request :

$users = \App\User::all();
return view('users', ['users' => $users]);

View users :

<div class="container">
          @foreach ($users as $user)
      <button class="btn btn-primary" data-toggle="modal" data-target="#edit" id ="uid" data-id="{{$user->id}}">
        click here
        </button>
          @endforeach
          @csrf
        <div class="modal fade" id="edit" tabindex="-1" role="">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="card card-signup card-plain">
                    <div class="modal-header">
                        <div class="card-header card-header-primary text-center">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                <i class="material-icons">clear</i>
                            </button>
                            <h4 class="card-title">Editar</h4>

                        </div>
                    </div>
                    <div class="modal-body">

                        <div id="user">
                            <h1 id="name"></h1>
                            <p id="email"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>

JS code :

<script>
        /* eslint disabled */
        $(
            () => {
                $('#uid').click(
                    (e) => {
                    var uid = $(event.target).data('id');
                    $.ajax({
                        type: 'POST',
                        url: 'users/' + uid,
                        data: {'_token': $("input[name='_token']").val()},
                        success: function(data){
                            // or use : $('#user').html(data);
                            $('#user #name').text(data.name);
                            $('#user #email').text(data.email);
                        }
                    });
                }
                );
            }
        );
    </script>

Controller (Route) POST request :

Route::post('users/{id}', function ($id) {
    $data = \DB::table('users')->where('id', $id)->first();

    return response()->json($data, 200);
});

This code allow to the client , for each user in db there're modal button to open popup , and after clicking on user's button i get a pop up with mail and name for this user

Source