rails自带In-Place文本编辑,但是我一直想弄一个In-Place的下拉列表前几天在看《Rails Recipes》的时候看见有这么一篇文章,但是试过之后发现在ie下不能正常显示
注释上说是innerhtml的问题。周末在网上搜索了几个解决办法。把自己的实现过程列下来。
js代码放在public文件夹下命名为in_place_select_editor.js
Ajax.InPlaceSelectEditor = Class.create();
Object.extend(Object.extend(Ajax.InPlaceSelectEditor.prototype, Ajax.InPlaceEditor.prototype),
//继承了InPlaceEditor重写了createEditField方法
{
createEditField: function(){
var text;
if (this.options.loadTextURL) {
text = this.options.loadingText;
}
else {
text = this.getText();
}
this.options.textarea = false;
var selectField = document.createElement("select");
selectField.name = "value";
//innerhtml在ie下可能有问题
//改动部分
if (this.options.selectOptionsHTML)
{
OptionsHTML=this.options.selectOptionsHTML.split(",")
for(var i=0; i < OptionsHTML.length; i++) {
selectField.options[i] = new Option(OptionsHTML[i],OptionsHTML[i]);
}
}
else
{
selectField.options[0] = new Option('test','test');
}
//改动结束
$A(selectField.options).each(function(opt, index){
if (text == opt.value) {
selectField.selectedIndex = index;
}
});
selectField.style.backgroundColor = this.options.highlightcolor;
this.editField = selectField;
if (this.options.loadTextURL) {
this.loadExternalText();
}
//关键是在form里面的内容
this.form.appendChild(this.editField);
}
});
view层命名为demo.rhtml
<div>
<span class="in_place_editor_field" id="an_element_we_want_to_edit">Some Value</span>
</div>
<script type="text/javascript">
new Ajax.InPlaceSelectEditor('an_element_we_want_to_edit', '/an/update/url', {
selectOptionsHTML: 'Blah' +
',Some Value' +
',Some Other Value'
});
</script>
如果想象in_place_editor_field那样使用
可以在application_helper.rb加入以下代码
module ApplicationHelper
def in_place_select_editor_field(object, method, tag_options = {},
in_place_editor_options = {})
tag = ::ActionView::Helpers::InstanceTag.new(object, method, self)
tag_options = { :tag => "span" ,
:id => "#{object}_#{method}_#{tag.object.id}_in_place_editor" ,
:class => "in_place_editor_field" }.merge!(tag_options)
in_place_editor_options[:url] =
in_place_editor_options[:url] ||
url_for({ :action => "set_#{object}_#{method}" , :id => tag.object.id })
tag.to_content_tag(tag_options.delete(:tag), tag_options) +
in_place_select_editor(tag_options[:id], in_place_editor_options)
end
def in_place_select_editor(field_id, options = {})
function = "new Ajax.InPlaceSelectEditor("
function << "'#{field_id}', "
function << "'#{url_for(options[:url])}'"
function << (', ' + options_for_javascript(
{
'selectOptionsHTML' =>
%('#{escape_javascript(options[:select_options].gsub(/\n/, ""))}' )
}
)
) if options[:select_options]
function << ')'
javascript_tag(function)
end
end
view层
<P>
<b>Name:</b>
<%= in_place_editor_field :contact, :name %>
<br/>
<b>Country:</b>
<%= in_place_select_editor_field(
:contact,
:country,
{},
:select_options => '中国,美国,英国') %>
</P>
controller层
class ContactsController < ApplicationController
in_place_edit_for :contact,:country
.....
def show
@contact = Contact.find(params[:id])
end
.....
end
最后别忘了在使用前加上
<%= javascript_include_tag "in_place_select_editor" %>
附上show.rhtml结果