如何根据点击的链接动态加载视图？

Posted 2021-04-16

我想在一个模态中加载视图来进行操作，但是我想根据点击的链接动态加载视图，只有一个模态而不是三个，我该怎么做？或者更好地创建相同的模态，每个操作一个？

ps：问题不是如何打开模态，而是如何在模态中动态加载视图，更改同名的名称确认链接上的点击（存款，绘制，提取），重用单个模态。

<ul>
    <?php
    foreach ($info as $info) {
        echo "<li>Titular: {$info->titular} </li> "
            . "<li>Agência: {$info->agencia} </li>"
            . "<li> Conta: {$info->conta} </li> "
            . "<li>Saldo: R$" . number_format($info->saldo, 2, ',', '.') . "</li>";
    }
    ?>
</ul>
<a class="operacao" id="deposito" href="">Deposito</a>
<a class="operacao" id ="saque" href="">Saque</a>
<a class="operacao" id="extrato" href="">Extrato</a>

<div class="modal">
    <?php $this->loadView('deposito', $this->getData()); ?>
</div>

答案

您可以使用jquery在click上加载数据 -

<script type="text/javascript">
     $('#deposito').click(function(){
             $('#modal1 .modal-body').html(htmldata);
             $('#modal1').modal('show', {backdrop: 'static'});
         });

另一答案

我通常会让自己变得容易，并在我的模态中创建三个不同的div，每个div都有不同的id，我根据点击的链接显示和隐藏。

所以例如，我的模态看起来像这样，

<div class="modal">
  <div class='views' id='view_1'>
  ....
  </div>
  <div class='views' id='view_2'>
  ....
  </div>
  <div class='views' id='view_3'>
  ....
  </div>
</div>

然后我创建一个onclick处理程序来隐藏在获取数据后显示模态中的每个div，例如，如此

$('view-1-link').click(function(){
   // get your data with ajax
   $('.views').hide(); // hide all views
   $('#view_1').html(data).show();
})

然后对每个视图链接执行相同操作。

希望这可以帮助！