Js mutation observer function

1

Hi there, I’m struggling to understand how to have this working. I copied this code from a plugin I made in bubble, it works fine there not sure why I can’t get it working here.

I have a group #transactions that is not visible on page load from it’s parent container.
When It becomes visible I would like to set a dmx variable anytime it’s scrolled, with the scrolltop position.

I have run the function without the mutation observer and everything works as expected.

function scrollpos() {
    var y = $('#transactions').scrollTop();
    dmx.parse('transactionscroll.setValue(' + y + ')')
}

$(document)
    .ready(function () {
        setTimeout(function () {
            if (document.getElementById(transactions)) {
                $('#transactions').scroll(scrollpos)
            } else {
                var observer = new MutationObserver(function (mutations) {
                    mutations
                        .forEach(function (mutation) {
                            if (mutation.type == 'attributes' && mutation.target.id == transactions) {
                                $('#transactions').scroll(scrollpos);
                                observer.disconnect()
                            }
                        })
                });
                var observerConfig = {
                    childList: true,
                    subtree: true,
                    attributes: true
                };
                var targetNode = document.body;
                observer.observe(targetNode, observerConfig)
            }
        }, 250)
    });
2

I would like this to display a button to allow the user to scroll to the top of the list when new entries are added to the database->list->sorted by descending. (Waiting for the socket.io integration)

Understanding this will allow me to create some other functions that I need too. A mutation observer component would be great, not sure how that would work in terms of interface though.

3

I think you are unnecessary trying to do some overcomplex solutions in coding.

Maybe if you just explain what your goal is, we can guide you to a more visual, two clicks Wappler solution to achieve it :slight_smile:

1 Like
4

For this scenario I would like to get the scroll position from a div not the app body, there seems no native way to achieve that.

5

But why would you like to do that?

Do you want to reveal a div container depending the scroll position?

6

I explained in my second post already one of the reasons I want this. There are more but for simplicity I just outlined this.

7

In Wappler and it’s App Connect you don’t need any complex stuff like mutations observers.

It is simply all done by data bindings. You just fetch the data white the server connect component, bind it to the page for display and add various conditional displays, like buttons, depending on your data.

See

1 Like
8

Is #transactions hidden(display:none) or not in DOM? From your first post I wasn’t able to infere as you said not visible on page load which is different from not in DOM. Your code is looking for and id not available in DOM and not for an id that has a style display:none.

1 Like
9

It’s not in the dom I think. I’m using the dynamic show attribute.

10

That is in the DOM actually(display:none). To not show in DOM you need to use AC conditional region component.

You need to change the observer or use the AC component I guess.

1 Like
11

Thanks for the clarification, I didnt even think about that. I just assumed it was not rendered at all.

I will try the ac component.

1 Like