首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Rails 4嵌套表单在编辑中显示,但不在模态中显示

是指在Rails 4框架中,如何实现在编辑页面中显示嵌套表单,但不以模态框的形式展示。

在Rails 4中,可以通过使用嵌套表单和部分视图来实现这个需求。以下是一个完善且全面的答案:

  1. 概念: 嵌套表单是指在一个表单中包含另一个表单的情况。在Rails中,可以使用嵌套属性来实现这个功能。
  2. 分类: 嵌套表单可以分为一对一嵌套和一对多嵌套两种情况。一对一嵌套是指一个表单中包含一个其他表单的情况,而一对多嵌套是指一个表单中包含多个其他表单的情况。
  3. 优势: 嵌套表单可以简化数据的输入和管理,提高用户体验。同时,通过嵌套表单可以实现数据的关联和级联保存,减少数据库操作的复杂性。
  4. 应用场景: 嵌套表单适用于需要在一个页面上同时编辑多个相关联的模型的情况。例如,一个文章编辑页面中可以同时编辑文章的标题、内容和标签。
  5. 推荐的腾讯云相关产品和产品介绍链接地址: 腾讯云提供了丰富的云计算产品和服务,包括云服务器、云数据库、云存储等。具体推荐的产品和介绍链接地址可以根据实际需求进行选择。

在Rails 4中实现嵌套表单的步骤如下:

  1. 在模型中定义关联关系: 在主模型中使用accepts_nested_attributes_for方法来接受嵌套的属性,并在模型中定义关联关系。
  2. 在控制器中设置参数: 在控制器中使用permit方法来允许嵌套属性的参数传递。
  3. 在视图中显示嵌套表单: 在视图中使用fields_for方法来显示嵌套表单的字段,并使用link_to_add_fields方法来添加新的嵌套表单。
  4. 在路由中定义资源: 在路由文件中定义资源的嵌套关系,以便正确处理嵌套表单的提交。

以下是一个示例代码,演示如何在Rails 4中实现嵌套表单的编辑显示:

代码语言:txt
复制
# 模型定义
class Article < ActiveRecord::Base
  has_many :tags
  accepts_nested_attributes_for :tags, allow_destroy: true
end

class Tag < ActiveRecord::Base
  belongs_to :article
end

# 控制器定义
class ArticlesController < ApplicationController
  def edit
    @article = Article.find(params[:id])
  end

  def update
    @article = Article.find(params[:id])
    if @article.update(article_params)
      redirect_to @article
    else
      render 'edit'
    end
  end

  private
    def article_params
      params.require(:article).permit(:title, :content, tags_attributes: [:id, :name, :_destroy])
    end
end

# 视图定义
<%= form_for @article do |f| %>
  <%= f.label :title %>
  <%= f.text_field :title %>

  <%= f.label :content %>
  <%= f.text_area :content %>

  <%= f.fields_for :tags do |tag_fields| %>
    <%= tag_fields.label :name %>
    <%= tag_fields.text_field :name %>
    <%= tag_fields.check_box :_destroy %>
    <%= tag_fields.label :_destroy, 'Remove' %>
  <% end %>

  <%= link_to_add_fields 'Add Tag', f, :tags %>

  <%= f.submit %>
<% end %>

# JavaScript定义
function removeFields(link) {
  $(link).prev('input[type=hidden]').val('1');
  $(link).closest('.fields').hide();
}

function addFields(link, association, content) {
  var new_id = new Date().getTime();
  var regexp = new RegExp('new_' + association, 'g');
  $(link).before(content.replace(regexp, new_id));
}

$(document).on('click', '.remove_fields', function(e) {
  e.preventDefault();
  removeFields(this);
});

$(document).on('click', '.add_fields', function(e) {
  e.preventDefault();
  var association = $(this).data('association');
  var content = $(this).data('content');
  addFields(this, association, content);
});

通过以上步骤,就可以在Rails 4中实现嵌套表单的编辑显示,而不以模态框的形式展示。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Android TextView显示图片的4种方式详解

我们知道,TextView控件一般是用来显示文本的,而图片一般是用ImageView控件来显示。 那TextView能否显示图片呢?答案是肯定的!下面列出常见的4种方式。...1、XML文件中指定属性值 这种方式应该是最常用的了,TextView的左上右下显示图片,可用 android:drawableLeft android:drawableTop android:...start和end值是用图片来取代的文本范围,flags是用来标识 Span 范围内的文本前后输入新的字符时是否把它们也应用这个效果。...4、通过继承TextView方式 这种方式的原理是通过继承TextView,并重写onDraw(),让图片直接画到文本上,这会导致图片跟文本重叠,它们之间的间距不好控制。...以上就是Android TextView显示图片的4种方式,每种方式都是自己的应用场景,大家根据自己的情况选择正确的方式

6.5K20
  • django admin详情表单显示添加自定义控件的实现

    开发中有需求详情显示里外键字段内容,并且添加按钮弹窗内容,以及按钮跳转内容。...首先先讲解下思路,admin中有几个界面,一个是展示的list界面,一个是详情的model界面,model其实就是详情detail,里面记录了此条数据的全部内容,精简来说就是一个form表单的内容展示...这个时候我们就可以详情内看见button了,但是相对应的,detail的表单添加后,add的表单也会出现一个button,这个不是我们想要的,所以就要想办法让button只存在于detail界面...而弹出窗口的值获取可以form添加一个hidden字段,value为我们想要获取的值,js取值赋值即可。...刷新页面即可; 以上这篇django admin详情表单显示添加自定义控件的实现就是小编分享给大家的全部内容了,希望能给大家一个参考。

    4.9K20

    模态对话框-B 类产品设计细节:对话框 vs 抽屉

    不要让用户模态组件上进行需要额外信息(这些信息不在上面)的复杂决策。   ...例如: 使用模态对话框来追加销售机票之外的更多服务,该对话框显示现在购买可以省162 美元,但却找不到为什么会省这个额度的钱:   案例对比对话框的模态 vs 非模态   文档工具语雀模态对话框:...登录状态失败提醒   语雀的进行关联操作的非模态对话框,一个短小的表单:文字链设置(这里也可以使用气泡卡片组件)   Gmail 中点击「写邮件」按钮,右下角打开非模态小对话框,让用户参考下面的邮件撰写新邮件...模态抽屉 vs 气泡卡片   文档工具 ,产品功能和交互都很简洁轻量,没有出现对话框组件,文档插入图片或文件、编辑导航、导入文档等稍重的操作使用抽屉,而插入表情、标签等位置指向明确、操作很轻的使用气泡卡片...例如:为一个表单选择组件,从应用场景来看,对话框和抽屉皆可;从交互维度,该表单的填写需要参考表单的父级页面的内容,则确定选择非模态抽屉模态对话框,不需要再从长短考虑。

    1.8K20

    vue里面事件修饰符.stop使用案例

    当一个元素嵌套在另一个元素内部,并且两者都有相同的事件处理函数时,.stop 可以防止事件从子元素冒泡到父元素。这对于列表中点击某个子元素时不触发列表项的点击事件非常有用。...模态阻止点击外部关闭: 当你模态显示一个弹出窗口或者对话框时,你希望用户点击模态框外部时不关闭模态框,但是点击模态框内部的元素时可以执行相应的操作。...表单提交时阻止冒泡: 处理表单提交时,有时候你可能希望提交表单时阻止事件继续传播,以便执行一些其他的操作,比如数据验证或者异步请求。....stop 修饰符可以确保提交表单时不会触发其他与表单提交相关的事件。...阻止父组件的事件监听器执行: Vue.js ,你可能有一个父子组件嵌套的场景,父组件可能会监听某些事件,而子组件可能也有自己的事件处理逻辑。

    32210

    react模态表单总结

    还有就是表单提交时,是使用表单上form的事件,还是从form中提取值后提交,也是有选择的,前者可以用绑定form的form获取表单数据,后者可以绑定form的事件,前者的话数据验证再提交函数,后者的话可以根据...antd的框架特性formitem上设置rules来做校检,并且显示提示信息。...表单如果是放在模态的,那么当模态显示时,需要得到要显示的数据,或者要确定是那一条数据,一般情况下我会再当前组件设置一个currentData来指代当前数据,并将其传入模态框,并且将visibale...这里有个问题,如果表单提交后,当前组件需要更新,那么还需要传递一个函数给模态框,方便模态框提交数据后再调用更新函数,关于提交函数是传递过去,还是定义在当前组件,我有如下的看法,一般的情况下我会定义模态...,这样做到功能隔离,谁的事情谁来做,而不是父组件定义好了再传递到子组件,这样增加了组件的耦合性。

    8110

    Material Design — 按钮( Buttons)

    但是,由于卡片具有灵活的布局,因此可以将按钮放置适合内容和上下文的位置,同时保持产品内的一致性。 非标准的提示框和模态窗口 非标准提示框和模态窗口中的按钮放置取决于它们包含内容的复杂程度。...---- 扁平按钮(Flat button) 用法 平面按钮印材料上。 不会浮起,点击时会填充颜色。...可以以下位置使用扁平按钮: · toolbars上 ·提示框,将按钮操作与对话框内容统一起来 ·Inline, with padding,因此用户可以轻松找到它们 ?...可编辑分段式下拉菜单按钮 可编辑分段式下拉菜单按钮的当前状态位置是可编辑的(例如用来选择文字大小的下拉菜单)。 点击当前状态位置会触发相应的动作并且当前状态会变成可编辑。点击下拉箭头会显示所有状态。...例如,当聚焦一个切换按钮时,焦点可能会同时显示的其他切换按钮。

    3.9K160

    如何使用Prometheus监控CentOS 7服务器

    /databases/mydb.sqlite3" >> ~/.bashrc 本教程,您将在生产模式下运行PromDash,因此请将RAILS_ENV环境变量设置为production。...单击“ 新建服务器”,然后表单,为Prometheus服务器指定任何名称。...显示表单,为您的目录命名,例如My Dashboards,然后单击Create Directory。 提交表单后,您将被带回主页。立即单击“ 新建仪表板”按钮以创建新仪表板。...显示表单,为仪表板命名,例如Simple Dashboard,然后从下拉菜单中选择刚刚创建的目录。 提交表单后,您将能够看到新的仪表板。 您的信息中心已有一个图表,需要进行配置。...将鼠标悬停在图表的标题(即标题)上会显示各种图标,可让您配置图表。要更改其标题,可以单击“ 图形和轴设置”图标(左起第四个),然后“ 图形标题”字段中键入新标题。

    6.5K00

    MFC属性表单和向导对话框的使用

    每次使用MFC创建一个框架时,需要一步步选择自己的程序的外观,基本功能等选项,最后MFC会生成一个基本的程序框架,这个就是向导对话框;而属性表单则是另外一种对话框,表单上有多个属性页,每点击某一页,会显示该页的内容...,最好的例子是Visual C++6.0的Option对话框; 属性表单的创建: 属性表单上由许多属性页组成,每个属性页都可以可视化的编辑环境编辑,需要添加的资源名称是对话框下面的IDD_PROPPAGE_LARGE...创建了多个属性页就需要派生多个新类; 创建了属性页,下面就需要创建属性表单,属性表单不需要编辑资源,可以从类CproppertyPage中派生一个新类,用来表示新表单类; 为了将属性页加到属性表单上需要在对应的构造函数调用...AddPage函数,最后需要调用该类的DoModal或者Create函数创建一个模态或者非模态的属性表单一下代码中有三个对应的属性页的类(CProp1、CProp2、CProp3)和一个属性表单的类...向导的创建与使用: 向导所使用的类与属性表单相同,这里就不在说明,为了创建向导,需要在调用DoModal或者Create之前调用SetWizardMode()函数,这样之前的属性表单就变为了向导程序

    1.6K10

    bootstrap3-dialog打开嵌套iframe窗口

    bootstrap3-dialog是一款第三方提示框插件,但是使用过程感觉对打开新的远程页面不太友好,而打开表单嵌套在原页面又显得代码非常臃肿,所以对bootstrap3-dialog进行二次封装...,height/weight就是高/宽,callback就是dialog关闭时的回调函数,比如新增数据时关闭新增页面调用回调函数刷新列表页,其中对页面的嵌套就是通过对dialog的内容加载嵌套一个iframe...我们还需要点击关闭,确定这些按钮来关闭页面,这样我们就需要在opener和dialog建立起联系,这里采用的是给页面的message事件注册监听,收到指定的消息,则关闭dialog,能这样做的原因是dialog模态窗口实质上就是原页面基础上加上了一个...,遮罩层和dialog都会以iframe为基准,但有时候这样会显的窗口太小使用不方便,所以我们这里要再加一种方法,打开全局dialog,就是如果在iframe打开,dialog要显示iframe的顶级父级窗口中...: 使用时引用jquery,bootstrap-dialog.js,bootstrap-dialog.css,dialog.js 提供一个调用示例: OpenDialog("editdialog","编辑表结构

    42920

    对话框、模态框和弹出框看起来很相似,它们有何不同?

    图片Light dismiss:如果字体选择器打开并且我单击正在编辑的文本,字体选择器将自动关闭 Light dismiss 是我们今天已经可以 JavaScript 构建的东西,很多网站都有 light...(注意:将焦点困在一个元素不使该元素成为模态元素,如果它是真正的模态元素,则焦点无法移动到外部元素,因为外部元素不是可聚焦的)。...您可以在对话框包含一个以 method="dialog" 提交的表单。该表单将在提交时关闭对话框。 例子 插入链接对话框,其背后为暗色背景。...图片非模态对话框:当这个聊天小部件打开时,我仍然可以访问下面的表单和内容。...相比之下,模态对话框并不具有 popover 所具有的特征。 一些例子: 国家选择器 您正在为在线商店构建结账表单一个字段,用户需要选择一个国家。他们最终必须选择这个国家,因为它是必需的字段。

    3.7K00

    如何使用Prometheus监视您的Ubuntu 14.04服务器

    4步 - 启动Prometheus服务器 输入安装Prometheus服务器的目录: cd ~/Prometheus/server 启动Prometheus之前,必须首先为其调用配置文件prometheus.yml.../databases/mydb.sqlite3" >> ~/.bashrc 本教程,您将在生产模式下运行PromDash,因此请将RAILS_ENV环境变量设置为production。...单击“ 新建服务器”,然后表单,为Prometheus服务器指定任何名称。...显示表单,为您的目录命名,例如My Dashboards,然后单击Create Directory。 提交表单后,您将被带回主页。立即单击“ 新建仪表板”按钮以创建新仪表板。...显示表单,为仪表板命名,例如Simple Dashboard,然后从下拉菜单中选择刚刚创建的目录。 提交表单后,您将能够看到新的仪表板。 您的信息中心已有一个图表,需要进行配置。

    4.3K00

    干货!如何减少Figma内存使用量?减少卡顿现象发生?

    将所有涉及的设计师的所有组件、线框、设计、插图、原型、屏幕截图、档案和工作空间整齐地分布一个巨大的文件的多个页面(pages)上,这似乎很方便。 这种方式只适合于小型项目。...我们建议的做法是将所有可能的按钮元素(如图标状态、标签和下划线)塞进一个单独的组件。然后,此模板的实例嵌套在所有按钮变体,以便以后编辑。...按钮通常嵌套在许多其他组件,并且隐藏层被继承。 批量编辑组件 坦率地说,您几乎不需要在第一次定义按钮后对其进行编辑。...这样您就可以不更改相应组件的情况下更改实例的结构。 假设您有一个模态组件。您可能希望具有不同内容的不同上下文中使用它。您可能想在此处添加简单的文本或插图。...在这里有一个简单的图像示例,当您将鼠标悬停在信息图标上时会显示工具提示。如果您想在图像组件内显示所有带有 可见/不可见 工具提示的组合,您最终会得到 8 个图像变体和 4 个按钮变体。

    2.9K10

    模态框的最佳实践

    2 内容概要 来自 Wikipedia 的定义:模态框是一个定位于应用视窗定层的元素。它创造了一种模式让自身保持一个最外层的子视察下显示,并让主视窗失效。用户必须在回到主视窗前它上面做交互动作。...模态框用处 抓住用户的吸引力 需要用户输入 在上下文下显示额外的信息 不在上下文下显示额外的信息 不要用模态显示错误、成功或警告的信息。保持它们页面上。 模态框的组成 退出的方式。...例如,用户淘宝上看中了一款商品,想登陆购买,此时弹出登陆模态框的体验就要远远好于跳转到登陆页面,因为用户模态登陆后,就可以直接购买了。...但在一些围绕数据来做复杂处理的应用,如 ERP、CRM 产品中用户通常关注点都在一个表单和围绕表单做的一系列操作,页面来回切换或复杂的看似酷炫的动画可能都会影响效率。...这种无状态模态框的方式,模态框需要显示复杂逻辑的场景,会自然将初始化逻辑写在父级,当模态框出现在循环列表,往往会引发首屏触发 2-30 次模态框初始化运算,而这些运算最佳状态是模态显示时执行一次

    1.4K40
    领券