Rails渲染表单+ jQuery问题

时间:2011-08-31 01:01:46

标签: jquery ruby-on-rails ruby-on-rails-3 jquery-ui

我对使用渲染表单的jQuery有一点错误。

我有link_to_add_fields来添加嵌套渲染。 问题是当我添加字段时,我的jQuery停止工作。我没有错误,只是我的jquery停止工作。

这是来自helper和jquery的代码

def link_to_remove_fields(name, f)
  f.hidden_field(:_destroy) + link_to_function(name, "remove_fields(this)")
end 

def link_to_add_fields(name, f, association)
  new_object = f.object.class.reflect_on_association(association).klass.new
  fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
    render(association.to_s.singularize + "_fields", :f => builder)
  end   
  link_to_function(name, ("add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}\")"))

end

function add_fields(link, association, content) {

var new_id = new Date().getTime();
var regexp = new RegExp("new_" + association, "g")

$(link).parent().before(content.replace(regexp, new_id));

}

我尝试使用的jquery是来自jQuery UI的datepicker。 我的渲染:

<div class="field">
<div>
    <%= f.label :work_start_date %><br/>
    <%= f.text_field :work_start_date, :class => 'calpicker' %>
</div>
<div>
    <%= f.label :work_end_date %><br/>
    <%= f.text_field :work_end_date, :class => 'calpicker' %>
</div>
<div>
    <%= f.label :value_renovation %><br/>
    <%= f.text_field :value_renovation %>
</div>

<div>
    <%= f.label :note %><br/>
    <%= f.text_area :note, :rows => '3' %>
</div>

</div>

和我的calpicker类的脚本

jQuery(function() {

  // for PikaChoose

  $(".calpicker").datepicker();

});

我看到在link_to_add_field之后我的嵌套渲染与我从控制器设置defaut视图之间的区别(mymodel.nestedmodel.build)

使用mymodel.nestedmodel.build我的班级使用我的calpicker'hasDatepicker',我的渲染我的班级没有这个元素。

我该怎么办?用我的萤火虫我没有看到任何错误。

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

您遇到此问题是因为您在加载DOM之后以及$(".calpicker").datepicker();运行之后添加字段,因此不包含新字段以具有日期选择器。

您需要使用.live函数来实现此功能,因此请查看本文可能会有所帮助:http://www.vancelucas.com/blog/jquery-ui-datepicker-with-ajax-and-livequery/

提取和修改来源:

jQuery(function() {
    $('input.calpicker').live('click', function() {
        $(this).datepicker({showOn:'focus'}).focus();
    });
});