Question

我有一个视图checkin和message，我想在message/create页面中将modal显示为checkin/index

这是我到目前为止所做的事情

 <div class="checkin-index">

<h1><?= Html::encode($this->title) ?></h1>
<?php // echo $this->render('_search', ['model' => $searchModel]); ?>

<div class="common-button">
    <p>
        <?= Html::a('Send Message', ['message/create'] ,['class' => 'btn btn-danger','id' => 'buttonMessage','data-pjax' => '0']) ?>
    </p>
</div>
<?php
    Modal::begin(['id' =>'modalMessage']);
    Modal::end();
?>

<?php Pjax::begin(['id' => 'event-grid', 'timeout' => false]); ?>

 <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'showOnEmpty'=>true,
        'columns' => [
            [
                'class' => 'yii\grid\CheckboxColumn',
            ],
            [

                'attribute' => 'event_id',
                'label' => 'Event Title',
                'value' => 'event.title'
            ],
            [
                'attribute' => 'fullName',
                'label' => 'Name',
                'value' => 'users.fullname',
            ],
            [
                'attribute' => 'user_id',
                'label' => 'Email',
                'value' => 'users.email',
            ],
            'user_type',
        ],
    ]);
 ?>
<?php Pjax::end(); ?>

<?php
// You only need add this,
$this->registerJs('
    var gridview_id = ""; // specific gridview
    var columns = [2]; // index column that will grouping, start 1

    var column_data = [];
        column_start = [];
        rowspan = [];

    for (var i = 0; i < columns.length; i++) {
        column = columns[i];
        column_data[column] = "";
        column_start[column] = null;
        rowspan[column] = 1;
    }

    var row = 1;
    $(gridview_id+" table > tbody  > tr").each(function() {
        var col = 1;
        $(this).find("td").each(function(){
            for (var i = 0; i < columns.length; i++) {
                if(col==columns[i]){
                    if(column_data[columns[i]] == $(this).html()){
                        $(this).remove();
                        rowspan[columns[i]]++;
                        $(column_start[columns[i]]).attr("rowspan",rowspan[columns[i]]);
                    }
                    else{
                        column_data[columns[i]] = $(this).html();
                        rowspan[columns[i]] = 1;
                        column_start[columns[i]] = $(this);
                    }
                }
            }
            col++;
        })
        row++;
    });
');

     $this->registerJs(
         '$( document ).ajaxStart(function() {
                    $("body").addClass("loading");
            });

            $( document ).ajaxComplete(function() {
                    $("body").removeClass("loading");
            });'
     );

＆GT;

我还创建了一个javascript来加载并显示模态，该模态位于AppAsset，代码为

$(function() {
$('#buttonMessage').click(function(e) {
    e.preventDefault();
    $('#modal').modal('show').find('.modal-content')
        .load($(this).attr('href'));
   });
});

但是，当我点击send message按钮时，它不会打开模态，但会在firebug中显示一些错误

Synchronous XMLHttpRequest on the main thread is deprecated because of its 
detrimental effects to the end user's experience.
For more help, check http://xhr.spec.whatwg.org/.

那我在这里做错了什么？我是否需要指定来自我正在调用的不同model和controller的某个地方？

Answer 1

尝试这种方式：

$(function() {
   $('#buttonMessage').click(function(e) {
     e.preventDefault();
     $('#modal').modal('show').find('.modal-content')
     .load($(this).attr('href'));
   });
});

带有多个控制器的yii2中的Bootstrap Modal

1 个答案: