简体   繁体   中英

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

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

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 App\Http\Controllers;

use Illuminate\Http\Request;

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

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM