Rails link_to: Do something after confirmation

Question

I'm trying to execute a save action via AJAX using link_to:

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

I want the link to be replaced with Saving... on confirmation, but can't figure out a clean way to do it.

Problems with existing solutions:

disable_with:
If I add :disable_with => 'Saving...' the inner HTML of the link will be replaced instead of the link itself. Don't want that.

onclick:
If I add :onclick => "$(this).replaceWith('Saving...');" the link will be replaced immediately, even if the user cancels the confirmation

Is there a solution that fits with Rails 3 UJS best practices?

score 5 · Answer 1 · edited Jul 23 '15 at 12:37

5

You can use the hook ajax:beforeSend :

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

And then you could add a bind to 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!');
  })

Note: Please refer the comment below which also is very important

edited Jul 23 '15 at 12:37

opensource-developer

2,826
4
38
88

answered Aug 26 '13 at 15:19

MrYoshiji

54,334
13
124
117

4

Note that the success handler never gets called- because you've replaced `$(this)` the binding gets destroyed... – Yarin Sep 02 '13 at 16:05

score 1 · Answer 2 · answered Aug 26 '13 at 15:16

I think this is a case where the functionality you want goes beyond what's offered by Rails' JS helpers. At this point I would just avoid using the :confirm and :remote options to link_to, and implement it in plain jQuery UJS or similar.

You might also think in terms of hiding the link and showing the 'Saving...' span when the user confirms, rather than replacing html; I think it will end up simpler that way, and still give you the effect you're looking for.

score 1 · Answer 3 · answered Aug 26 '13 at 15:25

1

I think you should use confirm:complete event. (details: https://github.com/rails/jquery-ujs/blob/master/src/rails.js)

answered Aug 26 '13 at 15:25

hedgesky

3,271
1
21
36

@hedgesky- This won't work- the `confirm:complete` event fires whether the confirmation was canceled or OK'd. – Yarin Aug 26 '13 at 15:38
You are right, in the doc they say: "The `confirm:complete` event is fired whether or not the user answered true or false to the dialog" – MrYoshiji Aug 26 '13 at 15:44

Yarin · Answer 4 · 2013-09-02T18:18:26.717

Here's how I ended up doing it:

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

(The problem with this solution is that the handlers accumulate if the user clicks, does not confirm, clicks again, etc... Therefore it's not ideal...)

score 0 · Answer 5 · answered Apr 01 '16 at 14:16

0

You can use the confirm:complete event. It gets a second boolean argument passed which tells if the result was cancel or ok.

answered Apr 01 '16 at 14:16

troelskn

115,121
27
131
155

Rails link_to: Do something after confirmation

5 Answers5

Linked