All geek questions in one place

Insert remote data form via JavaScript in a Rails application, ujs does not delete the remote

I have a simple form that is added to the container:

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

My understanding was that rails_ujs.js captures all the events sent, so I won’t need to attach any events when inserting new forms. However, this form is not perceived as a remote form. Even when I put the debugger in rails_ujs.js in a general submit event, this form does not fire this event. All forms processed by the server do not start it.

Did I miss something related to attaching an event to a dynamically inserted form?

+6
source share
4 answers

Turns out I provided the form inside the form, and that was causing the problem. I'm an idiot: p

+8
source

after entering for, you need to attach the event to dom using jQuery live and rails_ujs handleRemote() event to submit form

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

This is currently looking for all forms on the page, you can make it more specific to improve performance.

PS: if you are using the latest jQuery ( jQuery 1.7 or later), you may need to know that in recent versions of jQuery the live () function is deprecated in favor of on() . here is a good explanation on() vs live()

+1
source

I am not sure how rails_ujs.js works, but I think your problems are related to the fact that the html content that you add on the client side does not respond to events that have already been bound. The solution is that whenever you add a new HTML element on the client side, you also need to bind an 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 saying that I click “I” and I have a “link” link. However, if you click this link, it will not display a warning, that is, the event event of the event does not fire, it only fires for content created on the server side.

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 will probably have to make some changes there.

0
source

rails_ujs uses document delegation, not binding to specific onload elements, so it should pick up your form.

Could it be that your form does not have an auth_token hidden field, and therefore the csrf token is not inserted? Or does it go to the server and then do not authenticate?

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

0
source

Source: https://habr.com/ru/post/945279/

More articles:


All Articles