...the calendar box and make it unusable: If you are using a tool like Unpoly you might want to set autocomplete="off" in the JavaScript that also initializes your date...
...frameworks comes with mechanisms to activate JavaScript behavior on certain DOM elements. E.g. in Unpoly uses compilers for that purpose. Instead of using a framework mechanism you may use customElements.define...
...this is easily doable by using the asynchronous import function. Say we have an unpoly compiler that sets up TinyMCE like this (code is somewhat simplified): // TinyMCE as part of...
...decide if any of it needs an update. Your main components (e.g. Ruby, Rails, Unpoly) should always be reasonably up to date. Keeping your dependencies up-to-date is like...
Accept story Reject story Support This [formaction] attribute is supported in all browsers. Unpoly's form submission supports it since version 2.0. Pitfalls If you press enter on a...
...like and using JavaScript to disable all controls inside it. This works nicely with Unpoly compilers or Angular directives. See jsbin for an example...
...different rules for equality. Your project will often use a library like Lodash or Unpoly's up.util that will hide this inconsistency behind functions like _.isBoolean(x) or _.isObject(x...
...Chrome DevTools network panel) to feel how your app behaves. If you're using Unpoly, show a loading state while requests are loading. If you cannot implement this for every...
...browser, it will follow a redirect with GET as expected. This is also what Unpoly or the Rails unobtrusive Javascript adapter does when you annotate a link with data-method...
Our applications not only need to be functional, they need to be fast. But, to quote Donald Knuth, premature optimization...
_.isEqual([1, 2], [1, 2]) // => true If your project already uses Unpoly you may also use up.util.isEqual() in the same way: up.util.isEqual([1, 2], [2, 3]) // => false up.util.isEqual...
...are several ways to deal with this: Consider disabling the button when clicked. With Unpoly, this is a single attribute. Consider embedding a hidden token into your forms so you...
Native JavaScript document.addEventListener('click', function(event) { if (event.target.closest('.dialog-link')) { // Open dialog } }); Unpoly up.on('click', '.dialog-link', function(event, link) { // Open dialog }); jQuery $(document).on('click', '.dialog-link...
...slightly different as the official docs for Rails) might look like in Rails + webpack + Unpoly. Also see the HN discussion for pro and cons...
...fn // => "function" typeof obj // => "object" Due to practical considerations, utility libraries like Lodash or Unpoly's up.util module consider functions to be objects: up.util.isFunction(fn) // => true up.util.isObject(fn) // => true up.util.isFunction...
...all ETags after a new Capistrano release. etag { up.target } # Add this when you use Unpoly < 3 and optimize responses for render targets private # Builds an ETag input from the given...
...you don't send multiple requests at the same time. If you're using Unpoly, the [up-watch] or [up-autosubmit] attributes will do this for you.
This are the steps I needed to do to add esbuild to an application that used the vanilla rails asset...
...set it on an tag's src attribute: $('img').attr('src', URL.createObjectURL(this.files[0])) Unpoly Compiler As an Unpoly compiler, it looks like this: up.compiler '[image_preview]', (element, img_selector...
...tag will either contain an existing image (rendered by Rails) or be overwritten by Unpoly with an image preview. Testing Here's a Cucumber step to check the existence of...
...event.preventDefault()) You may want to adapt this to the event listening mechanism you use (Unpoly's up.on, jQuery's .on, ...) and wrap the element selection into a compiler function...
...Register an event listener with delegation .on('click', selector, handlerFn) use a library like Unpoly Read an attribute .attr(name) .getAttribute(name) Write an attribute .attr(name, value) .setAttribute(name...
When your app also uses Unpoly you will find some utility functions for DOM manipulation and traversal in the up.element module. Further reading JavaScript without jQuery (presentation from...
...href: '/path', data: { method: 'delete', confirm: 'Really delete?' }} Label This compiles to: Label Example: Unpoly attributes You might also want to use this to define multiple Unpoly attributes, which are...
...We have another card: Webpack: How to split your bundles Webpack documentation: Code Splitting Unpoly: Loading large libraries on-demand
...message on click with an event listener like this is enough (implemented with an Unpoly compiler): up.compiler('[custom-dialog-abort]', (element) => { element.addEventListener('click', (event) => { event.preventDefault() window.parent.postMessage({ mceAction: 'close' }); }) })