From the posts I've read it doesn't seem possible to append/prepend a thymeleaf attribute using jquery such as the one below. But I'm wondering if there's any way around it. If so I'd be really grateful if you could specify how.
For example I have the below code but it isn't working because ThymeLeaf is compiled on the server while jquery is processed at the client.
Is there a way around this?
This is the code:
To elaborate on why I want to do this:
I have a table in a web application that displays the logged in users friends(left). The logged in user can add/remove friends by searching them in a search bar on the application. The below screenshot might help.
When a user searches for a friend in the right hand side search bar and adds them by clicking the heart icon I add a row to the table using jquery after acquiring the necessary data with ajax.
The problem is that this row contains thymeleaf attributes such as th:href. For example when the logged in user clicks on a friends name in the table it brings the user to the profile page of the friend.
However, thymeleaf attributes don't seem to work when appended/prepended with jquery in this way.
As Thymeleaf attributes are a server-side mechanism, I'm not even sure why you feel you need to deal with them in client-side code. Elements you create on the fly in JS would be fully-formed without relying upon Thymeleaf to generate them.
You could, though I don't generally recommend this, have server-side components generate HTML snippets to include (rather than creating them in the JS). But you'll end up running into a lot of other issues introduced by the schism between server and client using that approach (ask me how I know -- got the battle scars).
I'd say your best bet is to become familiar with what the Thymeleaf attributes do for you, and understand that on the client you need to do the same by hand in the JS. The attributes that you used as examples do very simple things that are easy to live without on the client.