how to get the element where content is rendered on event dispatch? about render_async

[neohunter]

Yes, I think is vital to know the element where the response was renderer. I think this should be passed to this event.

So we can do something like:

document.addEventListener("users-loaded", function(element) {
  $('a', element).click(function(){...})
});

(just a random example)

[nikolalsvk]

Hey @neohunter, I've been trying to make some progress on this issue and I have couple of ideas.

As of current implementation, you are in the control of what element get's rendered on the page. What I mean by that is that the placeholder element is replaced by the content you return from the server. That's why we're dispatching the event from the document element, instead of a specific element inside the document.

So, I'm suggesting that you return some content that you can easily get in your event callback function.

Let's say you return this from the server:

<p id='user-comment'>a comment</p>

You could then get the rendered element in your event callback like this:

document.addEventListener("users-loaded", function() {
  var loadedElement = $('#user-comment')
});

How does this sound to you?

[nikolalsvk]

Thanks for checking out the previous solution I posted @filipewl!

Another approach that we could do by changing the VanillaJS is to use innerHTML instead of outerHTML. With innerHTML we will have the reference to the parent object, but this would be a breaking change for most of the users (I think) since parent element won't get replaced.

We could also create an use case where gem will use innerHTML with some configuration option passed to it. We would then leave outerHTML to be the default behaviour and then slowly progress to innerHTML solution as versions progress further :)

[nikolalsvk]

Hey @neohunter, thanks for submitting the issue.

It's not possible to access the element where the request was rendered.

Can you explain a bit more what is your use case? Do you want to know ID of the element that shows the response data?

[filipewl]

The above approach should work, I've just tested it.

From what I've been reading, we don't have a way to send what's been rendered to the event in the vanilla JS part of the code. We replace the placeholder element with the request's response using outerHTML, but according to this docs we don't have a reference to the rendered elements:

Also, while the element will be replaced in the document, the variable whose outerHTML property was set will still hold a reference to the original element:

var p = document.getElementsByTagName("p")[0];
console.log(p.nodeName); // shows: "P"
p.outerHTML = "<div>This div replaced a paragraph.</div>";
console.log(p.nodeName); // still "P";

The only way to get a reference to the rendered elements is to query the DOM for them afterwards.

[nikolalsvk]

I think we answered this question in couple of ways, if there are some more inquiries about it, I'll reopen it.