使用刀片中的参数调用 javascript function

Question

I browsed through a bunch of similar sounding questions but none of them applies to my issue. I want to pass a parameter (obtained by a foreach ) to a javascript function (in the same file as my view) to feed several Select2 dropdowns in a datatable in my blade view. The issue seems to be that I can't pass the php variable $process->id to the javascript function.

From my blade view:

@foreach($processes as $process)                        
<tr>
  <td>{{ $process->id }}</td>
  <td>{{ $process->title }}</td>
  <td>{{ $process->client }}</td>
  <td>
    <script> getDisponents($process->id); </script> //not working ofc.
    <select class="mySelect" name="state"></select> 
  </td>        
(...)
@push('js')
<script>
function getDisponents(process_id){
  $.ajax({
    url: 'http://localhost/matpro/public/getUsersPerProcess', //works.
    type: "get",
    data: {
      processId:process_id,
      //processId:'5', //works for manually given ids.
    },
    success: function(response) {
      $('.mySelect').select2({
        data: response,
      });
    },
    error: function(jqXHR, textStatus, errorThrown) {
      alert(textStatus + " : " + jqXHR.status + " : " + errorThrown);
    }
  });
}
</script>

Answer 1

My suggestion is separate your javascript from the php and use data attributes on the elements themselves which can be easily retrieved using javascript.

Blade:

<select class="mySelect" data-id="{{$process->id}}" name="state"></select> 

Then in JS use a loop to go through each instance and get it's id to pass to ajax and to be able to populate the correct element with the appropriate response:

var processUrl = 'http://localhost/matpro/public/getUsersPerProcess';

$('.mySelect').each(function(){ 
   // `this` is current instance of the collection
   var $sel = $(this), process_id = $sel.data('id');// from attribute

   $.get(processUrl , {processId:process_id}).then(function(response){
         // only pass data to current instance of select
         $sel.select2({data: response});
   }).catch(function(err){ 
         console.log('Ooops, something went wrong')
   });    
});

With all this being said, I don't really understand why you don't populate each one server side

Answer 2

try like this

     <script> 
    var processId = <?php echo $process->id ?>
getDisponents(processId)
    function getDisponents(process_id){ $.ajax({ url: 'http://localhost/matpro/public/getUsersPerProcess', //works. type: "get", data: { processId:process_id, }, success: function(response) { $('.js-example-basic-single').select2({ data: fData, }); }, error: function(jqXHR, textStatus, errorThrown) { alert(textStatus + " : " + jqXHR.status + " : " + errorThrown); } }); } </script>