ruby on rails 3 - jquery-ujs ajax events are not handled -
i'm trying implement ajaxy signup rails 3. i'm using jquery-ujs , remote form. access signup form $.get
request, , displayed correctly. signup form remote:
form_for @user, :remote => true, :html => {"data-type" => "html"} |f|
in application.js, if ajax request getting form successful, i'm trying bind handler ajax events unobtrusive javascript:
var load_remote_form = function(evt) { var href = $(this).attr('href'); // load form template $.get(href, {}, function(data) { $('body').append(data); $('form[data-remote]').bind("ajax:beforesend", function(e) { console.log("caught beforesend!"); }); }); evt.preventdefault(); }; $(document).ready(function() { $('a#signup').click(load_remote_form); });
chrome's development tools show event "ajax:beforesend
" binded, never handled (i have nothing in javascript console when send form, though in rails log see request processed correctly , response send). can bind other events same selector (form[data-remote]
), click
, , handled correctly.
ajax events binded through .live
not handled well. if form rendered part of layout (i.e. on stand-alone page http://localhost:3000/signup/), binded "ajax:beforesend
" handled correctly.
my controller (just case, may badly written, i'm pretty sure works):
class userscontroller < applicationcontroller layout :layout_for_type def new @user = user.new end def create @user = user.new(params[:user]) if @user.save session[:user_id] = @user.id flash[:notice] = "you have registered." redirect_to root_url else if request.xhr? render :action => 'new', :status => :unprocessable_entry, :layout => false else render :action => 'new' end end end def layout_for_type request.xhr? ? nil : "application" end end
what doing wrong? may there better approach implementing such "double-ajaxed" forms?
silly me. i've overlooked potential source of problems. had
javascript_include_tag :all
in application layout, , caused including both jquery.js
, jquery.min.js
page. turned out cause of strange behavior. removing jquery.min.js
did trick. hope might useful someday.
Comments
Post a Comment