jQuery wiążą ajax: sukces nie działa w szynach 3 aplikacja dla nowo utworzonych (ajax) przedmiotów

Question

** Edytował ten post, ponieważ znalazłem problem jest naprawdę w niezdolności szyn do powiązania z ajax: funkcja sukcesu.

*** Korzystanie szyny 3.2.3

Dzięki za poświęcenie czasu na przeczytanie i starają się pomóc.

dodaję prosty zanikanie funkcji na AJAX: Sukces elementu przed usunięciem, jak następuje:

$(document).ready(jQuery(function($) { 
    $('.delete').bind('ajax:success', function() { 
     $(this).closest('div').fadeOut(); 
    }); 
})); 
#For some reason had to pass the $ into the function to get it to work, 
#not sure why this is necessary but doesn't work unless that is done. 

Po tym, chciałem stworzyć obiekt o niezauważalnych jQuery, gdy użytkownik dodaje coś i mam również działające przyciski usuwania. Zrobiłem plik create.js.erb, który jest wywoływany po utworzeniu nowego elementu - a tworzenie działa dobrze, ale przycisk usuwania nie może uzyskać dostępu do zdarzenia ajax: success.

Usuwa dane z bazy danych po kliknięciu, ale znak .fadeOut nigdy nie jest związany z nią, więc nie znika. Create.js.erb jest następujący:

#$("div").append(html) here, then call the function below to try and bind the ajax:success function 
$('.delete').bind('ajax:complete', function() { 
    $(this).closest('div').fadeOut(); 
}); 

Jeśli zmienię to wiązać z funkcją click, to działa, ale to nie uwzględnia nieudanego wywołania ajax:

#$("div").append(html) here, then call the function below to try and bind the ajax:success function 
    $('.delete').bind('click', function() { 
     $(this).closest('div').fadeOut(); 
    }); 

Tak więc coś musi być z wiązaniem z ajaxem: sukces po utworzeniu elementu. Czy macie jakiś pomysł, dlaczego tak się dzieje? Czy muszę zrobić coś specjalnego w szynach, aby nowo renderowany element rozpoznał zdarzenia ajaxowe? Każdy kierunek byłby mile widziany!

P.S. Sterownik dla metody usuwania jest niższa w przypadku gdy ktoś może być w stanie wykryć problem istnieje:

def destroy 
    @user = User.find(params[:user_id]) 
    @item = @user.item.find(params[:id]) 
    @item.destroy 

    respond_to do |format| 
     format.html { redirect_to user_path(@user) } 
     format.json { head :no_content } 
     format.js { render :nothing => true } 
    end 
end 

Answer 1

Problem brzmi jak wiążą się dzieje przed elementem jest generowany. Spróbuj tego:

$(document).on('ajax:success', '.delete', function(e) { 
    $(e.currentTarget).closest('div').fadeOut(); 
}); 

Answer 2

miałem ten sam problem, ponieważ moja metoda forma obsługi zwrócony zwykły napis. Upewnij się, że renderujesz coś, co jQuery może przetworzyć:

def handle_form 
    ... 
    render :json => {:what => 'ever'} 
    # or 
    render :nothing => true 
end 

Answer 3

Ostatnio zrobiłem podobne rzeczy używając Rails 3.2.3. Używam również

$('#dialog-form').bind('ajax:success', function() { 
}) 

i działa dobrze ...

Answer 4

sprawdzić, czy pojawia się błąd składniowy (lub podobny) poprzez łapanie ajax:completed. Sprawdź tam argument status. W moim przypadku było to parseerror z powodu niedopasowania typu MIME.

Można również ustawić punkt przerwania w jquery_ujs.js.

Zobacz też to pytanie jQuery ajax request not triggering JS response

Answer 5

Choć jest to stara sprawa, mam zaktualizowaną odpowiedź na to, co działa się ten sam problem.

Począwszy od wersji 1.9, jQuery nie będzie już uważał pustego reponsu (renderowania nic: prawda) za sukces/wykonane.Oznacza to, że w kontrolerze powinieneś zwrócić pusty obiekt JSON.

respond_to do |format| format.json { render: {}.to_json } end

Answer 6

Dla mnie to dlatego używamy szczupły i szablony są „name.slim”. jeśli zmienimy je na "name.slim.html", ajax: success wystrzeli poprawnie.

Rozwiązaniem, którego używam, jest dodanie formatu do deklaracji renderowania w kontrolerze.

Więc mamy coś takiego:

render :new, layout: false, formats: [:html] 

Answer 7

Nawet jest to stary pytanie, żadna z odpowiedzi naprawdę pomógł mi jak miałem zwyczaj dialogowe potwierdzenia i ajax: sukces Wyzwalanie całkowicie inny element.

W celu znalezienia który element jest trigered przez Ajax w takim przypadku, można najpierw użyć kodu:

$(document).on('ajax:success', 'a', function(evt, data, status, xhr) { 
    $(".log").text("Triggered ajaxComplete handler."); 
    // Check what is the value of $(this), and you will see what button has triggered the ajax success action, and you can start from there 
});