hauleth / vanilla-ujs Goto Github PK
View Code? Open in Web Editor NEWUJS without jQuery dependency
License: MIT License
UJS without jQuery dependency
License: MIT License
I have the following in Rails 4.2.
<%= link_to "Add new post", new_post_path, data: { disable_with: "Please wait..." } %>
Tested on other browser is fine except Safari. On Safari, it doesn't change the text to Please wait...
, and is still clickable multiple times and fire to controller multiple times.
Can we not have have this in .min
Bower users need to compile in node and rails. Can you push a production ready file?
Versions after 0.1.0
don't seem to be able to be (reasonably) used outside of Sprockets (within other build tools, like Webpack, for example). Currently installing this package from npm seem kind of pointless since it contains Sprockets directives that don't work outside of Sprockets.
Was this a conscious decision? With Rails moving towards being friendlier to external asset tools with Webpacker and all that, it seems like this project should support that stuff. Thoughts?
Would be interested in getting this aed5e97 as an actual release.
Is there any readme available how to use this gem?
I tried to replace with jquery-ujs with vanilla-ujs, but it's not working just by changing gems.
For example, in jquery-ujs there is "ajax:beforeSend" but in vanilla-ujs there is no such event.
Add these lines on anything thats used in the page, such as main.js
import 'hauleth/vanilla-ujs/lib/assets/javascripts/vanilla-ujs/polyfills.js';
import 'hauleth/vanilla-ujs/lib/assets/javascripts/vanilla-ujs/confirm.js'; // or whatever part the module requires.
Then run
jspm require github:hauleth/vanilla-ujs
jspm update
Uncaught ReferenceError: "matches is not defined"
if you don't.vanilla-ujs
version: 1.2.0
I'm running into issues with remote forms when running feature tests in Poltergeist. Apparently, in test environment authenticity tokens are not included in (remote) forms. Nevertheless, an empty FormData
is passed to LiteAjax
which generates an empty multipart request without closing boundary. The corrupt request raises an error in Rack, as shown in the RSpec output below.
I also investigated how jquery-ujs
deals with remote forms. For forms with inputs it sends an URL encoded request and without inputs it is just a plain request without body. Besides that, when using jquery-ujs
I could add a type: :json
to the button_to
tag which would send a empty JSON request.
I see a few solutions:
x-www-form-urlencoded
FormData
object has no values, it should not be sent (just xhr.send()
instead of xhr.send(data)
)vanilla-ujs
should support data-type
on the remote form to able to switch to a JSON request 1.2) Failure/Error: raise EOFError if eof
EOFError:
EOFError
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/multipart/parser.rb:361:in `handle_empty_content!'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/multipart/parser.rb:185:in `on_read'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/multipart/parser.rb:72:in `block in parse'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/multipart/parser.rb:70:in `loop'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/multipart/parser.rb:70:in `parse'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/multipart.rb:52:in `extract_multipart'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/request.rb:472:in `parse_multipart'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/request.rb:335:in `POST'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/method_override.rb:39:in `method_override_param'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/method_override.rb:27:in `method_override'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/method_override.rb:15:in `call'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/runtime.rb:22:in `call'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/activesupport-5.0.0.1/lib/active_support/cache/strategy/local_cache_middleware.rb:28:in `call'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/executor.rb:12:in `call'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/static.rb:136:in `call'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/sendfile.rb:111:in `call'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/railties-5.0.0.1/lib/rails/engine.rb:522:in `call'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/urlmap.rb:68:in `block in call'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/urlmap.rb:53:in `each'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/rack-2.0.1/lib/rack/urlmap.rb:53:in `call'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/capybara-2.8.1/lib/capybara/server.rb:43:in `call'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/puma-3.6.0/lib/puma/server.rb:578:in `handle_request'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/puma-3.6.0/lib/puma/server.rb:415:in `process_client'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/puma-3.6.0/lib/puma/server.rb:275:in `block in run'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/puma-3.6.0/lib/puma/thread_pool.rb:116:in `call'
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/puma-3.6.0/lib/puma/thread_pool.rb:116:in `block in spawn_thread'
#
# Showing full backtrace because every line was filtered out.
# See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# RSpec::Configuration#backtrace_inclusion_patterns for more information.
# ------------------
# --- Caused by: ---
# Capybara::CapybaraError:
# Your application server raised an error - It has been raised in your test code because Capybara.raise_server_errors == true
# /usr/local/var/rbenv/versions/2.2.4/lib/ruby/gems/2.2.0/gems/capybara-2.8.1/lib/capybara/session.rb:126:in `raise_server_error!'
vanilla-ujs
and jquery-ujs
I'm trying to use this to perform background XHR requests by including both data-method="post"
and data-remote
on a link, the same as I've done in Rails many times before. Unfortunately, following the code path in the click event handler of this plugin shows that it just returns true, allowing the browser to handle the link normally. Instead, this should perform an XHR POST to the HREF.
Thanks for creating this! I'm replacing the asset pipeline with gulp tasks. It'd be sweet if I could list this in dependencies in package.json
I needed to include Vanilla UJS via webpack in our product and couldn't figure out how to stop webpack tree shaking it all away, so I converted Vanilla UJS to use module syntax and have an init method when it's imported.
Might bee too big of a change for a pull request and I needed it pretty quick, so I made a fork and an npm module. (https://github.com/sakamies/modular-ujs)
Is this something you'd want to integrate to this repo?
Would be great if this Gem was also available on Rubygems.
Right now @Ximik, who owns a fork, released a gem with this name, was a little bit confusing to me: https://rubygems.org/gems/vanilla-ujs/.
If we have element inside link with data-method
attribute, ujs will not work, example:
<script>
var matches = (function(doc) {
return doc.matchesSelector ||
doc.webkitMatchesSelector ||
doc.mozMatchesSelector ||
doc.oMatchesSelector ||
doc.msMatchesSelector;
})(document.documentElement);
document.addEventListener('click', function(event) {
var element, url, method, data, handler;
// Only left click allowed. Firefox triggers click event on right click/contextmenu.
if (event.button !== 0) {
return;
}
element = event.target;
if (matches.call(element, 'a[data-method]')) {
alert("data-method detected!\n" + element.outerHTML);
} else {
alert("No data-method!\n" + element.outerHTML);
}
});
</script>
<a href="#" data-method="post">
<img src="https://avatars3.githubusercontent.com/u/291639?v=4&s=20"/> User Name
<a/>
Possible solution will be:
var VanillaUjs.closest = function (element, selector) {
var parent = element;
while (parent && !matches(parent, selector)) {
parent = parent.parentNode;
if (parent instanceof HTMLDocument) {
return null;
}
}
return parent;
};
if (matches.call(element, 'a[data-method]') || VanillaUjs.closest(element, 'a[data-method]')) {
...
}
I notice it declares global variables that can be mistakenly changed by user, would be nice to put it in inside VanillaUJS
, I found: matches, CSRF, sameOrigin
I have this link:
<a data-method="delete" data-confirm="Delete airport TPE?" href="/admin/airports/TPE">Delete</a>
If I click 'Cancel' in confirm window, request is still being send.
Solution: move code to handle 'a[data-confirm], button[data-confirm]'
above code for 'a[data-method]'
. Problem happens because data-method
handler create form and submit it, then data-confirm
handler will try to stop event.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.