Sets the innerHTML of a DOM element.
cable_ready["MyChannel"].inner_html(focus_selector: "string", # [null] - string containing a CSS selectorhtml: "string", # [null] - the HTML to assignselector: "string", # required - string containing a CSS selector or XPath expressionxpath: true|false # [false] - process the selector as an XPath expression)
cable-ready:before-inner-html
cable-ready:after-inner-html
Inserts HTML into the DOM relative to an element. Supports behavior akin to prepend & append.
cable_ready["MyChannel"].insert_adjacent_html(focus_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)selector: "string", # required - string containing a CSS selector or XPath expressionxpath: true|false # [false] - process the selector as an XPath expression)
cable-ready:before-insert-adjacent-html
cable-ready:after-insert-adjacent-html
Inserts text into the DOM relative to an element. Supports behavior akin to prepend & append.
cable_ready["MyChannel"].insert_adjacent_text(position: "string", # [beforeend] - the relative position to the DOM element (beforebegin, afterbegin, beforeend, afterend)selector: "string", # required - string containing a CSS selector or XPath expressiontext: "string" # [null] - the text to insertxpath: true|false # [false] - process the selector as an XPath expression)
cable-ready:before-insert-adjacent-text
cable-ready:after-insert-adjacent-text
Fast lightweight DOM diffing/patching without a virtual DOM.
cable_ready["MyChannel"].morph(children_only: true|false, # [false] - indicates if only child nodes should be morphed... skipping the parent elementfocus_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"selector: "string", # required - string containing a CSS selector or XPath expressionxpath: true|false # [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>
cable_ready["MyChannel"].morph(children_only: true,selector: "#bar",html: "<div id=\"bar\">" + render(Bar.all) + "</div>")
cable-ready:before-morph
cable-ready:after-morph
Replaces a DOM element with new HTML.
cable_ready["MyChannel"].outer_html(focus_selector: "string", # [null] - string containing a CSS selectorhtml: "string", # [null] - the HTML to use as replacementselector: "string", # required - string containing a CSS selector or XPath expressionxpath: true|false # [false] - process the selector as an XPath expression)
cable-ready:before-outer-html
cable-ready:after-outer-html
Removes an element from the DOM.
cable_ready["MyChannel"].remove(focus_selector: "string", # [null] - string containing a CSS selectorselector: "string", # required - string containing a CSS selector or XPath expressionxpath: true|false # [false] - process the selector as an XPath expression)
cable-ready:before-remove
cable-ready:after-remove
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. ☀️
cable_ready["MyChannel"].text_content(selector: "string", # required - string containing a CSS selector or XPath expressiontext: "string", # [null] - the text to assignxpath: true|false # [false] - process the selector as an XPath expression)
cable-ready:before-text-content
cable-ready:after-text-content