2011-02-09 1 views
2

레일 3으로 ajaxy 가입을 구현하려고합니다. jquery-ujs 및 원격 양식을 사용하고 있습니다. $.get 요청으로 가입 양식에 액세스하고 올바르게 표시됩니다. 이 등록 양식은 원격 : 내 application.js에서jquery-ujs ajax 이벤트가 처리되지 않습니다.

form_for @user, :remote => true, :html => {"data-type" => "html"} do |f| 

, 양식을 얻기를위한 아약스 요청, 나는 눈에 거슬리지 자바 스크립트에서 아약스 이벤트에 대한 처리기를 바인딩 성공하려고 해요 경우 :

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의 개발 도구는 이벤트 "ajax:beforeSend"이 바인드되어 있음을 보여 주지만 처리되지 않습니다 (양식을 보내면 자바 스크립트 콘솔에 아무것도 없습니다. 레일 로그에서 요청이 올바르게 처리되었고 응답이 전송됨을 알 수 있습니다.)). click처럼 다른 이벤트를 동일한 선택 자 (form[data-remote])에 바인딩 할 수 있으며 올바르게 처리됩니다.

.live을 통해 바인딩 된 Ajax 이벤트도 처리되지 않습니다. 그러나 양식을 레이아웃의 일부로 렌더링하면 (예 : http://localhost:3000/signup/과 같은 독립 실행 형 페이지에 있음) 바인딩 된 "ajax:beforeSend"이 올바르게 처리됩니다.

내 컨트롤러

은 (다만 경우에, 그것은 잘못 기록 될 수 있지만, 나는 그것이 작동 확신) :

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 successfully 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 

내가 잘못을하고있는 중이 야 뭐? 그러한 "이중 ajaxed"양식을 구현하기위한 더 나은 접근법이있을 수 있습니까?

답변

2

어리석은 나를. 나는 또 다른 잠재적 인 문제의 근원을 간과했다. 내 응용 프로그램 레이아웃

javascript_include_tag :all 

가 있고, 그 jquery.jsjquery.min.js 내 페이지에 모두 포함 일으켰습니다. 그 이상한 행동의 원인이 밝혀졌습니다. jquery.min.js을 제거하면 트릭을 만들었습니다. 언젠가 누군가에게 유용 할 수 있기를 바랍니다.