Question

我发现了一段YouTube视频，展示了如何使用模态和JavaScript创建弹出窗体。我能够为我的按钮实现这一点。但是，我想扩展相同的功能，以覆盖我在同一视图上的几个按钮。我以为我可以使用相同的JS代码来实现这一点，但只有第一个按钮工作，后续按钮不起作用。只有当我重写JS代码并更改每个按钮的id时才有可能;这对我来说是低效的，并且会逐字介绍。

同样，在模式弹出窗口中保存表单数据后，我希望在弹出模式中加载模型视图，而不将页面重定向到页面controller/view。我不是JavaScript的大师，但不知怎的，我觉得这是可能的。以下是YouTube Video的链接。

main.js文件

$(function() {
    // get the click of the create button
    $('#btnSeat1').click(function () {
        $('#modal').modal('show')
            .find('#modalContent')
            .load($(this).attr('value'));
    });
});

下面是启动事件onclick和模态

的按钮

<?= Html::button('Book Now &raquo;', ['value' => Url::to('create'), 'class' => 'btn btn-primary', 'id' => 'btnSeat1', 'schedule_id' => $model->schedule_id]) ?>

<?php
    Modal::begin([
        'header'=>'<h4>Book Seat</h4>',
        'id'=>'modal',
        'size'=>'modal-lg',
    ]);

    echo "<div id='modalContent'></div>";

    Modal::end();
?>

Answer 1

您可以使用class而不是id。

变化：

<?= Html::button('Book Now &raquo;', ['value' => Url::to('create'), 'class' => 'btn btn-primary', 'id' => 'btnSeat1', 'schedule_id' => $model->schedule_id]) ?>

类似于：

<?= Html::button('Book Now &raquo;', ['value' => Url::to('create'), 'class' => 'btn btn-primary loadPopup', 'schedule_id' => $model->schedule_id]) ?>

请注意，我已删除id部分并添加了课程loadPopup。

现在是js：

$(function() {
    // get the click of the create button
    $('.loadPopup').click(function () {
        $('#modal').modal('show')
            .find('#modalContent')
            .load($(this).attr('value'));
    });
});

它处理带有类＆＃34; loadPopup＆＃34;的元素的所有点击。可以是多个，而只能有一个具有特定id的元素。

使用JavaScript在模式中加载表单视图，在Yii2中

1 个答案: