Question

美好的一天，

我遇到Yii2的问题，dunno在网上搜索后没有找到答案。

更新了问题以及更多详情

这是一个总结我试图通过ajax调用控制器动作来改变我的视图的div内容 - 我调用的控制器动作除了呈现包含Jui Tab的另一个视图文件之外什么都不做。问题是它在未处理的较低部分加载主页+我的内容。如果我访问ajax请求调用的操作的URL，它会正确显示没有问题 - 当我尝试将其附加到另一个视图上的div时，会出现此问题。

以下是我的观点的截图

页面在访问URL上正确显示

https://www.dropbox.com/s/77ovpl6fnznjs1p/Page%20displaying%20correctly%20on%20visiting%20URL.png?dl=0

使用渲染视图更新div会以错误的方式显示内容

https://www.dropbox.com/s/6nld4wk1p9pkhz9/Screenshot%20of%20the%20update%20view.png?dl=0

A-初始查看代码这是我的第一个视图代码 - 包含一个div，你单击以激活ajax调用，另一个div调用内容获取响应

brense.PHP

<?php
use yii\helpers\Html;
use yii\jui\Tabs;
?> <div style="background: blue; cursor: pointer; width:100px;" id="brense">Click ME</div><div id="content">Content</div>

B- Ajax（JS文件）`$（'＃brense'）。click（function（）{

   alert('click Received');
    $.ajax({
    url:'index.php?r=assignments/get-me2',
Type:'GET',
success:function(data){
 alert("bombo");
    $('#content').append('<div>Appended Content</div>');
    $('#content').html(data);
}      
});

}）; `

C-控制器操作 - 由Ajax调用

public function actionGetMe2(){
         return $this->renderAjax('tab');
     }

D-Tab的视图应该加载到div内容

中

 <?php

 use yii\helpers\Html;
 use yii\jui\Tabs;

 ?>
  <div>
   <?php echo Tabs::widget(
      ['items'=>[
                ['label'=>'One','content'=>'Content 1'], 
                ['label'=>'Two  ','content'=>'Content 2'],
               ],
      ]
     );
  ?>
 </div>

Answer 1

好的，这是问题所在。 Yii和Yii2具有自动编号的元素。它有一些名为w0，w1，w2的元素。在普通页面中你有0次，Yii负责这一点。因为您使用Ajax引入代码，所以页面实际上是一个新页面，因此它拥有自己的w0元素。如果你看一下它所调用的代码

$('#w0').tabs();

现在单独查看页面时工作正常，但在页面上根本无法正常工作，因为在页面上插入内容后，您有2个w0元素。它基本上调用了第一个选项卡（在我的测试中它是导航栏）并将其搞砸了。解决方案是为标签提供id。

所以你的tab.php文件应该是：

<?php

use yii\helpers\Html;
use yii\jui\Tabs;

?>
<div>
    <?php echo Tabs::widget(
        [
            'id' => 'tabs',
            'items'=>[
            ['label'=>'One','content'=>'Content 1'],
            ['label'=>'Two  ','content'=>'Content 2'],
        ],
        ]
    );
    ?>
</div>

这可以解决您的问题，但您也有其他问题。就像加载jquery和jquery ui 2次，1与主页面，另一个与你的ajax。现在使用renderAjax停止，你应该使用renderPartial。

您的代码应该是：在主视图文件中：

<?php
use yii\jui\JuiAsset;
JuiAsset::register($this);
?>

    <div style="background: blue; cursor: pointer; width:100px;" id="brense">Click ME</div><div id="content">Content</div>

<?php
$script = <<<EOD
$('#brense').click(function(){
   alert('click Received');
    $.ajax({
        url:'index.php?r=site/get-me2',
        Type:'GET',
        dataType: 'html',
        success:function(data){
            $('#content').html(data);
            $('#tabs').tabs();
        }
    });
});

EOD;
$this->registerJs($script);

我正在顶部注册jquerui ui资产，如果你已经加载它将不再加载它。我有一个带来ajax的函数，该函数也调用$（'＃tabs'）。tabs（）;实际创建jquery ui标签。

您的控制器

public function actionGetMe2(){
    return $this->renderPartial('tab');
}

Yii2异常行为 - 通过ajax调用使用render ajax action的jui tab小部件更新div

1 个答案: