使用来自 blade 的参数调用 javascript 函数

Question

我浏览了一堆听起来相似的问题，但其中 none 适用于我的问题。我想将一个参数（由 foreach 获得）传递给 javascript 函数（在与我的视图相同的文件中）以在我的 blade 视图的数据表中提供多个 Select2 下拉列表。问题似乎是我无法将 php 变量 $process->id 传递给 javascript 函数。

根据我的 blade 观点：

@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

这样试试

     <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>

Answer 2

我的建议是将 javascript 与 php 分开，并在元素本身上使用数据属性，这些属性可以使用 javascript.

轻松检索

Blade:

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

然后在 JS 中使用循环遍历每个实例并获取它的 id 以传递给 ajax 并能够使用适当的响应填充正确的元素：

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

说了这么多，我真的不明白你为什么不填充每个服务器端

使用来自 blade 的参数调用 javascript 函数

Calling javascript function with parameters from blade

javascript

jquery-select2

laravel-blade