HeinrichApfelmus / threepenny-gui

GUI framework that uses the web browser as a display.
https://heinrichapfelmus.github.io/threepenny-gui/
Other
439 stars 77 forks source link

How to get the id attribute of an element? #39

Closed rnons closed 11 years ago

rnons commented 11 years ago

I find that HTML attributes in Graphics.UI.Threepenny.Attributes module are all WriteAttr. I haven't found out how to get the id_ attribute (or any attribute) of an element?

BTW, is there a plan to support the data- attributes?

HeinrichApfelmus commented 11 years ago

There is currently no way to read id_ and friends. The main reason for this is that elements can be created on the server before they are attached to a particular browser window, and I would have to implement a DOM simulation to support reading from attributes that are on the server.

It's not high priority right now, because most attributes are set by the server anyway, with the notable exception of the value attribute. But perhaps you have a similar attribute in mind that is primarily set by the browser?


The attr combinator from Graphics.UI.Threepenny.Core supports arbitrary attribute names, so the data- stuff should work out of the box.

rnons commented 11 years ago

I was trying to build a chat app. Imagine there is a contact list, click on one contact will start a private chat. Let's say the contact list is a list of <div> elements which have the same class and different id values. The contact list is generated dynamically (e.g. according to the online/offline status). When the user click on one contact, I need to know the id_ or data-id of the specific <div> element being clicked.

So is this possible with threepenny?

fluffynukeit commented 11 years ago

It sounds like you don't specifically need to know the id of the div that was clicked. What you really want to know is which div was clicked, which you can do without knowing its id. Let's say you have a startPrivateChat target function that will start a private chat with the person specified by target. Then you could do something like

makeChatDiv target = do
    d <- new # set text (show target) -- here you show the target user's name in the div
    on click d $ \_ -> startPrivateChat target -- here you start the private chat

So you don't need to know the id_ of the div at all in this case. The information you need is already stored as part of the click handler for each particular div. You can then use makeChatDiv for each user you have in your chat list.

Note: the code above is just something I made up and might not be syntactically consistent with the latest TPG release.

rnons commented 11 years ago

I think I've got your idea. Previously I thought separately about creating new chatDiv and binding it to onClick . As your code show, they can and should be put together.

Thank you very much.