程序员经验分享-hwhale

如何在 yii2 php 中添加 spinner/loader

2024-02-25

我想在我的其中一个表单中添加一个旋转器/加载器。场景很简单：当我按下create按钮，然后它将显示一个旋转器/加载器。点击创建按钮后，将调用 Web 服务，以便旋转器/加载器将从调用开始到调用结束显示。

下面是我的控制器：

$m = MetersInventoryStore::findOne($_REQUEST['selected_meters']);
$msn = $m->meter_serial; // current selected meter serial number is saved

$date_time = str_replace(' ', 'T', date('Y-m-d H:i:s')); // current date time

$api_url = 'http://xx.xxx.xxx.xxx:7000/api/meters/GetByMsn/' . $msn . '/' .$date_time; // my base URL

$curl = curl_init($api_url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_TIMEOUT, 1000);
curl_setopt($curl, CURLOPT_HTTPHEADER, array('Authorization:key'));

$curl_response = curl_exec($curl);
$json = json_decode($curl_response);
$meter_alive = $json->data->Response;
.
.
.
.
// my other code that is saving data
.
.
.
.
return $this->render('create', ['model' => $model,]);

提交按钮如下：

<div class="form-group">
   <?= Html::submitButton($model->isNewRecord ? 'Verify Communication' : 'Update', ['id'=> 'spin','name'=>'create','class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-success']) ?>

</div>

如上所述，当我按下Verify Communication按钮会调用网络服务，在此期间我想显示一个微调器/加载器。

为了创建/显示旋转器/加载器，我搜索了很多文章。

  1. 显示加载中 http://www.yiiframework.com/extension/yii2-showloading/
  2. 卡提克旋转器 https://github.com/kartik-v/yii2-widget-spinner
  3. 提交微调器 http://www.yiiframework.com/extension/yii2-submit-spinner/
  4. Yii2 模型加载器 https://packagist.org/packages/alesar/yii2-widget-modal-
  5. Yii2 Jquery 加载 https://packagist.org/packages/loveorigami/yii2-jquery-loading

但上述文章都没有提到完整的实现细节。尽管我已经尝试了文章中提到的每一步。

任何帮助将不胜感激。


为什么不将加载器放在每个页面加载上，而不是放在提交按钮上。这可以通过更改主布局来完成。

<style>
        /*loader css*/

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}



</style>

添加函数脚本。

<script>
var myVar;

function myFunction() {
  myVar = setTimeout(showPage, 0000);
}

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("container").style.display = "block";
}
</script>

最后，通过将onload函数与body绑定来调用该函数。

    <body onload="myFunction()">
        <div id="loader"></div>
<section id="container" style="display:none;" class="animate-bottom">
</section>
    </body>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

yii2

Spinner

yii2advancedapp

如何在 yii2 php 中添加 spinner/loader 的相关文章

  • 用更好的模式替换开关（Javascript）

    我必须升级我的应用程序以根据用户类型和角色属性显示页面 目前 我使用一个简单的 switch 语句来根据用户类型来执行此操作 例如 switch type case a return CONSTANT ONE case b return C

  • 如何在 Windows 网络中的 Intranet Web 应用程序中获取用户的用户名

    我内部有一个简单的 HTML 页面 它只显示一个表单并要求用户填写 我想自动捕获Windows域用户名和机器名 并将其与表单中收集的数据一起提交 我可以在客户端这样做吗 HTML JavaScript 或者我被迫在服务器端执行此操作 我还不

  • 获取选定的文本框 ID jQuery

    在我的表单中 我有几个文本框 例如txtItemCode1 txtItemCode2 etc 如果我在其中任何一个上按 Enter 键 我会使用此代码执行某些操作 但我想获取选定的文本框 ID 我怎样才能做到这一点 变量 id 应该有您正在

  • 指定 HTML5 输入类型 = 日期的值输出？

    我想将本机日期选择器添加到我的应用程序中 该应用程序当前使用遗留的本地系统 日期输入支持尚未广泛普及 但如果我可以基于兼容性提供这两种实现 那就太理想了 有没有办法指定 HTML 日期选择器给出的值的输出 歌剧的默认设置是yyyy mm d

  • IE提示打开或保存服务器的json结果

    兼容模式下的Internet Explorer通过ajax回调方法从服务器获取数据 如果我想保存数据或打开数据 会弹出一个对话框 如何摆脱它 客户说 ajax type POST data UIdlgHolder gt form seria

  • 在 jQuery 选择器上使用正则表达式查找基于 ids 的所有元素

    我有几个具有唯一 id 的元素 如下所示 div div div div div div 我希望使用 jQuery 可以实现以下功能 item top each function this hide 我对正则表达式没有很好的掌握 希望得到一

  • 如何将React JS状态保存到本地存储中

    我不知道如何将 React js 状态存储到本地存储中 import React Component from react import App css import auth createUserProfileDocument from

  • 等待异步 grunt 任务完成

    我收到了 grunt 设置 其中一个新任务应该执行 grunt task run 已经存在的任务 要执行的任务是异步的 新任务应该等待异步任务完成 执行此操作的首选方法是什么 grunt 已经涵盖了这一点 你应该将你的任务声明为异步任务 并

  • 使用 eval 时不会受到 XSS 威胁

    我正在制作 不是现在 但我仍然对这个感到好奇 一款使用 HTML5 和 JS 的游戏 我想要的是人们可以插入自定义脚本 但要安全 function executeCustomJS code eval code bad 当然这段代码非常糟糕

  • 无法从 JQuery ajax 调用接收 JSON

    我已经确定来自服务器的 JSON 是有效的 手动进行 ajax 调用 但我真的很想使用 JQuery 我还使用 firebug 确定发送到服务器的 post URL 是正确的 但是 错误回调仍然被触发 解析错误 我还尝试了数据类型 文本 我

  • select2 验证 - 选择至少一个值

    我在用select2 http ivaynberg github io select2 and jQuery 验证 http jqueryvalidation org 插件 select2 的 HTML div class form gro

  • 当 Chrome 中嵌套滚动中的数据更改时防止页面滚动

    我在页面中有一个固定大小的元素 带有 溢出 滚动 其内容经常更改 我预计该元素内部发生的更改会影响该元素的滚动 但不会影响页面滚动 但是当这个元素位于页面顶部时 页面本身开始滚动 我怎样才能防止这种情况发生 要重现此行为 我在 chrome

  • 基本 jQuery 动画：省略号（三个点依次出现）

    我需要的 我需要一个动画省略号 一个点一个接一个地出现 动画需要循环播放 我想通过 jQuery 实现这一点 动画序列 Frame 1 等待您的选择 Frame 2 等待您的选择 Frame 3 等待您的选择 Frame 4 等待您的选择

  • jQuery 相当于 underscore.js 的 groupBy

    jQuery 中是否有一个内置函数可以执行相当于http underscorejs org groupBy http underscorejs org groupBy 有什么解决方法吗 Thanks 不 jQuery 不是为数据处理而设计的

  • JavaScript setTimeout 和更改系统时间会导致问题

    我注意到如果我设置setTimeout未来1分钟 然后将我的系统时间更改为过去5分钟 setTimeout功能将在 6 分钟后触发 我这样做是因为我想看看夏令时系统时钟更改期间会发生什么 我的 JavaScript 网页使用setTimeo

  • 如何计算一行中Flexbox项目的数量？

    网格是使用 CSS flexbox 实现的 Example http jsbin com jumosicasi edit html css js output 本示例中的行数为 4 因为我出于演示目的固定了容器宽度 但是 实际上 它可以根据

  • Yii2 无效调用：设置只读属性

    我有一个Post具有多对多关系的模型Tags 在 Post 模型中定义 public function getTags return this gt hasMany Tags className id gt tag id gt viaTab

  • YouTube 点击时禁用 HTML5

    有没有办法让我们通过javascript禁用HTML5视频的 播放 暂停 点击全屏 功能 然后在我们再次需要时将其放回去 我不知道你是否可以禁用它们 但你可以使用 css 删除它们 video webkit media controls f

  • HTML5 地理定位 - 在 iOS 上无法始终工作

    目前正在使用 HTML5 地理定位 我已经在所有网络浏览器上测试了它 它似乎工作正常 然而 当我在 iPad 上测试地理定位时 它在 iPad mini 上始终有效 但当我将其放在更大的 iPad iPad 2 上时 位置似乎并不总是有效

  • jQuery appendTo(), json 在 IE 6,7,8 中不起作用

    我这两天绞尽脑汁想找到解决办法 我使用 jQuery ajax 从数据库中获取值 以便在另一个框发生更改时更新一个框 php 脚本从数据库中获取值 然后输出 json 它在 FF 中工作正常 但在所有版本的 IE 中 选择框都不会更新 我已

随机推荐

  • 如何用python画动态规划表

    What is a good way to draw a dynamic programming such as this one with the path in python 我在网上查了一下 我看到了pygame http pygam

  • 从 PHP 关联数组中弹出键和值

    假设 S 是 PHP 中的关联数组 我需要从中检索并提取第一个元素 包括值和键 我会用 value1 array pop S 但它只给了我价值 我可以用 K array keys S key1 array pop K value1 arra

  • 在graphviz中从节点到边绘制边

    是否可以在 graphviz 中从节点绘制一条边到现有边的中心 我想复制化学或生物网络中常见的这种类型的反应图 Thanks Peter 是的 您可以使用不可见节点 例如这个例子 https stackoverflow com questi

  • Amazon Elasticsearch - 并发批量请求

    当我通过一个批量请求向 ElasticSearch 添加 200 个文档时 速度非常快 但我想知道是否有机会加快这一进程并发执行 20 个并发执行 每个并发执行 10 个文档 我知道这效率不高 但也许有机会通过并发执行来加快进程 较低的并发

  • 使用 get_meta_tags() 和 get_headers() 进行异常处理？

    在 PHP 中 我正在使用get meta tags and get headers 但是 当出现 404 错误时 这两个函数会发出警告 有什么办法让我抓住它吗 谢谢 get headers不会在 404 上抛出警告 错误 但是get me

  • 使用 Maven 为 OSGi“包装”jar 的好方法

    例如 我正在查看 OPS4J 上的 PAX 工具 this one http www ops4j org projects pax construct maven pax plugin wrap jar mojo html我想我找到了一个好

  • PHP 中如何检查对象是否为空？

    如何在 PHP 中查找对象是否为空 以下是其中的代码 obj保存 XML 数据 如何检查它是否为空 My code obj simplexml load file url 您可以转换为数组 然后检查它是否为空 arr array obj i

  • 1>/dev/null 在 DOS 中相当于什么？ [复制]

    这个问题在这里已经有答案了 我想抑制在 DOS 下运行的脚本的输出 类似于 nix 环境下的以下内容 command 1 gt dev null 我怎样才能做到这一点 它应该是 gt NUL在 DOS 和 Windows 控制台上

  • $HADOOP_HOME 已弃用，Hadoop

    我尝试在单节点集群 我自己的labtop ubuntu 12 04 上安装Hadoop 我按照这个教程逐行检查了两次 http www michael noll com tutorials running hadoop on ubuntu

  • ？' aria-label='F# - 什么是数组<'T>？'> F# - 什么是数组<'T>？

    In this 上一个问题 https stackoverflow com questions 16968060 f why cant i access the item member我在 F 中了解到array lt T gt 不等于Sy

  • 如何在现有项目之上创建 SVN 版本控制？

    在工作中 我们有一个非常大的项目 大约 30 000 个文件 由 Borland StarTeam 源代码控制系统管理 我们想迁移到 SVN 但有一些障碍 最重要的一个问题是在所有开发人员的虚拟机上设置存储库的问题 有两种基本方法可以在硬盘

  • 使用 JavaScript 创建倾斜的 Div 和对象

    是否可以使用 JavaScript 创建这样的 倾斜菜单 请参见下文 前提是我希望它们是 相对的 以便根据屏幕尺寸适当调整大小 您可以使用 CSS 转换来完成此操作 并使用其他一些技巧 div transform rotate 45deg

  • 用空格包裹运算符的 Emacs 模式/函数

    我记得 Emacs 有一种模式 或者是一个选项 我记不清了 它通过在运算符后面放置空格来美化代码 例如 包裹 有空格 还有其他一些我不记得的很酷的东西 我认为这几乎是特定于语言的问题 但我通常在逗号后加空格 然后换行 有空格 关于这个模式有

  • 使用javascript读取Json文件数据？

    function uploadJsonFunction var jsonURL C Users My Documents new WebContent JsonFiles TreeJson countries json countries

  • 列组的 SSRS 矩阵分页符

    我目前正在使用 SSRS 2012 但显然遇到了障碍 是否可以在列组变量的每个新实例上设置分页符 我在下面给出了一个基本的例子 我选择了跨组分页符选项 下图 我注意到有一个类似的帖子 没有有效的答案 另一个列组 分页问题 https sta

  • Intellij：转到自动装配 bean 定义

    我正在寻找通过 java 代码中的 Autowired 依赖项找到 bean 定义的快速方法 假设我有 Autowired private JdbcTemplate template 我想让IDEA告诉我哪个xml文件是定义的templat

  • .NET Core 6 SQL Server 连接（无需实体框架）

    我是 NET Core 的新手 我已经在中定义了连接字符串appsettings json像这样 ConnectionStrings TestBD Server localhost Database Test Trusted Connect

  • .Net Maui - 尝试构建时操作超时

    我在构建 运行默认的新毛伊岛应用程序时遇到问题 我创建一个新的 NET Maui App Preview 并且不对自动生成的代码库进行任何更改 但是当我尝试构建或运行应用程序时 我收到以下超时错误 Severity Code Descrip

  • ggplot R 次要 y 轴的更改限制

    我有一个与此线程非常相似的问题在ggplot2中组合条形图和折线图 双轴 https stackoverflow com questions 41764312 combining bar and line chart double axis

  • 如何在 yii2 php 中添加 spinner/loader

    我想在我的其中一个表单中添加一个旋转器 加载器 场景很简单 当我按下create按钮 然后它将显示一个旋转器 加载器 点击创建按钮后 将调用 Web 服务 以便旋转器 加载器将从调用开始到调用结束显示 下面是我的控制器 m MetersIn

热门标签