无法通过ajax在仪表板上加载数据

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无法通过ajax在仪表板上加载数据相关的知识,希望对你有一定的参考价值。

我在我的仪表板中有一个名为SIM Balance的局部视图。此视图应显示发布给用户日期的SIM卡数量。

我已经设置了控制器

public function actionSimbalance()
{
    $sql = "SELECT user.`name` AS issued_to, COUNT(`sims`.`id`) AS sims_issued, sims.`operator_name` AS operator_name,
    CASE
    WHEN sims.`status` = 'Production Stored SIM' THEN 
    CAST(`sim_issueance_transaction`.`issued_at` AS DATE)
    WHEN sims.`status` = 'Testing Stored SIM' THEN 
    CAST(`sim_issueance_transaction`.`issued_at` AS DATE)
    WHEN sims.`operator_name` = 'Zong' THEN 
    CAST(`sim_issueance_transaction`.`issued_at` AS DATE)
    WHEN sims.`operator_name` = 'Mobilink' THEN 
    CAST(`sim_issueance_transaction`.`issued_at` AS DATE)
    ELSE CAST(`sims`.`created_at` AS DATE) END AS issued_date
    FROM `sims`
    INNER JOIN `sim_issueance_transaction` ON (`sims`.`id` = 
    `sim_issueance_transaction`.`sim_id`)
    INNER JOIN `user` ON (`sims`.`issued_to` = `user`.`id`)
    WHERE sims.`status` IN ('Testing Stored SIM','Production Stored SIM')
    GROUP BY user.`name`, sims.`status`, issued_date, sims.`operator_name`";


    $rows = Yii::$app->db->createCommand($sql)->queryAll();

    $output = [];
    $grandtotal = 0;

    foreach ($rows as $row) {
        $std = new stdClass();
        $std->count = $row['sims_issued'];
        $std->issued_to = $row['issued_to'];
        $std->operator = $row['operator_name'];
        $std->issued_date = $row['issued_date'];
        $grandtotal += $std->count;
        $output[]= $std;
    }
    return $this->renderPartial('sim_progress', ['model' => $output, 'grandtotal' => $grandtotal]);
}

局部视图sim_progress在下面

<?php foreach ($model as $row){?>
<tr>
  <td><?=$row->issued_to?></td>
  <td><?=$row->count?></td>
  <td><?=$row->operator?></td>
  <td><?= $row->issued_date ?></td>
</tr>
 <?php } ?>
 <tr>
  <td><strong>Grand Total</strong></td>
  <td>
    <strong><?= $grandtotal ?></strong>
  </td>
  <td></td>
 </tr>

然后有一个我设计的html sim-balance

<div class="box box-info">
<div id="af8a8d88334">
    <div class="print-header print-only">
        <center><img style="width: 100px" src="<?= 
     yiihelpersUrl::to('@web/images/logo.png', true); ?>"/>
        </center>
        <br/>
        <hr/>
    </div>
    <div class="box-header with-border">
        <h3 class="box-title">SIM Balance</h3>
    </div>
    <div class="box-body">
        <div class="table-responsive">
            <table class="table no-margin">
                <thead>
                <tr>
                    <th>Issued To</th>
                    <th>Sims Issued</th>
                    <th>Operator Name</th>
                    <th>Issued At</th>
                </tr>
                </thead>
                <tbody id="dashboard-sim-balance">

                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="box-footer clearfix">
    <a href="javascript:void(0)" onclick="$('#af8a8d88334').printThis();"
       class="btn btn-sm btn-default btn-flat pull-right">Print</a>
</div>

然后在我的主要网站index视图中,我称之为下面

.
.
.
  <?php if (!Yii::$app->user->isGuest && in_array(Yii::$app->user->identity->user_role,[1,6])) {
                echo $this->render('dashboard/sim-balance');
            } ?>
.
.
.
.

$url_sim_balance = Url::toRoute('/dashboard/simbalance');
.
.
.
.

在我的JS我创建了一个ajax函数,它应该显示详细信息。

$script = <<< JS
$(document).ready(function () {
   .
   .
   .
   .
       loadSimBalance();

   .
   .
   .
 });

 function loadSimBalance() {
 $('#dashboard-sim-balance').html('');
 $.ajax({
  url: '$url_sim_balance',
  data: data.val(), // also tried $('#dashboard-sim-balance').val()
  success:function(data) {
    $('#dashboard-sim-balance').html(data);
  },
   error: function() {

    }
  });
}
JS;
$this->registerJs($script);

但是当我运行我的项目时,我看不到详细信息,而是像下面的空表

enter image description here

如何设置ajax调用以查看详细信息。

任何帮助将受到高度赞赏。

答案

更改

    function loadSimBalance() {
 $('#dashboard-sim-balance').html('');
 $.ajax({
  url: '$url_sim_balance',
  data: data.val(), // also tried $('#dashboard-sim-balance').val()
  success:function(data) {
    $('#dashboard-sim-balance').html(data);
  },
   error: function() {

    }
  });
}

  function loadSimBalance() {
 $('#dashboard-sim-balance').html('');
 $.ajax({
  url: '$url_sim_balance',

  success:function(data) {
    $('#dashboard-sim-balance').html(data);
  },
   error: function() {

    }
  });
}

以上是关于无法通过ajax在仪表板上加载数据的主要内容,如果未能解决你的问题,请参考以下文章

无法通过使用 Volley 库中的 Intent 从片段中移动下一个 Activity

使用 AJAX 加载内容后无法播放音频

从ajax侧边栏加载的带有bootstrap-4动态侧边栏菜单的Adminlte 3打开不起作用

AJAX 加载的图像无法在 Safari 中正确显示

导航抽屉背压片段无法加载

错误:通过 ajax jquery 加载数据时无法读取未定义的属性“样式”