bootstrap切换tab页局部刷新_Rails 用 RJS 简单有效的实现页面局部刷新
我们时常在做项目的时候会遇到这样的需求,页面上有个基本数据的下拉框,用于选择一些数据,如:项目版本号、联系人、收件地址、银行账号列表什么的。
而需求可能会要求说可以在这个页面随时增加那些下拉框的选择值,而不是另开窗口。
于是我们可能需要实现一个浮动窗口,里面包含新增表单,实现表单 AJAX 提交,最后在刷新主窗口的下拉菜单控件。
这里介绍一下我最近实现的一个简单方式:
主表单页面:
用 link_to + remote 的方式实现一个 Ajax 请求的点击
AddressesController 保持标准的 Rails new 函数结构
class AddressesController < ApplicationController
def new
@address = Address.new
end
def create
@address = Address.new(address_params)
respond_to do |format|
if @address.save
format.html { redirect_to addresses_path, notice:'地址新增成功。' }
format.js
else
format.html { render :new }
format.js
end
end
end
end
新增 new.js.erb (以后会大量用 js.erb 的做法),由于前面是 remote 请求,HTTP Header 里面带的信息会让 Rails 渲染 js.erb 的模板
这里渲染 _form.html.erb 生成地址表单的 HTML:
var html = "";
// bootbox 弹窗插件 http://bootboxjs.com/
bootbox.dialog({
title: "新增联系地址",
message: html
});
然后我们就得到了这样的界面:
然后正题来了,我们怎样才能在地址新增成功以后,以无刷新的方式更新主表单上面那个下拉框呢?
这就是本帖要将的技巧,非常简单,而且适用于任何地方!
我们新增一个 create.js.erb,前面说过 remote 的请求,Rails 会选择 js.erb 的模板来渲染
// 用 Ajax 载入当前页面,找到下拉框的 Dom 的新 HTML,再替换目前页面的下拉框 Dom
var selector = '.form-field-user-address';
$.get(location.href, function(html) {
var doc = $(html).find(selector);
$(selector).replaceWith(doc);
});
bootbox.hideAll();
var html = "";
// 保存失败,直接替换浮动窗口上面的 HTML 为新的 form render 结果
// 因为 @address 包含验证错误信息,所以 render 出来的 HTML 也包含验证信息
$('form.new_address').replaceWith(html);
为了很多地方都能用到,于是我把上面的变成一个公共函数:
app.coffee
window.App =
refreshDom: (selector) ->
$.get location.href, (html) ->
doc = $(html).find(selector)
$(selector).replaceWith(doc)
create.js.erb 就可以简化了:
App.refreshDom('.form-field-user-address');
bootbox.hideAll();
var html = "";
$('form.new_address').replaceWith(html);
扩充阅读
bootstrap切换tab页局部刷新_Rails 用 RJS 简单有效的实现页面局部刷新相关推荐
- bootstrap切换tab页局部刷新_bootstrap在 刷新页面,tab选择页面不会改变。
您可以直接复制代码 注意在同级别文件夹中引用 相应js 和 css. 实现tab影响 关键看bootstrap的 data-toggle= tab $(document).ready(function ...
- bootstrap切换tab页局部刷新_AdminLTE实现局部刷新
前言 AdminLTE是一个基于boostrap的前端模板,里面集成了好多插件,可以说方便又臃肿,毕竟不是所有插件都用得到,.好不容易找到个喜欢的前端模板,无奈每次点击菜单都会整个页面刷新一次,网上找 ...
- Rails 用 RJS 简单有效的实现页面局部刷新
我们时常在做项目的时候会遇到这样的需求,页面上有个基本数据的下拉框,用于选择一些数据,如:项目版本号.联系人.收件地址.银行账号列表什么的. 而需求可能会要求说可以在这个页面随时增加那些下拉框的选择值 ...
- 纯html+css实现点击切换tab页
核心内容是使用单选框实现css的点击事件 大致分析一下dom结构,被切换的tab页和按钮放在同一个li内 一共需要切换三个页面,也就是说需要有三个li,首先写一下基本dom结构 一.基础结构 我使用的 ...
- html的tab页面切换刷新,切换tab页,页面局部刷新,地址栏路径修改
需求: 做一个类似百度这种,切换tab,页面展示局部刷新的效果. 思路: tab展示的切换,使用display控制.但是,如果页面刷新,则无法保留显示在tab2的效果,因而在地址栏加参数标记.但如果用 ...
- 切换tab页,页面局部刷新,地址栏路径修改
需求: 做一个类似百度这种,切换tab,页面展示局部刷新的效果. 思路: tab展示的切换,使用display控制.但是,如果页面刷新,则无法保留显示在tab2的效果,因而在地址栏加参数标记.但如果用 ...
- bootstrap在一个tab页调用另一个tab页的方法
在我们开发过程中使用bootstrap框架的时候,会经常使用bootstrap的标签页,如果我们在tab子页面中操作的数据,需要在父tab里改变状态到时候,并且不关闭当前子tab页,父tab页只是局部 ...
- 记录QT在实时显示摄像头数据时候切换TAB页出现异常
最近在做一个项目,用一个TAB做页控件,里面放了不同的widget,其中Awidget是实时输出摄像头数据,是通过opencv转qimage,一开始正常,当我快速在A与B之间切换时就出现了如下错误: ...
- 切换tab页时,tab页中的echart变形问题
本文为博主原创,未经允许,不得转载: 在两个tab页中,分别展现了两个echart图表,同样的格式与写法,但只有在默认选中的tab页中的图表显示的是正常的, 但进入另一个tab页中时,图表则产生了变形 ...
最新文章
- nginx反向代理原理及配置详解
- 音视频低延迟应用的四个技术实践
- cad连续标注数字123怎么弄_实例讲解CAD模型与布局中的各种比例
- [GNU LD系列 3.1]一些基本的链接脚本概念
- 卸载oracle9i精简版,oracle9i精简客户端|oracle9i客户端精简版下载_红软基地
- python plt 保存为emf图像
- Python-datetime模块
- react学习笔记10:显示隐藏效果和tab切换效果
- 普元EOS7.5生成入参为数组的WebService接口
- 英语四级单选测试软件,英语四级报告单选纸质还是电子?选择电子版报告单可能更好...
- 快递查询APP隐私条款
- 国科大学习资料–模式识别--第四次作业
- Win10中无法加载 .iso文件的问题一例
- 田野调查手记·浮山篇(五)
- zynq7000学习笔记
- 中文版智能ABC如何移植到英文OS
- 常用SQL语句(一)
- bzoj3398 [Usaco2009 Feb]Bullcow 牡牛和牝牛
- vue 数组中不满足条件跳出循环
- 微信小程序布局干货——来自微信官方