Question 69758 in Ajax Question posted in
You can find the official documentation here.

How can I pass an ID from selected table row to my AJAX function that fetching data – Jquery ajax

Sorry to bother, I’m having a trouble passing and ID to my AJAX function.

I wanted to pass the ID of the selected table row to my AJAX function and use it for my query in my controller

this is my table

this is the code for my table row

<div class="container">

<h2 style="margin-top: 12px;" class="alert alert-success">Details</h2><br>
    <div class="row">
      <div class="col-12">
      <table class="table table-bordered" id="">
      <thead>
      <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Email</th>
      <td colspan="2">Action</td>
      </tr>
      </thead>
      <tbody id="users-crud">
      @foreach($merchants as $merchant)
      <tr id="user_id_{{ $merchant->id }}">
      <td>{{ $merchant->id}}</td>
      <td>{{ $merchant->first_name }}</td>
      <td>{{ $merchant->email }}</td>
     <td><a id="getData" onClick="getData({{$merchant->id}})" class="btn btn-info">Show</a> 
     </td>
      </tr>
      @endforeach
      </tbody>
      </table>
      {{ $merchants->links() }}
      </div> 
    </div>
  </div>

upon click show ID should pass it to my AJAX function,
this is the code of the script

   <script type=text/javascript>
      $(document).ready(function() {
       });
    
       function getData(id){
      $('#myModal').modal('show');
          $.ajax({  //create an ajax request to display.php
          type: "GET",
       url: "getproducts/",
       // dataType: 'json',
        data: {id: id}, // This will be {id: "1234"}     
        success: function (data) {
       $("#id").html(data.id);
       $("#first_name").text(data.first_name);
       }
       });
    
      };
    
    </script>

And ID will be use for my query in my controller, this is my controller’s code, note that the number 1 in my where query is hard coded, I wanted to put the ID that I get from the selected table

public function getproducts()
{
    $merchants  = DB::table('merchants')
    ->select('merchants.*', 'product.product_name as product_names')
    ->join('product','product.id','=','merchants.id')
    // THE NUMBER 1 IS HARD CODED
    ->where('merchants.id', 1)
    ->paginate(8);
    return response()->json($test, 200);
}
Tags:

2

Answers


  1. 0

    Your code seems fine to me. What is the issue you are facing? But you can improve code by bit more.

    <td><a id="getData" onClick="getData({{$merchant->id}})" class="btn btn-info">Show</a>

    Instead you can use a global class. Also using same HTML id in a class is not good practice.

    <td><a class="merchant_info" data-id="{{$merchant->id}}" class="btn btn-info">Show</a>

    Now need modification to jQuery code

    <script type=text/javascript>
  $(document).ready(function() {
    $('.merchant_info').click(function(e){
       e.preventDefault();
       var dataId = $(this).attr("data-id");

       // Now do the Ajax Call etc

    });
  });
</script>
    Login or Signup to reply.
  2. 0

    Every method in a Laravel Controller can have arguments "injected" into them, including the Request $request variable. Add this to the top of your Controller after your namespace declaration:

    namespace AppHttpControllers;

use IlluminateHttpRequest;

    Then modify your method:

    public function getproducts(Request $request) {
   ...
}

    Then, instead of hard-coding the value 1, you pull it from your $request object:

    ->where('merchants.id', $request->input('id'))

    The full documentation can be seen here:

    https://laravel.com/docs/9.x/requests#accessing-the-request

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search