DOM Mutations
Inserts HTML into the DOM, inside the target element, after its last child.
append(batch: String, # [null] - add the operation to a named batchcancel: Boolean, # [false] - cancel the operation (for use on client)delay: Integer, # [0] - wait for n milliseconds before runningfocus_selector: String, # [null] - string containing a CSS selectorhtml: String, # [null] - the HTML to assignselect_all: Boolean, # [false] - operate on list of elements returned from selectorselector: String, # required - string containing a CSS selector or XPath expressionxpath: Boolean # [false] - process the selector as an XPath expression)
cable-ready:before-appendcable-ready:after-append
Reparent the target element and its children to a new parent element in the DOM.
Grafted elements are moved, not recreated. This means that any Stimulus controllers attached to an element will disconnect and then immediatelyconnect again, but their internal state remains intact.
graft(batch: String, # [null] - add the operation to a named batchcancel: Boolean, # [false] - cancel the operation (for use on client)delay: Integer, # [0] - wait for n milliseconds before runningfocus_selector: String, # [null] - string containing a CSS selectorparent: String, # [null] - string containing a CSS selectorselect_all: Boolean, # [false] - operate on list of elements returned from selectorselector: String, # required - string containing a CSS selector or XPath expressionxpath: Boolean # [false] - process the selector as an XPath expression)
cable-ready:before-graftcable-ready:after-graft
Sets the innerHTML of a DOM element.
inner_html(batch: String, # [null] - add the operation to a named batchcancel: Boolean, # [false] - cancel the operation (for use on client)delay: Integer, # [0] - wait for n milliseconds before runningfocus_selector: String, # [null] - string containing a CSS selectorhtml: String, # [null] - the HTML to assignselect_all: Boolean, # [false] - operate on list of elements returned from selectorselector: String, # required - string containing a CSS selector or XPath expressionxpath: Boolean # [false] - process the selector as an XPath expression)
cable-ready:before-inner-htmlcable-ready:after-inner-html
Inserts HTML into the DOM relative to an element. Positions are as follows, defaulting to beforeend:
beforebegin: Before the target element itselfafterbegin: Inside the target element, before its first childbeforeend: Inside the target element, after its last childafterend: After the target element itself
insert_adjacent_html(batch: String, # [null] - add the operation to a named batchcancel: Boolean, # [false] - cancel the operation (for use on client)delay: Integer, # [0] - wait for n milliseconds before runningfocus_selector: String, # [null] - string containing a CSS selectorhtml: String, # [null] - the HTML to insertposition: String, # [beforeend] - the relative position to the DOM element (beforebegin, afterbegin, beforeend, afterend)select_all: Boolean, # [false] - operate on list of elements returned from selectorselector: String, # required - string containing a CSS selector or XPath expressionxpath: Boolean # [false] - process the selector as an XPath expression)
cable-ready:before-insert-adjacent-htmlcable-ready:after-insert-adjacent-html
Inserts text into the DOM relative to an element. Positions are as follows, defaulting to beforeend:
beforebegin: Before the target element itselfafterbegin: Inside the target element, before its first childbeforeend: Inside the target element, after its last childafterend: After the target element itself
insert_adjacent_text(batch: String, # [null] - add the operation to a named batchcancel: Boolean, # [false] - cancel the operation (for use on client)delay: Integer, # [0] - wait for n milliseconds before runningfocus_selector: String, # [null] - string containing a CSS selectorposition: String, # [beforeend] - the relative position to the DOM element (beforebegin, afterbegin, beforeend, afterend)select_all: Boolean, # [false] - operate on list of elements returned from selectorselector: String, # required - string containing a CSS selector or XPath expressiontext: String, # [null] - the text to insertxpath: Boolean # [false] - process the selector as an XPath expression)
cable-ready:before-insert-adjacent-textcable-ready:after-insert-adjacent-text
Fast lightweight DOM diffing/patching without a virtual DOM.
morph(batch: String, # [null] - add the operation to a named batchcancel: Boolean, # [false] - cancel the operation (for use on client)children_only: Boolean, # [false] - indicates if only child nodes should be morphed... skipping the parent elementcontent: String, # READ ONLY - the content that is going to be used to morphdelay: Integer, # [0] - wait for n milliseconds before runningfocus_selector: String, # [null] - string containing a CSS selectorhtml: String, # [null] - the HTML to assignpermanent_attribute_name: String, # [null] - an attribute name that prevents elements from being updated i.e. "data-permanent"select_all: Boolean, # [false] - operate on list of elements returned from selectorselector: String, # required - string containing a CSS selector or XPath expressionxpath: Boolean # [false] - process the selector as an XPath expression)
When morphing an element with children_only: true you need to make sure that the content you're providing to the html value will result in a successful operation:
it must have a single top-level container element with the same CSS selector as the target
inside that container element is another element node, not a text node
Consider the following example of #foo, a successful morphing candidate:
show.html.erb<div><%= render partial: "foo", locals: {message: "Am I the medium or the massage?"} %></div>
_foo.html.erb<div id="foo"><span><%= message %></span></div>
If the <div id="foo"> was located in show.html.erb the morph would not succeed because the top-level container that you're replacing would not be present in the replacement HTML.
If you need to render a collection of partials, you'll have to wrap the render method in a container because you cannot have the top-level container in each partial:
show.html.erb<div id="bar"><%= render collection: @bars %></div>
_bar.html.erb<span><%= bar.message %></span>
morph(children_only: true,selector: "#bar",html: "<div id=\"bar\">" + render(Bar.all) + "</div>")
cable-ready:before-morphcable-ready:after-morph
Replaces a DOM element with new HTML.
outer_html(batch: String, # [null] - add the operation to a named batchcancel: Boolean, # [false] - cancel the operation (for use on client)delay: Integer, # [0] - wait for n milliseconds before runningfocus_selector: String, # [null] - string containing a CSS selectorhtml: String, # [null] - the HTML to use as replacementselect_all: Boolean, # [false] - operate on list of elements returned from selectorselector: String, # required - string containing a CSS selector or XPath expressionxpath: Boolean # [false] - process the selector as an XPath expression)
cable-ready:before-outer-htmlcable-ready:after-outer-html
Inserts HTML into the DOM, inside the target element, before its first child.
prepend(batch: String, # [null] - add the operation to a named batchcancel: Boolean, # [false] - cancel the operation (for use on client)delay: Integer, # [0] - wait for n milliseconds before runningfocus_selector: String, # [null] - string containing a CSS selectorhtml: String, # [null] - the HTML to assignselect_all: Boolean, # [false] - operate on list of elements returned from selectorselector: String, # required - string containing a CSS selector or XPath expressionxpath: Boolean # [false] - process the selector as an XPath expression)
cable-ready:before-prependcable-ready:after-prepend
Removes an element from the DOM.
remove(batch: String, # [null] - add the operation to a named batchcancel: Boolean, # [false] - cancel the operation (for use on client)delay: Integer, # [0] - wait for n milliseconds before runningfocus_selector: String, # [null] - string containing a CSS selectorselect_all: Boolean, # [false] - operate on list of elements returned from selectorselector: String, # required - string containing a CSS selector or XPath expressionxpath: Boolean # [false] - process the selector as an XPath expression)
cable-ready:before-removecable-ready:after-remove
Replaces a DOM element with new HTML. This operation is an alias of outer_html and has the same implementation.
replace(batch: String, # [null] - add the operation to a named batchcancel: Boolean, # [false] - cancel the operation (for use on client)delay: Integer, # [0] - wait for n milliseconds before runningfocus_selector: String, # [null] - string containing a CSS selectorhtml: String, # [null] - the HTML to use as replacementselect_all: Boolean, # [false] - operate on list of elements returned from selectorselector: String, # required - string containing a CSS selector or XPath expressionxpath: Boolean # [false] - process the selector as an XPath expression)
cable-ready:before-replacecable-ready:after-replace
Sets the text content of a DOM element.
CableReady sets textContent instead of innerText. You can learn more here, or just move on with your day. ☀️
text_content(batch: String, # [null] - add the operation to a named batchcancel: Boolean, # [false] - cancel the operation (for use on client)delay: Integer, # [0] - wait for n milliseconds before runningfocus_selector: String, # [null] - string containing a CSS selectorselect_all: Boolean, # [false] - operate on list of elements returned from selectorselector: String, # required - string containing a CSS selector or XPath expressiontext: String, # [null] - the text to assignxpath: Boolean # [false] - process the selector as an XPath expression)
cable-ready:before-text-contentcable-ready:after-text-content
