The opposite of insert_adjacent_html for CableReady channel?

Question

Problem has been answered -- see post below

I have a CableReady channel 'Current' which dynamically shows a feed of 'Posts'. I can get the posts to appear individually just fine, but I can't work out how to remove them from the channel individually.

This input of Posts to the channel is controlled in the PostsController.rb like so:

def postshow
  @post = Post.find(params[:id])
  cable_ready["current"].insert_adjacent_html(
    selector: "#current#{@video.id}",
    position: "afterbegin",
    html: render_to_string(partial: "posts/post", locals: {post: @post})
  )
  cable_ready.broadcast
end

I've tried a remove method e.g. cable_ready["current"].remove(... but this just removes all of the Posts in the channel in one go

I plan to use another method in my PostsController.rb to perform the remove:

def postremove
  @post = Post.find(params[:id]
  ...[code to remove the post here]
end

I don't want to remove the Post from the DOM entirely because the feed is dynamic and I want them to be able to show in the feed again at some point.

Edited: Further explanation of wanted behaviour

Imagine the feed to be like twitter, new posts appear at the top. But these posts only appear for a certain number of seconds. You can can also rewind the feed to a certain point. So a post that was taken off the feed can appear again at the top if you rewind the time.

Any ideas or suggestions of other tactics are appreciated, thanks

what would you want the updated dom to look like then? I don't fully understand what you expect the end result to look like, why not remove it? you just say, you might want to show it in the feed again at some point, what do you mean by that? How would the user make it show up again? — Roland Studer, Aug 28 '20 at 13:02
I've added a further explanation of the behaviour to my original post. Perhaps I can remove it from the DOM but i want to do this via the CableReady rather than js I've tried removing them with js and it messes with the reintroduction of them to the post, i.e. if I try to remove it again it doesn't work. If this can be achieved with CableReady commands then great! — Jack Riminton, Aug 28 '20 at 13:20
And then why does `cable_ready["current"].remove("##{dom_id(@post)}` not work? Probably just a mistake you did in the selector, your example shows `selector: "#current#{@video.id}", ` which is a bit weird, you should only have on id element probably. — Roland Studer, Aug 28 '20 at 13:34
Ah great, `cable_ready["current"].remove("##{dom_id(@post)}` is probably what I'm looking for. I just didn't know any of that syntax. Will give it a try and report back, thanks — Jack Riminton, Aug 28 '20 at 13:39
Do you have discord, then let us head over to https://discord.com/invite/XveN625 and discuss it there. — Roland Studer, Aug 28 '20 at 13:48

score 2 · Answer 1 · edited Aug 28 '20 at 12:43

2

Since you don't want to remove the post from the DOM then perhaps one solution would be to simply hide the post. You can use the method below to set a CSS property. enter image description here Alternatively if you use a CSS framework you could just add a class via:

edited Aug 28 '20 at 12:43

Dharman

30,962
25
85
135

answered Aug 28 '20 at 11:56

pSkarl

324
4
5

Thanks I've tried this, but because I want the new posts to appear at the top of the 'Current' feed the hidden old posts just take up room – Jack Riminton Aug 28 '20 at 12:59
1

@JackRiminton Sorry for the delay, I was away. I am glad you sorted things out. As a side note, you could also check out Stimulus Reflex that’s pairs wonderfully with CableReady and StimulusJS. – pSkarl Aug 28 '20 at 14:46

score 1 · Accepted Answer · answered Aug 28 '20 at 14:29

Thanks to Roland Studer for this answer:

The problem was due to the partial not having a proper identifier. The outer-most div of the partial now looks like this:

<div id="<%= dom_id(post)%>" ... >

and the controller method for removing the Post now looks like this:

def postremove
    @post = Post.find(params[:id])
    cable_ready["current"].remove(
      selector: "[data-id=\"#{@post.id}\"]"
    )
    cable_ready.broadcast
end

Magic! :)

The opposite of insert_adjacent_html for CableReady channel?

Problem has been answered -- see post below

2 Answers2