Question

正在开发一个应用程序，以便从后端获取一些数据并动态填充Laravel刀片文件中。我正在使用JavaScript来完成任务，在前端，我分为2个主要列（左列和右列）。在左列上有一个链接，当将鼠标悬停或单击时，相应的策略将显示在右侧。

在Javascript上，代码创建了一个功能，当文档准备就绪时，该功能将提取所有数据并添加一个名为asmData的变量。鼠标进入事件的下一步（在页面左侧的链接上）在表上显示相应的策略。

问题是当我使用下面的代码（替代1）时出现了asmData错误，并且我在document.ready函数（替代2）中传递了鼠标enter事件的所有数据，但我在表上没有看到任何数据。

左列包含具有动态ID的链接

 <div class="col-md-4">
    @foreach($asm as $a)
         <a href="#demo{{$i}}" class="list-group-item list-group-item-primary dropdown-toggle" data-toggle="collapse" data-parent="#MainMenu" style="color: #868ba1;" id="{{ $a['id'] }}"> Agency Sales ID : {{ $a['id'] }} </a>
    @endforeach
    </div>

包含要动态填充的表格的右列

 <div class="col-md-8">
     <table class="table table-hover mg-b-0 tx-11" id="summary-table">
        <thead>
          <tr>
            <th>POLICY NUMBER</th>
            <th>NAME</th>
            <th>STATUS</th>
          </tr>
        </thead>
          <tbody>
            <tr> <!-- Add policies dynamically via JS under respective thead columns--></tr> 
          </tbody>
    </table>
    </div>

JavaScript代码（替代1）

//Check if asm variable is set
<?php if(isset($asm) and isset($usm) and isset($ag)){ ?>
$( document ).ready(function() {
  var asmData = {!! json_encode($asm) !!};
});

$(document).on("mouseenter", "a", function() {

   var $tb = $('#summary-table tbody');

       //Make sure table is empty
       $tb.empty();

  //Fetch id of a tag in the DOM
  var asmId = $(this).attr('id');
  var asmPolicies = '';
  for(var i = 0; i < asmData.length; i++) {
      if(asmId == asmData[i]['id']) {
          for(var j = 0; j < asmData[i]['policies'].length; j++){
              var pol = asmData[i]['policies'][j];
              asmPolicies += '<tr><td>' + pol.policy_no + '</td><td>' + pol.policy_holder_name + '</td><td>' + pol.status + '</td><td>' + '</td></tr>';
          }
      }
  }
  // we append asmPolicies Html to the table
  $tb.append(asmPolicies);
  //END ASM
});
<?php } ?>

JavaScript代码（替代2）

//Check if asm variable is set
<?php if(isset($asm) and isset($usm) and isset($ag)){ ?>

//document is ready
$( document ).ready(function() {
  var asmData = {!! json_encode($asm) !!};

   //On mouse enter
  $(document).on("mouseenter", "a", function() {

   var $tb = $('#summary-table tbody');

       //Make sure table is empty
       $tb.empty();

  //Fetch id of a tag in the DOM
  var asmId = $(this).attr('id');
  var asmPolicies = '';
  for(var i = 0; i < asmData.length; i++) {
      if(asmId == asmData[i]['id']) {
          for(var j = 0; j < asmData[i]['policies'].length; j++){
              var pol = asmData[i]['policies'][j];
              asmPolicies += '<tr><td>' + pol.policy_no + '</td><td>' + pol.policy_holder_name + '</td><td>' + pol.status + '</td><td>' + '</td></tr>';
          }
      }
  }
  // we append asmPolicies Html to the table
  $tb.append(asmPolicies);
  //END ASM
});
});
<?php } ?>

Laravel刀片文件中Javascript的作用域问题

0 个答案: