DOM Operations

All DOM operations that can be triggered from the server with CableReady

It's possible to invoke multiple DOM operations with a single ActionCable broadcast.

All DOM mutations have corresponding before/after events triggered on document. Arguments from the server can be accessed via event.detail.

Helpful Tips

The selector option uses document.querySelector() to find the element. If more than one element matches the selector, only the first element will be affected.

XPath expressions can also be used if the xpath option is set to true. As with CSS selectors, the XPath expression must resolve to a single element and not a collection.

app/models/user.rb
app/models/user.rb
class User < ApplicationRecord
include CableReady::Broadcaster
def broadcast_name_change
cable_ready["UserChannel"].text_content(
xpath: true,
selector: "/html/body/div[1]/form/input[1]",
text: name
)
cable_ready.broadcast
end
end