Question

我在一个活动表格中有2个模态。让我们说第一个是模态票，第二个是合同票。第一次，我点击按钮显示模态票，它很好，但是当我点击按钮显示模态合约时，它也会调用脚本模态票或其他。为什么呢？

这是我的代码。

<?php $form = ActiveForm::begin(); ?>
<div id="BtnSearchTicket">
    <?= Html::button('Search Ticket', [
        'value' => Url::to('../ticket-timbangan/list'),
        'class' => 'btn btn-primary',
        'id' => 'BtnModalTicketList',
        'data-toggle'=>"modal",
        'data-target'=>"#modalTicketList",
    ]) ?>
</div>

<div id="BtnSearchContract">
    <?= Html::button('Search Contract', [
        'value' => Url::to('../contract/list'),
        'class' => 'btn btn-primary',
        'id' => 'BtnModalContractList',
        'data-toggle'=>"modal",
        'data-target'=>"#modalContractList",
    ]) ?>
</div>

<?php ActiveForm::end(); ?>
<?php
    Modal::begin([
        'header' => 'Ticket List',
        'id' => 'modalTicketList',
        'size' => 'modal-lg',
        'class' => 'style=width:auto'
    ]);
    echo "<div id='modalContentTicket'></div>";
    Modal::end();
?>
<?php
    Modal::begin([
        'header' => 'Contract List',
        'id' => 'modalContractList',
        'size' => 'modal-lg',
        'class' => 'style=width:auto'
    ]);
    echo "<div id='modalContentContract'></div>";
    Modal::end();
?>

<?php
$script = <<< JS
$('#BtnModalTicketList').click(function(e){
    e.preventDefault();
    $('#modalTicketList').modal('show')
        .find('#modalContentTicket')
        .load($(this).attr('value'));
   return false;
});

$('#BtnModalContractList').click(function(e){
    e.preventDefault();
    $('#modalContractList').modal('show')
        .find('#modalContentContract')
        .load($(this).attr('value'));
   return false;
});
JS;
$this->registerJs($script);
?>

这是控制台网络浏览器中的错误

GET http://localhost/pks/web/ticket-timbangan/get-ticket?id=1 404 (Not Found)
GET http://localhost/pks/web/contract/get-contract?id=2 404 (Not Found)

请帮忙。

Answer 1

试一试：在表单上使用一个模态：

    <?php $form = ActiveForm::begin(); ?>
<div id="BtnSearchTicket">
    <?= Html::button('Search Ticket', [
        'value' => Url::to('../ticket-timbangan/list'),
        'class' => 'btn btn-primary showModal',
        'id' => 'BtnModalTicketList',
        'title' => 'Search Ticket',
    ]) ?>
</div>

<div id="BtnSearchContract">
    <?= Html::button('Search Contract', [
        'value' => Url::to('../contract/list'),
        'class' => 'btn btn-primary showModal',
        'title' => 'Search Contract',
        'id' => 'BtnModalContractList',
    ]) ?>
</div>

<?php ActiveForm::end(); ?>
<?php
    Modal::begin([
        'headerOptions' => ['id' => 'modalHeader'],
        'id' => 'modal',
        'size' => 'modal-lg',
        'closeButton' => [
            'id'=>'close-button',
            'class'=>'close',
            'data-dismiss' =>'modal',
            ],
        'class' => 'style=width:auto',
        'clientOptions' => [
        'backdrop' => false, 'keyboard' => true
        ]
    ]);
    echo "<div id='modalContent'></div>";
    Modal::end();
?>

<?php
$script = <<< JS
$(document).on('click', '.showModal', function(){

        if ($('#modal').hasClass('in')) {
            $('#modal').find('#modalContent')
                    .load($(this).attr('value'));
            document.getElementById('modalHeader').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';
        } else {
            $('#modal').modal('show')
                    .find('#modalContent')
                    .load($(this).attr('value'));
            document.getElementById('modalHeader').innerHTML = '<h4>' + $(this).attr('title') + '</h4>';
        }
    });
JS;
$this->registerJs($script);
?>

Answer 2

从查看代码开始，我注意到您使用Url::to()函数的方式。不确定为什么使用../。我已经摆弄了在表单中使用多个模态，代码类似于你正在做的事情。我建议您尝试更改Url::to()功能，如下所示：

Url::to('/ticket-timbangan/list')

和

Url::to('/contract/list')

另一个建议是尝试

Yii::$app->urlManager->createUrl('/ticket-timbangan/list')

和

Yii::$app->urlManager->createUrl('/contract/list')

如果有帮助，请告诉我。

Answer 3

首先，非常感谢kalu帮助我2天解决问题的人。包含网格的两个模态需要定义不同的类以防止执行先前的脚本。 'value' => Url::to('../ticket-timbangan/list')和'value' => Url::to('../contract/list'),都有两个gridview和相同的select-row类。这个类是问题的根本原因，因为它是同一个类并执行这两个脚本。谢谢Kalu，你节省了我的一天。

yii2 - 一种活动形式的两种模态

3 个答案: