Inserting data-remote form via JavaScript in a Rails App, ujs not catching remote

Question

I have a simple form that is being appended to a container:

<form action="/something" data-remote="true" method="post">
  <input type="submit" />
</form>

My understanding was that rails_ujs.js captures all submit events, so I wouldn't need to reattach any events when inserting new forms. However, this form is not being picked up as a remote form. Even when I put a debugger in rails_ujs.js on the general submit event this form is not firing that event. All forms rendered server-side trigger it no problem.

Did I miss something about having to attach an event to dynamically inserted form?

score 11 · Answer 1 · answered May 17 '13 at 18:47

11

It turns out I was rendering a form within a form and that was causing the issue. I'm an idiot :p

answered May 17 '13 at 18:47

bcardarella

4,389
4
25
44

Five years later (and nearly a day of beating my head against this), I'm an idiot as well. – Tim Sullivan Aug 07 '18 at 14:41
Thanks for that! I checked my code, and my code closed my form, but a lack of a trailing div tag prevented Chrome from seeing it, so Chrome didn't close my form until later! Thanks for the help! – johnnyb Aug 16 '18 at 15:02

score 1 · Answer 2 · edited May 23 '17 at 10:32

1

after injecting the for, you need to attach the event to the dom using jQuery's live & the rails_ujs's handleRemote() event to the form submit

$(function(){
    $("body")
        .live('ajax:complete', function(){
             $("form[data-remote]").live('submit', function(e){
                  $.rails.handleRemote($("form[data-remote]"));
                  e.preventDefault();
             });
        });
});

Currently, this looks for all the forms in the page, you might want to make it more specific to improve performance.

PS: if you are using latest jQuery(jQuery 1.7 or later), you might want to know that in recent versions of jQuery, live() has been deprecated in favour of on(). here is a nice explanation of on() vs live()

edited May 23 '17 at 10:32

Community

1
1

answered May 17 '13 at 17:13

CuriousMind

31,669
24
84
127

Is that supposed to be necessary? https://github.com/rails/jquery-ujs/blob/master/src/rails.js#L326 shows that rails_ujs is using event delegation on the document which should capture all submit events – bcardarella May 17 '13 at 17:21
^^^Should Not be needed but hey, currently its not working. so try it, it may or may not work. But there is no harm in trying. Incase, it doesn't work do post back with a sample app on github which reproduces this issue, so we can help further :) – CuriousMind May 17 '13 at 17:30

score 0 · Answer 3 · edited May 23 '17 at 11:55

I'm not sure how rails_ujs.js works, but I think your problems lies with the fact that html content that you add on the client side does not respond to events that have already been binded. The solution is that, whenever you add a new HTML element on the client side you also have to bind any event to it.

Consider the following example:

<html>
<head>
    <title>My Page</title>
    <script src="jquery.js"></script>
</head>
<body>
    <div id="content">
        <a href="#" class="link">Click me</a>
    </div>
    <a href="#" class="add_link">Add link</a>
    <script type="text/javascript">
    $(document).ready(function(){
        $('.link').click(function(){
            alert('Click me');
        });

        $('.add_link').click(function(){
            $("#content").append("<a href='#' class='link'>Click me no alert...</a>");
        });
    });
    </script>
</body>
</html>

When you click on the 'Add link' link it will add a link that says click me and that has the class 'link'. However if you click this link it will not display an alert, that is the event click event does not fire, it only fires for server-side generated content.

The solution is described in more detail in this question: In jQuery, how to attach events to dynamic html elements?

However I'm not sure how to apply it to rails_ujs, you probably have to do some modifications there.

score 0 · Answer 4 · answered May 17 '13 at 16:52

0

rails_ujs does use document delegation, not bindings to specific elements onload, so it should pick up your form.

Could it be that there is no hidden auth_token field in your form, and so inserting the csrf token is failing? Or it's going to the server and then fails an authenticity check?

And then, the dumb question: are you sure your debugged version of rails_ujs is present on the page? Is rails_ujs loaded? console.log($.rails) to check.

answered May 17 '13 at 16:52

Nick Gauthier

1
1

That's what I thought, which makes this really frustrating to figure out. My actual code is injecting the csrf token and setting the form for utf-8. – bcardarella May 17 '13 at 16:55

Inserting data-remote form via JavaScript in a Rails App, ujs not catching remote

4 Answers4