Szyny link_to: Zrób coś po potwierdzeniu

Question

Próbuję wykonać strzał działania poprzez AJAX przy użyciu link_to:

<%= link_to 'Save', image_path(image), method: :patch, 
     data:{ confirm: 'Save image?', remote: true } %> 

chcę link do zostać zastąpione <span>Saving...</span> na potwierdzenie, ale nie można dowiedzieć się czysty sposób, aby to zrobić.

Problemy z istniejącymi rozwiązaniami:

disable_with:
Jeśli dodać :disable_with => '<span>Saving...</span>' wewnętrzna HTML odnośnik zostanie zastąpiony zamiast samego łącza. Nie chcę tego.

onclick:
Jeśli dodać :onclick => "$(this).replaceWith('<span>Saving...</span>');" link zostanie natychmiast wymienić, nawet jeśli użytkownik anuluje potwierdzenie

Czy istnieje rozwiązanie, które pasuje do szyn 3 UJS najlepsze praktyki?

Answer 1

Myślę, że jest to przypadek, w którym pożądana funkcjonalność wykracza poza to, co oferują pomocnicy JS w Railsach. W tym momencie po prostu unikałbym użycia opcji: confirm i: remote do link_to i implementuj go w prostym jQuery UJS lub podobnym.

Można również pomyśleć w kategoriach ukrywania łącza i pokazywania zakresu "Zapisywanie ...", gdy użytkownik je zatwierdza, zamiast zastępowania html; Myślę, że w ten sposób skończy się to prostsze i nadal da efekt, którego szukasz.

Answer 2

Można użyć haka ajax:beforeSend:

$('a#my_link_to').bind('ajax:beforeSend', function(evt, xhr, settings) { 
    $(this).replaceWith('<span>Saving...</span>'); 
}) 

A potem można dodać wiążą się ajax:success:

$('a#my_link_to') 
    .bind('ajax:beforeSend', function(evt, xhr, settings) { 
    $(this).replaceWith('<span id="saving">Saving...</span>'); 
    }) 
    .bind('ajax:success', function(evt, data, status, xhr) { 
    $('span#saving').replaceWith('Saved!'); 
    }) 

Uwaga: patrz komentarz poniżej, które również jest bardzo ważne

Answer 3

Myślę, że powinieneś użyć potwierdzić: zakończyć wydarzenie. (Szczegóły: https://github.com/rails/jquery-ujs/blob/master/src/rails.js)

Answer 4

Oto jak skończyło się to robi:

<%= link_to 'Save', image_path(image), method: :patch, 
     data:{ confirm: 'Save image?', remote: true }, 
     onclick: "$(this).one('ajax:beforeSend', 
      function(e) { $(this).replaceWith('<span>Saving...</span>'); });" %> 

(Problem z tego rozwiązania jest to, że koparki gromadzić jeśli użytkownik kliknie, nie potwierdza, kliknie ponownie, etc .. Dlatego nie jest idealny ...)

Answer 5

Możesz użyć zdarzenia confirm:complete. Otrzymuje on drugi argument logiczny, który mówi, czy wynik został anulowany, czy ok.