Question

I'm not sure if I'm just trying to do something crazy here, maybe I just need pointing in the right direction. I have a list of elements, with tick boxes. I need two people to know (interview situation) if the other has ticked a box. ActionCable seemed perfect for this.

Everything is set up, actioncable-wise, but I need to send the exact element that needs to be ticked to actioncable so that it can tick it on the other person's front-end. I have tried to send the DOM element but it gets serialised into JSON and I can't change it back on the other end (or simply don't know how to use it).

Below is my code so far. The first box.html is to tick your own box on the form. Then after the first preventDefault() I try to send the same box element to actioncable to tick it on the other person's front-end.

  $('.btn-group-vertical').each(function(){
    var $this = $(this);
    var success = $this.find('.applicant-success')
    var failure = $this.find('.applicant-failure')
    var box = $this.parent().next().find('.int_success');
    success.on('click', function(e) {
      box.html("<img class='interview-img3' src='/images/tick.png'>");
      e.preventDefault();
      App.room.ping(box);
    });
});

Answer 1

DOM元素在连接的一侧位于页面文档的本地。您需要引入一些唯一的ID，该ID在所有涉及的系统中均有效。它可能是来自相应数据库记录的ID，某个自然键甚至是SecureRandom.hex（但在这种情况下，您必须确保两个参与的用户都将获得相同的ID）

例如：<div class='int_success' data-id='<%= applicant.id %>'>

还有App.room.ping(box.data('id'))

How to easily send DOM elements for ActionCable?

1 个答案: