jquery-ujs icon indicating copy to clipboard operation
jquery-ujs copied to clipboard

Allow BUTTON elements to use "data-remote"

Open glendel opened this issue 13 years ago • 9 comments

Hello there, wonderful adapter. Is it possible to add : ", button[data-remote]" to the "rails.js" file ?

// Select elements bound by jquery-ujs
inputChangeSelector: 'select[data-remote], input[data-remote], textarea[data-remote], button[data-remote]',

Thanks

glendel avatar Oct 15 '11 15:10 glendel

+1. Would be very useful. I've got a few custom callbacks since it's not there.

purp avatar Dec 20 '11 02:12 purp

Closing as it's a duplicate of #213 (pull request).

JangoSteve avatar Jan 27 '12 22:01 JangoSteve

closing the pull request and opening the issue. Trying to clean up the pull requests.

neerajsingh0101 avatar Apr 02 '12 06:04 neerajsingh0101

any updates on this one?

mlooney avatar May 25 '12 16:05 mlooney

#213 still needs a test case, which I haven't had time to write yet.

JangoSteve avatar May 25 '12 16:05 JangoSteve

Closing this and reopening #213, since it has a pull request.

JangoSteve avatar Aug 14 '12 17:08 JangoSteve

Reopening this for now, because the pull request (and the code suggested here) is not the correct implementation for the feature being requested.

At first I was going to say this is outside the scope of jquery ujs, because button elements are not meant to behave like links (they don't even support the href attribute), so in order to make this work, we'd have to implement and support functionality to create an ajax request from a custom data- attribute and all that, which I think would be outside the scope of jquery-ujs considering buttons are really meant for you to bind your own javascript functionality anyway.

However, then I started thinking, that because we do support custom ajax queries for select and input elements within forms (e.g. to populate a form after selecting from a dropdown box, which is a common use-case), it would only be consistent to add button support for that same use-case within a form.

The problem is, it's not quite that simple implementation-wise, because we support remote inputs and selects by binding to the change event, whereas providing that support for buttons would require binding to the click event, much the same as the remote links are currently implemented.

But then once that event happens, we'd want to do the same functionality as the remote selects/inputs, with hooking up the custom data-url attribute and all.

TL;DR I think it makes sense from a consistency standpoint to support remote buttons, since we're already supporting remote selects and inputs, but it'd require a bit of refactoring. So, I'm just going to keep this open and tagged as an enhancement for now.

JangoSteve avatar Aug 14 '12 18:08 JangoSteve

For what it's worth, if anyone comes across this, there is a way you can have remote buttons without modifying jquery-ujs.

Include this javascript before including jquery-ujs:

$(document).bind('rails:attachBindings', function() {
  $.rails.inputChangeSelector += ', button[data-remote]';
});

And then, include this in your application js:

$(document).delegate('button[data-remote]', 'click', function(e) {
  $.rails.handleRemote($(this));
  e.preventDefault();
});

JangoSteve avatar Feb 19 '13 05:02 JangoSteve

not a terrible workaround. along those lines, a small change to how url is calculated in handleMethod would allow that method to be used for buttons as well.

bcm avatar Feb 19 '13 15:02 bcm