RxDom: not working when new id created

Question

I'm using Reactive Extension DOM for listening event from DOM. Here is my sample code:

var input = document.getElementById('test_id');
var source = Rx.DOM.change(input);
var subscription = source.subscribe(
        function (x) {
          console.log(x);
        },
        function (err) {
          console.log('Error: ' + err);
        },
        function () {
          console.log('Completed');
        });

This code works when test_id is on page when document.ready finish. But I'm using AJAX request, so test_id just appears after a time when ajax request is sent and received on client. How can I make RxDom notify this.

Thanks.

score 2 · Accepted Answer · answered Oct 11 '16 at 13:50

2

You need to create the Observable again.

When you call document.getElementById('test_id'); and the element with id test_id doesn't exist it returns null. Therefore there's no way to "refresh" source Observable because it doesn't even know what DOM element it should "refresh".

So the only way is to create the Observable after you append HTML from your Ajax call.

answered Oct 11 '16 at 13:50

martin

93,354
25
191
226

wow. thanks for letting me know about this. One other question is: how can I make other elements subcribe to this source. thanks – Trần Kim Dự Oct 11 '16 at 14:40
@TrầnKimDự It's just an Observable, you subscribe to it like to any other Observable. Btw, what do you mean by "elements subscribe"? DOM elements can't subscribe to anything. – martin Oct 11 '16 at 20:38
my meaning is: for example. I have an `input a`. when input a change, two elements named b and c will know and "do something". as code above, I must do manually: when receiving change signal from a, I must run do_something on same function. I want to reverse action. – Trần Kim Dự Oct 12 '16 at 06:21
You'll do it exactly the same way you're doing it right now. Input `a` will on each change update also `b` and `c`. Input's `b` and `c` can't update update automatically, somebody has to trigger the update which is `a`. – martin Oct 12 '16 at 07:21
thanks for letting me know. so RxJS doesn't support recursive observer. It means: if a depends on b. b depends on c. so when chaning a doesn't changing c ? – Trần Kim Dự Oct 13 '16 at 08:19
@TrầnKimDự I doesn't work like this automatically but of course you can make the update manually. – martin Oct 13 '16 at 08:26

RxDom: not working when new id created

1 Answers1