资讯专栏INFORMATION COLUMN

Yii2.0 模态弹出框+ajax提交表单2

sumory / 2854人阅读

摘要:上一章介绍了模态框的的添加弹出和验证,本章对上一章做个补充。代码如下按钮效果图模态框代码然后我们修改控制器中的方法,把改为模态框效果图表单添加提交表单代码验证代码验证规则效果如下这样就实现了提交表单。

上一章 https://segmentfault.com/a/11... 介绍了模态框的的添加 弹出和models验证,本章对上一章做个补充。
代码如下:

    ".Yii::t("yii","Create Sales"), ["create","actionID"=>1] ,["class" => "btn blue","data-toggle"=>"modal","data-target"=>"#modal_ajax"])?>  
    

按钮效果图:

模态框代码:


然后我们修改控制器中的create方法,把render改为renderAjax

模态框效果图:

表单添加id:

提交表单ajax代码:

controllers ajax验证代码:

models rules验证规则:

效果如下:

这样就实现了ajax提交表单。

如果想实现pjax 刷新 就需要在index 开启pjax:

添加代码:

function sales_pjax(){
    $.pjax.reload({container:"#dynagrid-1-pjax"});
}

在表单提交的时候调用:

这样整个ajax提交表单就完成了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/31948.html

相关文章

  • Yii2.0 模态出框+ajax提交表单2

    摘要:上一章介绍了模态框的的添加弹出和验证,本章对上一章做个补充。代码如下按钮效果图模态框代码然后我们修改控制器中的方法,把改为模态框效果图表单添加提交表单代码验证代码验证规则效果如下这样就实现了提交表单。 上一章 https://segmentfault.com/a/11... 介绍了模态框的的添加 弹出和models验证,本章对上一章做个补充。代码如下: 按钮效果...

    nanchen2251 评论0 收藏0
  • Yii2.0 模态出框+ajax提交表单

    摘要:如题我们使用模态弹出框提交表单首先我们把视图的按钮添加和。代码如下添加请假单在视图添加如下代码来显示模态弹出框修改后的效果如下然后我们修改控制器中的方法,把改为即可指向你的在添加上验证规则效果如下这样就实现了提交表单 如题 我们使用模态弹出框+ajax提交表单 首先我们把index视图的create按钮添加data-toggle 和 data-target。代码如下: 在ind...

    chinafgj 评论0 收藏0
  • Yii2.0 模态出框+ajax提交表单

    摘要:如题我们使用模态弹出框提交表单首先我们把视图的按钮添加和。代码如下添加请假单在视图添加如下代码来显示模态弹出框修改后的效果如下然后我们修改控制器中的方法,把改为即可指向你的在添加上验证规则效果如下这样就实现了提交表单 如题 我们使用模态弹出框+ajax提交表单 首先我们把index视图的create按钮添加data-toggle 和 data-target。代码如下: 在ind...

    EsgynChina 评论0 收藏0
  • Bootstrap使用模态框modal实现表单提交出框

    摘要:模态框插件模态框是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。 Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。如果您想要单独引用该插件的功能,那么您需要引用...

    wind3110991 评论0 收藏0
  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要:转载来源包管理器管理着库,并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想,使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。 转载来源:https://github.com/jobbole/aw... 包管理器管理着 javascript 库,并提供读取和打包它们的工具。•npm – npm 是 javasc...

    netmou 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<