使用 yii-jui 进行 Ajax 更新后的 JQuery 可排序初始化

问题描述 投票:0回答:2

我遇到了一个问题,正在寻找解决它的最佳方法而不改变 Yii2 框架。

我有一个页面,其中包含可以排序的元素。我正在使用 yii-jui 可排序小部件,初始视图后一切正常。

在某些情况下,我需要使用每个ajax 的所有元素更新内容。这也有效。

问题是,当我在ajax调用后更新内容时,可排序元素的jquery初始化及其容器会丢失。

构建初始视图时,yii-jui 扩展将用于初始化可排序元素的 javascript 放置在文档就绪函数内的 Javascript 块中。正如我已经说过的,这在第一次查看时效果很好。但是,当我更新内容时,初始化会丢失,并且我需要再次运行 javascript 初始化。我无法执行此操作,因为未触发文档就绪功能。

一个可能的解决方案是将可排序元素的所有 JS 初始化放入一个单独的函数中,并在第一个视图之后以及 ajax 更新之后显式调用它。困难在于,我认为无法使用 yii-jui 小部件执行此操作,因为它将所有初始化(事件和选项)作为单个调用放在文档就绪函数中。

我考虑了以下事项

    为 yii-jui 小部件添加一个选项来放置初始化步骤 变成 JS 函数
  • 使用视图事件钩子来操作 JS 在构建 HTML 之前进行捆绑/资产设置,以便我可以 创建我需要的功能
  • 不要使用本机选项 yii-jui 小部件,但编写了我自己的单独初始化脚本。
关于如何最好地进行有什么想法吗?

感谢您的任何意见

安迪·波特

php jquery ajax yii2 jquery-ui-sortable
2个回答
1
投票
由于您的视图中已经有 jquery,您需要防止 yii2 通过 ajax 请求再次加载它(您也可以考虑其他一些文件,例如 yii.js):

$view->on(View::EVENT_END_PAGE, function($event){ $positions = $event->sender->jsFiles; foreach($positions as $position => $js){ $new = array_filter($js, function($item){ return !preg_match('/jquery(\.min)?\.js|yii(\.min)?\.js/i', $item); }); $event->sender->jsFiles[$position] = $new; } });

您可以根据需要过滤任意数量的 js 文件,只需将它们添加到

preg_match

 模式即可。


0
投票
我找到了解决办法。

通过“挂钩”视图

EVENT_END_PAGE 事件,我能够更改生成的 Javascript 代码并将其放入函数中。

public function actionIndex() { $this->layout = 'main-full'; Yii::$app->getUser()->setReturnUrl(Yii::$app->request->getUrl()); $this->getView()->on(View::EVENT_END_PAGE, [$this, 'jsAsFunction']); return $this->render('index', [ 'board' => $this->currentBoard, 'columnHtml' => $this->getColumnHtml(), ]); } public function jsAsFunction($event) { $event->sender->js[View::POS_HEAD] = ['var initializeBoard;']; $event->sender->js[View::POS_HEAD] = ['var longPollingTimeout = ' . self::LONG_POLLING_TIMEOUT . ';']; $event->sender->js[View::POS_READY] = array_merge( ['initializeBoard = function() {'], $event->sender->js[View::POS_READY], ['}'], ['initializeBoard();'] ); return true; }

当视图生成内联 Javascript 时,所有数组元素都会内爆在一起。所以我只是将代码包含在函数声明中。之后,稍后即可使用。

重要

    函数声明后必须显式调用
  • 为了使该功能在范围之外可用 jQuery(document).ready 必须将其分配给具有 已在全球范围内声明。因此前两个作业 生成到
  • <HEAD>
     区域。
© www.soinside.com 2019 - 2024. All rights reserved.