使用刀片中的参数调用 javascript 函数答案

【问题标题】：Calling javascript function with parameters from blade使用刀片中的参数调用 javascript 函数
【发布时间】：2020-11-08 07:15:41
【问题描述】：

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

从我的刀片视图：

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

【问题讨论】：

你需要刀片将$process_id输出到html脚本标签中......getDisponents('{{ $process->id }}');
我该如何准确地放这个？ <script> getDisponents('{{$process->id}}'); </script> 不工作。
"not working" 并没有告诉我们任何有关引发的错误或实际生成的源代码产生的内容。检查浏览器开发工具控制台是否有错误
错误是“未捕获的语法错误”，也无济于事。
那么在生成的源中发送到浏览器是什么样子的？

标签： javascript jquery-select2 laravel-blade

【解决方案1】：

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

刀片：

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

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

【讨论】：

我也不是，因为我是刀片 ajax 的新手，因此我很可能不会预先选择最佳解决方案。感谢您的代码示例，但我仍然不明白在哪里放置 ajax 调用。
$.get 是 get 类型时 $.ajax 的简写
现在我明白了，它正在工作。但是有一件奇怪的事情：我添加了$sel.val($('.mySelect option:eq(1)').val()).trigger('change'); 以在下拉列表中选择第一个条目，这适用于某些下拉列表，而有些则不行。当我重新加载页面时，它正在随机其他下拉列表中工作，它不是确定性的。有什么想法吗？
应该使用select2 插件API 来改变这个值。哦，也不要使用$('.mySelect。对特定的实例使用 $sel.find('option:eq(1)')`
是的，我已经尝试过$sel.select2.val($('.mySelect option:eq(1)').val()).trigger('change');，但这根本不起作用。

【解决方案2】：

这样试试

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

【讨论】：

由于循环无法做到这一点