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

Source: Internet
Author: User

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.