[size=large][color=green]在页面中添加 DOM 元素
当你需要向页面表单添加新的元素 而不想响应服务器和刷新页面
。 比如我们经常 使用的附件上传 ， 我们并不想上传一个附件的时候可以添加附件， 反正我们不能为了添加一个 附件这么简单的事情还要相应服务器来刷新页面把。 这里就来举个很简单的例子， 希望各位i能举一反三，触类旁通。
解决方案：
使用 link_to_remote 这个 javascript 辅助方法，
在控制器的布局将 Prototype 库包含进去。
app/views/layouts/upload.rhtml:
<html>
<head>
<title>File Upload</title>
<%= javascript_include_tag 'prototype' %>
</head>
<body>
<%= yield %>
</body>
</html>
现在在视图中放置一个 link_to_remote 的调用，这个调用应该包含你希望更新页面元素的id ， 需要被激发的控制器动作和新元素插入的位置。
app/views/upload/index.rhtml:
<h1>File Upload</h1>
<% if flash[:notice] %>
<p style="color: green;"><%= flash[:notice] %></p>
<% end %>
<% form_tag({ :action => "add" },
:id => id, :enctype =>
"multipart/form-data") do %>
<b>Files:</b>
<%= link_to_remote "Add field",
:update => "files",
:url => { :action => "add_field" },
:position => "after" %>;
<div id="files">
<%= render :partial => 'file_input' %>
</div>
<%= submit_tag(value = "Add Files", options = {}) %>
<% end %
创建一个带有输入框的局部模版
app/views/upload/_file_input.rhtml
<input name="assets[]" type="file"><br />
最后，在控制器中加入 Add_field 动作， 让他返回包含新文件输入框的HTML，需要做的就是一个HTML片段。
app/controllers/upload_controller.rb:
class UploadController < ApplicationController
def index
end
def add
begin
total = params[:assets].length
params[:assets].each do |file|
Asset.save_file(file)
end
flash[:notice] = "#{total} files uploaded successfully"
rescue
raise
end
redirect_to :action => "index"
end
def add_field
render :partial => 'file_input'
end
end
app/models/asset.rb:
class Asset < ActiveRecord::Base
def self.save_file(upload)
begin
FileUtils.mkdir(upload_path) unless File.directory?(upload_path)
bytes = upload
if upload.kind_of?(StringIO)
upload.rewind
bytes = upload.read
end
name = upload.full_original_filename
File.open(upload_path(name), "wb") { |f| f.write(bytes) }
File.chmod(0644, upload_path(name) )
rescue
raise
end
end
def self.upload_path(file=nil)
"#{RAILS_ROOT}/public/files/#{file.nil? ? '' : file}"
end
end[/color][/size]
分享到：
相关推荐
标题"unigrid添加html5 dom元素.rar"暗示了这个压缩包可能包含一个教程或代码示例，指导如何在使用Unigrid组件的Delphi项目中集成HTML5 DOM元素。Unigrid是Delphi中用于显示和编辑表格数据的第三方组件，它允许...
DOM元素遍历是Web开发中的基础技能，用于访问和操作网页上的每一个节点。本篇文章将深入探讨如何遍历DOM元素，包括不同遍历方法、遍历的应用场景以及注意事项。 一、DOM遍历方法 1. 前向遍历（深度优先遍历） ...
**JS操作DOM元素属性和方法大全** 在JavaScript中，DOM（Document Object Model）是一种标准，用于表示HTML或XML文档的结构，并提供了与这些文档交互的方法。DOM是浏览器提供的一种接口，使得JavaScript能够读取、...
总的来说，Propeller.js是一款强大的jQuery插件，它利用jQuery的强大功能，使得网页中的DOM元素可以响应鼠标的拖动而旋转，为用户带来生动的交互体验。通过理解和实践，开发者可以轻松地将其集成到自己的项目中，...
开发者可以把在nextTick中放入需要在数据更新后的DOM操作，这样可以确保操作是在更新循环结束后执行的，此时的DOM是最新的状态，可以正确获取到更新后的DOM元素。 例如，当使用ElementUI的树形组件来渲染结构，并且...
DOM（文档对象模型）是JavaScript操作网页的基石。...无论是获取、添加、删除还是修改DOM元素，都是通过操作DOM树中的节点来实现的。掌握这些基本操作，能够帮助开发者更加灵活地控制网页上的内容。
在实际应用中，我们可以根据需要添加更多的功能和配置选项来满足不同的需求。 结论 ElementUI 滚动条点击 DOM 元素滚动到指定位置的实现细节需要考虑多个方面，包括滚动条的状态、事件处理函数和动画效果。通过...
1. 实时DOM查看：提供一个界面，让用户在浏览器中直观地看到当前网页的DOM结构。 2. 元素选择器：支持CSS选择器或者其他方式快速定位到目标元素。 3. 属性检查：显示选定元素的所有属性，包括ID、class、样式、事件...
3. **添加元素**：使用`createElement()`创建新的DOM节点，然后用`appendChild()`将其添加到文档中。 4. **删除元素**：使用`removeChild()`从文档中移除节点。 #### DOM 中的重要数据类型 在DOM中，有几个关键的...
"跨frame操作DOM元素"是一个重要的技术主题，尤其在处理多框架网页时。本文将深入探讨这个主题，并结合标签“源码”和“工具”，为你揭示如何在不同frame之间交互和操作DOM。 首先，理解frame的概念至关重要。在...
在VB技术文章和教程中，通常会深入探讨如何利用DOM进行更复杂的操作，例如遍历DOM树、处理事件、动态添加和移除元素等。而www.cpu7.net和CSDN这样的平台提供了丰富的编程资源，帮助开发者解决问题和分享经验。 综上...
在Vue.js框架中，`ref`是一个非常重要的特性，它允许开发者引用Vue实例下的DOM元素或组件。通过`ref`，我们可以直接访问到这些元素或组件的实例，从而实现对它们的操作，包括读取数据、调用方法等。本文将详细讲解...
- 动画效果：通过遍历DOM元素并改变其样式，实现复杂的动画效果。 总结，遍历网页中的元素是DOM应用的核心技能之一，它为我们提供了对HTML结构的强大控制，无论是简单的页面操作还是复杂的交互逻辑，都离不开这一...
本文实例分析了jQuery添加删除DOM元素的方法。分享给大家供大家参考，具体如下： 介绍 DOM是Document Object Modeule的缩写，一般来说，DOM操作分成3个方面。 1、DOM Core DOM Core并不专属于javascript，任何一种...
在这个部分，我们将学习更多关于DOM元素操作的方法和技巧。 首先，`getElementById()`是获取特定ID元素的常用方法。通过这个方法，我们可以直接根据元素的ID找到它，并对其进行操作，例如改变其内容、样式或属性。...
在现代Web开发中，为了提升用户体验，动态效果的应用变得越来越普遍，其中DOM元素动画就是一种常见且有效的方式。"基于ES6的DOM元素动画库插件"就是这样一款工具，它允许开发者在DOM元素滚动进入视口时触发特定的...
在"base-elements-master"中，可能包含了源代码、示例、以及如何在项目中引入和使用这些自定义DOM元素的文档。 为了深入理解这个主题，我们需要掌握以下关键知识点： 1. **DOM API**：理解如何通过JavaScript与DOM...
JavaScript提供了多种方式来添加和删除DOM元素，这些操作对于实现如用户交互、动态内容加载等功能至关重要。接下来，我们将详细探讨JavaScript添加和删除HTML DOM元素的方法，并结合实例进行分析。 ### 创建DOM元素...
在JavaScript中，我们可以使用`document.createElement()`方法创建新的表格元素，然后使用`appendChild()`将它们添加到页面上。 2. **数据绑定**：数据存储可以采用数组或对象的形式，其中每一项代表表格的一行。...