Question

我正在使用Bootstrap 4和2amigos扩展的Yii2 x可编辑窗口小部件，其扩展范围为x-vitalet's x-editable。我的视图布局中有一个嵌套的布局。当我不使用嵌套布局时，内联可编辑的效果很好。但是当我使用嵌套布局时，它将无法正常工作。我不确定，但是似乎嵌套布局的CSS和Jquery在布局资产中注册的代码以某种方式覆盖了该代码，该脚本无法运行。也许它有某种冲突。我试图在editable field内而不是在主视图布局内制作nested layout，但是仍然遇到相同的错误（控制台中有2个错误）：

Uncaught TypeError: jQuery(...).editable is not a function

Uncaught TypeError: Cannot read property 'defaults' of undefined

这在我看来效果很好：

 <?php 
use dosamigos\editable\Editable;

$url=Url::to(['home/fetch']);
echo Editable::widget( [
    'model' => $model,
    'name'=>'tema',
    'url' => $url,
    'type' => 'text',
    'mode' => 'pop',    
]);

?>

 <a href="#" id="tema" name="tema" data-type="text" data-pk=<?=$model->id?> data-url=<?=Url::to(['home/fetch']);?> data-title="Enter username"><?=$model->tema?></a>
</h1>
<br/>


<?php

$url = Url::to(['home/fetch']);

$script = <<< JS
$.fn.editable.defaults.mode = 'inline';

$(document).ready(function(){
     $('#tema').editable();
});

JS;
$this->registerJs($script);
?>

实际上，根据https://2amigos.us/open-source/editable-widget，我只需要echo Editable::widget([]);，但它不起作用，因此我对其进行了一些修改，并在此处的vitalet文档中添加了<a>锚标记：{ {3}}

效果很好。

当我使用嵌套布局时出现错误：

<?php 

$url=Url::to(['home/fetch']);
echo Editable::widget( [
    'model' => $model,
    'name'=>'tema',
    'url' => $url,
    'type' => 'text',
    'mode' => 'pop',    
]);

$this->beginContent('@app/views/layouts/layout2.php');
?>
--other HTML goes here--

<a href="#" id="tema" name="tema" data-type="text" data-pk=<?=$model->id?> data-url=<?=Url::to(['home/fetch']);?> data-title="Enter username"><?=$model->tema?></a>
<?php
$this->endContent();

$url = Url::to(['home/fetch']);
$script = <<< JS
$.fn.editable.defaults.mode = 'inline';

$(document).ready(function(){
     $('#tema').editable();
});

JS;
$this->registerJs($script);
?>

我尝试将代码移到nested layout内部，并将$model参数传递给嵌套布局。我什至尝试在use dosamigos\editable\Editable;之后和嵌套布局中制作beginContent()，但都无济于事。请帮忙。谢谢！

使用嵌套布局后出现未捕获的错误：未捕获的TypeError：jQuery（...）。editable不是函数

0 个答案: