2013-08-26 5 views
6

Ich versuche, eine Aktion speichern über AJAX auszuführen link_to mit:Rails link_to: Tun Sie etwas nach Bestätigung

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

Ich möchte die Verbindung mit <span>Saving...</span> auf Bestätigung ersetzt werden, kann aber ein nicht herausfinden, saubere Art, es zu tun.

Probleme mit bestehenden Lösungen:

disable_with:
Wenn ich :disable_with => '<span>Saving...</span>' der innere HTML-Code des Link hinzufügen wird mich anstelle der Verbindung ersetzt werden. Ich will das nicht.

Onclick:
Wenn ich hinzufügen :onclick => "$(this).replaceWith('<span>Saving...</span>');" der Link sofort ersetzt werden, auch wenn der Benutzer die Bestätigung

Gibt es eine Lösung annulliert, die mit Rails passt 3 UJS Best Practices?

Antwort

1

Ich denke, das ist ein Fall, in dem die Funktionalität, die Sie wollen, über das hinausgeht, was die JS-Helfer von Rails bieten. An dieser Stelle würde ich einfach vermeiden, die Optionen confirm und: remote für link_to zu verwenden und sie in jQuery UJS oder ähnlichem zu implementieren.

Sie könnten auch in Bezug auf das Verstecken des Links denken und zeigen die "Saving ..." - Spanne, wenn der Benutzer bestätigt, anstatt HTML zu ersetzen; Ich denke, dass es auf diese Weise einfacher wird und Ihnen immer noch den Effekt gibt, den Sie suchen.

5

können Sie verwenden, um den Haken ajax:beforeSend:

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

Und dann könnte man eine Bindung an ajax:success hinzufügen:

$('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!'); 
    }) 

Hinweis: Bitte lesen Sie den Kommentar unter denen auch sehr wichtig ist

+4

Beachten Sie, dass der Erfolgshandler nie aufgerufen wird - weil Sie '$ (this)' ersetzt haben, wird die Bindung zerstört ... – Yarin

0

Ich denke, Sie sollten verwenden bestätigen: Ereignis abschließen. (Details: https://github.com/rails/jquery-ujs/blob/master/src/rails.js)

+0

@ hedgesky- Dies wird nicht funktionieren - das 'confirm: complete'-Ereignis wird ausgelöst Bestätigung wurde storniert oder OK. – Yarin

+0

Sie haben recht, in der Dokumentation sagen sie: "Das 'confirm: complete' Ereignis wird ausgelöst, unabhängig davon, ob der Benutzer den Dialog als richtig oder falsch beantwortet hat" – MrYoshiji

0

Hier ist, wie ich es tun endete:

<%= 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>'); });" %> 

(Das Problem bei dieser Lösung ist, dass die Handler akkumulieren, wenn der Benutzer klickt, nicht bestätigen, klickt erneut, etc .. Daher ist es nicht ideal ...)

0

Sie können das Ereignis verwenden. Es wird ein zweites boolesches Argument übergeben, das angibt, ob das Ergebnis "Abbrechen" oder "OK" war.