CableReady
Search…
v4.5.0
Welcome
Installation
Setup
CableReady 101
Working with CableReady
CableReady Everywhere
Leveraging Stimulus
Stream Identifiers
Broadcasting to Resources
Customization
Troubleshooting
Advocating for "Reactive Rails"
Release History
Reference
Methods
Operations
DOM Mutations
Element Property Mutations
DOM Events
Browser Manipulations
Notifications
Powered By GitBook
DOM Mutations

append

Inserts HTML into the DOM, inside the target element, after its last child.
1
cable_ready["MyChannel"].append(
2
cancel: true|false, # [false] - cancel the operation (for use on client)
3
focus_selector: "string", # [null] - string containing a CSS selector
4
html: "string", # [null] - the HTML to assign
5
select_all: true|false, # [false] - operate on list of elements returned from selector
6
selector: "string", # required - string containing a CSS selector or XPath expression
7
xpath: true|false # [false] - process the selector as an XPath expression
8
)
Copied!

Life-cycle Callback Events

  • cable-ready:before-append
  • cable-ready:after-append

Reference

graft

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.
1
cable_ready["MyChannel"].graft(
2
cancel: true|false, # [false] - cancel the operation (for use on client)
3
focus_selector: "string", # [null] - string containing a CSS selector
4
parent: "string", # [null] - string containing a CSS selector
5
select_all: true|false, # [false] - operate on list of elements returned from selector
6
selector: "string", # required - string containing a CSS selector or XPath expression
7
xpath: true|false # [false] - process the selector as an XPath expression
8
)
Copied!

Life-cycle Callback Events

  • cable-ready:before-graft
  • cable-ready:after-graft

Reference

inner_html

Sets the innerHTML of a DOM element.
1
cable_ready["MyChannel"].inner_html(
2
cancel: true|false, # [false] - cancel the operation (for use on client)
3
focus_selector: "string", # [null] - string containing a CSS selector
4
html: "string", # [null] - the HTML to assign
5
select_all: true|false, # [false] - operate on list of elements returned from selector
6
selector: "string", # required - string containing a CSS selector or XPath expression
7
xpath: true|false # [false] - process the selector as an XPath expression
8
)
Copied!

Life-cycle Callback Events

  • cable-ready:before-inner-html
  • cable-ready:after-inner-html

Reference

​insert_adjacent_html​

Inserts HTML into the DOM relative to an element. Positions are as follows, defaulting to beforeend:
  • beforebegin: Before the target element itself
  • afterbegin: Inside the target element, before its first child
  • beforeend: Inside the target element, after its last child
  • afterend: After the target element itself
1
cable_ready["MyChannel"].insert_adjacent_html(
2
cancel: true|false, # [false] - cancel the operation (for use on client)
3
focus_selector: "string", # [null] - string containing a CSS selector
4
html: "string", # [null] - the HTML to insert
5
position: "string", # [beforeend] - the relative position to the DOM element (beforebegin, afterbegin, beforeend, afterend)
6
select_all: true|false, # [false] - operate on list of elements returned from selector
7
selector: "string", # required - string containing a CSS selector or XPath expression
8
xpath: true|false # [false] - process the selector as an XPath expression
9
)
Copied!

Life-cycle Callback Events

  • cable-ready:before-insert-adjacent-html
  • cable-ready:after-insert-adjacent-html

Reference

insert_adjacent_text

Inserts text into the DOM relative to an element. Positions are as follows, defaulting to beforeend:
  • beforebegin: Before the target element itself
  • afterbegin: Inside the target element, before its first child
  • beforeend: Inside the target element, after its last child
  • afterend: After the target element itself
1
cable_ready["MyChannel"].insert_adjacent_text(
2
cancel: true|false, # [false] - cancel the operation (for use on client)
3
focus_selector: "string", # [null] - string containing a CSS selector
4
position: "string", # [beforeend] - the relative position to the DOM element (beforebegin, afterbegin, beforeend, afterend)
5
select_all: true|false, # [false] - operate on list of elements returned from selector
6
selector: "string", # required - string containing a CSS selector or XPath expression
7
text: "string", # [null] - the text to insert
8
xpath: true|false # [false] - process the selector as an XPath expression
9
)
Copied!

Life-cycle Callback Events

  • cable-ready:before-insert-adjacent-text
  • cable-ready:after-insert-adjacent-text

Reference

morph

Fast lightweight DOM diffing/patching without a virtual DOM.
1
cable_ready["MyChannel"].morph(
2
cancel: true|false, # [false] - cancel the operation (for use on client)
3
children_only: true|false, # [false] - indicates if only child nodes should be morphed... skipping the parent element
4
focus_selector: "string", # [null] - string containing a CSS selector
5
html: "string", # [null] - the HTML to assign
6
permanent_attribute_name: "string", # [null] - an attribute name that prevents elements from being updated i.e. "data-permanent"
7
select_all: true|false, # [false] - operate on list of elements returned from selector
8
selector: "string", # required - string containing a CSS selector or XPath expression
9
xpath: true|false # [false] - process the selector as an XPath expression
10
)
Copied!
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
1
<div>
2
<%= render partial: "foo", locals: {message: "Am I the medium or the massage?"} %>
3
</div>
Copied!
_foo.html.erb
1
<div id="foo">
2
<span><%= message %></span>
3
</div>
Copied!
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
1
<div id="bar">
2
<%= render collection: @bars %>
3
</div>
Copied!
_bar.html.erb
1
<span><%= bar.message %></span>
Copied!
1
cable_ready["MyChannel"].morph(
2
children_only: true,
3
selector: "#bar",
4
html: "<div id=\"bar\">" + render(Bar.all) + "</div>"
5
)
Copied!

Life-cycle Callback Events

  • cable-ready:before-morph
  • cable-ready:after-morph

Reference

outer_html

Replaces a DOM element with new HTML.
1
cable_ready["MyChannel"].outer_html(
2
cancel: true|false, # [false] - cancel the operation (for use on client)
3
focus_selector: "string", # [null] - string containing a CSS selector
4
html: "string", # [null] - the HTML to use as replacement
5
select_all: true|false, # [false] - operate on list of elements returned from selector
6
selector: "string", # required - string containing a CSS selector or XPath expression
7
xpath: true|false # [false] - process the selector as an XPath expression
8
)
Copied!

Life-cycle Callback Events

  • cable-ready:before-outer-html
  • cable-ready:after-outer-html

Reference

prepend

Inserts HTML into the DOM, inside the target element, before its first child.
1
cable_ready["MyChannel"].prepend(
2
cancel: true|false, # [false] - cancel the operation (for use on client)
3
focus_selector: "string", # [null] - string containing a CSS selector
4
html: "string", # [null] - the HTML to assign
5
select_all: true|false, # [false] - operate on list of elements returned from selector
6
selector: "string", # required - string containing a CSS selector or XPath expression
7
xpath: true|false # [false] - process the selector as an XPath expression
8
)
Copied!

Life-cycle Callback Events

  • cable-ready:before-prepend
  • cable-ready:after-prepend

Reference

remove

Removes an element from the DOM.
1
cable_ready["MyChannel"].remove(
2
cancel: true|false, # [false] - cancel the operation (for use on client)
3
focus_selector: "string", # [null] - string containing a CSS selector
4
select_all: true|false, # [false] - operate on list of elements returned from selector
5
selector: "string", # required - string containing a CSS selector or XPath expression
6
xpath: true|false # [false] - process the selector as an XPath expression
7
)
Copied!

Life-cycle Callback Events

  • cable-ready:before-remove
  • cable-ready:after-remove

Reference

replace

Replaces a DOM element with new HTML. This operation is an alias of outer_html and has the same implementation.
1
cable_ready["MyChannel"].replace(
2
cancel: true|false, # [false] - cancel the operation (for use on client)
3
focus_selector: "string", # [null] - string containing a CSS selector
4
html: "string", # [null] - the HTML to use as replacement
5
select_all: true|false, # [false] - operate on list of elements returned from selector
6
selector: "string", # required - string containing a CSS selector or XPath expression
7
xpath: true|false # [false] - process the selector as an XPath expression
8
)
Copied!

Life-cycle Callback Events

  • cable-ready:before-replace
  • cable-ready:after-replace

Reference

text_content

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. ☀️
1
cable_ready["MyChannel"].text_content(
2
cancel: true|false, # [false] - cancel the operation (for use on client)
3
focus_selector: "string", # [null] - string containing a CSS selector
4
select_all: true|false, # [false] - operate on list of elements returned from selector
5
selector: "string", # required - string containing a CSS selector or XPath expression
6
text: "string", # [null] - the text to assign
7
xpath: true|false # [false] - process the selector as an XPath expression
8
)
Copied!

Life-cycle Callback Events

  • cable-ready:before-text-content
  • cable-ready:after-text-content

Reference

Reference - Previous
Operations
Next
Element Property Mutations
Last modified 8mo ago
Export as PDF
Copy link
Contents
append
graft
inner_html
insert_adjacent_html
insert_adjacent_text
morph
outer_html
prepend
remove
replace
text_content