Same note is displayed everytime, whilst ID is changing

@Nakov

Hi Nakov, thanks for suggesting those changes. I made the suggested changes and when I click View Details nothing happens. See below for JS with edits.

<!-- Script -->
   <script type='text/javascript'>
   $(document).ready(function(){

      $('#noteTable').on('click','.viewdetails',function(){
          var note = $(this).attr('data-id');

          if(note > 0){

             // AJAX request
             var url = $(this).attr('data-url');
             
             if (url){

             // Empty modal data
             $('#tblnoteinfo tbody').empty();

             $.ajax({
                 url: url,
                 dataType: 'json',
                 success: function(response){

                     // Add note details
                     $('#tblnoteinfo tbody').html(response.html);

                     // Display Modal
                     $('#noteModal').modal('show'); 
                 }
             });
          }
      });

   });
   </script>

@Tchopa I was suggesting that you replace this:

var note = $(this).attr('data-id');

if(note > 0){

with this:

var url = $(this).attr('data-url');
             
if (url){

and of course on the button instead of data-id to add data-url with my suggestion in the previous answer.

@Nakov

Hi Nakov,

I made those changes, and the View Details will open up the modal, but the data displayed in the modal is still the same data everytime, it is not changing based on the note->id that I select. See below code with your suggested changes.

<table class="table filter-table" id='noteTable'>
         <thead>
            <tr>
               <th>S.no</th>
               <th>Title</th>
               <th>Category</th>
               <th>Description</th>
               <th>&nbsp;</th>
            </tr>
         </thead>
         <tbody>
         @php
         $sno = 0;
         @endphp
         @foreach($notes as $note)
            <tr>
              <td>{{ $note->id }}</td>
              <td>{{ $note->title }}</td>
              <td>{{ $note->category }}</td>
              <td>{{ $note->description }}</td>
              <td>
                  <button class='btn btn-info viewdetails' data-url="{{ route('getNoteDetails', ['note' => $note->id, 'client' => $note->client_id]) }}" >View Details</button>

                </td>
            </tr>
         @endforeach
         </tbody>
      </table>

   </div>
   
   
   <!-- Modal -->
      <div class="modal fade" id="noteModal" >
         <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
               <div class="modal-header">
                  <h4 class="modal-title">Note Info</h4>
                  <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
               </div>
               <div class="modal-body">
                   <table class="w-100" id="tblnoteinfo">
                      <tbody></tbody>
                   </table>
               </div>
               <div class="modal-footer">
                   <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
               </div>
            </div>
         </div>
      </div>

   <!-- Script -->
   <script type='text/javascript'>
   $(document).ready(function(){

      $('#noteTable').on('click','.viewdetails',function(){
          var url = $(this).attr('data-url');
             
            if (url){

             // Empty modal data
             $('#tblnoteinfo tbody').empty();

             $.ajax({
                 url: url,
                 dataType: 'json',
                 success: function(response){

                     // Add note details
                     $('#tblnoteinfo tbody').html(response.html);

                     // Display Modal
                     $('#noteModal').modal('show'); 
                 }
             });
          }
      });

   });
   </script>

@Tchopa can you change your method in the controller:

public function getNoteDetails(Client $client, Note $note){
         $html = "<tr>
              <td width='30%'><b>Created At:</b></td>
              <td width='70%'> ".$note->created_at."</td>
           </tr>
           <tr>
              <td width='30%'><b>Title:</b></td>
              <td width='70%'> ".$note->title."</td>
           </tr>
           <tr>
              <td width='30%'><b>Category:</b></td>
              <td width='70%'> ".$note->category."</td>
           </tr>
           <tr>
              <td width='30%'><b>Description:</b></td>
              <td width='70%'> ".$note->description."</td>
           </tr>";
      $response['html'] = $html;

      return response()->json($response);
}

@Nakov

You legend, that did it.

Thanks for your help, I really appreciate it. Do you mind letting me know what I had done wrong, so I can learn more about what to do for next time.

Was it a problem with the JS? That was my first JS script and I was using a guide and trying to apply it to my project.

@Tchopa both were a problem. The JS was because you used $note->id when getting the URL, so that would either return just the same ID of the note or null. You can always use the Network tab and inspect if the request URL was containing the right data.

The second part was that in the URL you have {client} and {note} and you were not leveraging the Route Model Binding

which made the client id to always be used. And it just so happened that you had a Note with the same ID and that's why the response was always the same.

@Nakov Understood, thanks. I'll look into Route Model Binding.