RoR unobtrusive scripting Adapter--ujs (some JavaScript syntax sugar)

Learn how the new Rails UJS Library works and compares with the old version of JQUERY_UJS that it replaces

rails/actionview/app/assets/javascripts/.

Video : Https://gorails.com/episodes/rails-ujs-primer?autoplay=1

Introduced
This unobtrusive scripting support file script supports rails, but is not tightly bound to any backend and can also be used in any other application.

• Force confirmation dialogs for various actions;
• Make non-get requests from hyperlinks; making non-GET requests from hyperlinks
• Make forms or hyperlinks submit data asynchronously with Ajax; Use Ajax to create tables or links to submit asynchronous data
• When the Submit button has been clicked, it automatically prevents multiple clicks, resulting in repeated submissions.

These features is achieved by adding certain data attributes to your HTML markup.

These functions are implemented by adding the data attributes to the HTTP markup.

?? Abandoned jquery, compiled with Coffeescript. New points:

1. You won ' t get jQuery anymore in your Rails 5.1 applications
2. Rails is starting-to-push you towards building your forms, all submit with AJAX requests

data = new FormData ()

Use

The Rails app adds//= Reqquire Rails-ujs directly to the application.js.

If you use the Gem Webpacker or other JS bundler, add the following code to main main JS file:

' Rails-ujs';  Rails. start ()  

Defines some handy syntactic sugars, such as:

rails.disableelement (document.getElementById ("Form_submit"))

Explanation: Let link, button, form, formsubmit element not be used. There are also enableelement ()that allow elements to be used.

InRails/Actionview/app /assets/javascripts/RAILS-UJS /features/disable.coffee files are defined in the.

The Remote.coffe file has the perfect case format for processing AJAX requests:?? This format is coffee format.

Rails.ajax (

Type:method or ' GET '
Url:url
Data:data
Datatype:datatype

# stopping the "Ajax:beforesend" event would cancel the AJAX request
beforesend: (XHR, Options)
if fire (element, ' ajax:beforesend ', [XHR, Options])
Fire (element, ' ajax:send ', [XHR])
Else
Fire (element, ' ajax:stopped ')
return False
success: (args ...), fire (element, ' ajax:success ', args)
error: (args ...), fire (element, ' Ajax:error ', args)
Complete : (args ...) fire (element, ' Ajax:complete ', args)
crossdomain:iscrossdomain (URL)
withcredentials:withcredentials and withcredentials isnt ' false '

）

Case: Video 5.40 points, I also real success??

I wrote a table with only one input box, declaring a form on chrome-inspect-console:

var data = new FormData ()

Data.append ("post[content]", "Input value")　

#post [content] is the name of the input box,specifically visible webapi, for attaching a new value to an existing key

Then use:

Rails.ajax ({url: '/posts ', type: ' POST ', data:data})

The data is added correctly??

Csrf.coffee file

Rails.csrftoken ()
"sgfmdd/odcwc625ldyvcwugi3jt+ou2h7fnkth448qeksrve0shresmuws11wnairxicnnibw2vdasehijt/tw=="

Used to generate random tokens. For API

Form.coffee file

rails.serializeelement () method to get all the information that has been entered in the current table at once.

> var data1 = rails.serializeelement (document.getElementsByTagName ("form") [0])
Undefined
> data1
"utf8=%e2%9c%93&authenticity_token=lsfv%2f12dcbywsg% 2fsgncgq5n4ov9h1wnbqd4yxqkgapxb95jou1sswqmpolsam4wkfklj%2bmfulapvdvx194on6g%3d%3d&post%5bcontent%5d= Xzczxxcz "
> Rails.ajax ({url: '/posts ', type: ' POST ', data:data1})
Undefined

Data is deposited.

RoR unobtrusive scripting Adapter--ujs (some JavaScript syntax sugar)