JQUERY_UJS components slow down in Ruby on Rails solution _ruby Topic

JQUERY_UJS is a very important component for rails, and it is included in the default components of rails.

The jquery ujs contains some very handy features, such as confirmation dialog boxes, triggering Ajax, automatic Disable form submission button, and so on, this article mainly discusses the function that triggers Ajax.

By adding simple tag attributes, jquery Ujs can convert an ordinary link or form into an AJAX submission without the need to write JavaScript code.

<%= link_to ' Close Project ', Close_project_path (Project), Remote:true, method::p ost%>

The code above will generate the following code

<a href= "/projects/1/close" data-remote= "true" data-method= "POST" > Shutdown Project </a>

When the user clicks on it, it triggers an AJAX request to the address/projects/1/close,method post, rather than a normal request for get, making it easy to implement Ajax calls.

Problems caused by slow speed
things are not all good, in the slow speed, jquery ujs This implementation will be problematic, if the document has not been loaded, the user clicked the link, the page will initiate a GET request to the link address, the page will jump, but point to the address of the GET request can not exist, That's going to make a mistake.

A user has mentioned a related Issue, but the developer did not accept, but the speed is China's national conditions, the problem we still have to deal with, with the help of some characteristics of CSS3, this problem is not difficult to solve.

Pointer-events
Pointer-events:none;

The element is never the target of mouse events;  However, mouse events may target it descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events would trigger event listeners on the parent element as appropriate on their way Rom the descendant during the event capture/bubble phases.

This property can prohibit the Click event of the element, because the general CSS is loaded first, and we only control the application of Pointer-events:none to the jquery ujs elements before the page load completes; Style, the page after the completion of loading and then remove the style, you can solve the slow speed of the situation, the page did not load completed when the user clicks Rmote Link caused by the error.

Solution
Add the following global style, by default the label containing the data-remote and Data-method attributes is not clickable unless the BODY element contains a CSS class named Ready.

[Data-remote], [Data-method] {
 pointer-events:none;

 button, Input[type=submit] {
  pointer-events:none
 }
}

Body.ready {
 [data-remote], [Data-method] {
  pointer-events:auto;

  button, Input[type=submit] {Pointer-events:auto}}}

Then add ready class to the BODY element after the page is loaded with a simple script

$ (document). Ready->
 $ (' body '). addclass (' Ready ')

So, the problem is solved easily.