在页面中添加 DOM 元素

最新推荐文章于 2022-04-15 16:04:37 发布

最新推荐文章于 2022-04-15 16:04:37 发布 · 143 阅读

文章标签：

#Flash #Rails #JavaScript #prototype #ActiveRecord #ViewUI

技术专栏收录该内容

55 篇文章

订阅专栏

本文介绍如何在Ruby on Rails应用中使用link_to_remote方法动态地向页面添加新的DOM元素，例如附件上传表单，无需刷新页面。通过具体示例展示了如何在控制器中设置Prototype库，并在视图中实现动态添加文件输入字段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[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]