1

I need to set as a dynamic id for the Boostrap modal and refer it.

<div class="modal"  id="questionEdit">
</div >                             

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#questionEdit">Edit Question</button>

I have tried following way

<div class="modal"  th:id= "${question.question_id}  + 'question_editModal' ">
</div >

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#${question.question_id}  + 'question_editModal'">Edit Question</button>

But this is not working. Can anyone hel pme to fix this?

IU Kottahchchi
  • 99
  • 2
  • 9
  • 1
    Is it just me and you who had this kind of problem? I have a very similar one when the user should provide an answer to a list of questions. Each answer opens a modal, which would have a unique id, corresponding to the question's id. – Yuriy Sep 08 '22 at 12:25
  • @Yuriy I think so, bro! Are you developing a question and answer forum? I have used a bootstrap model for submitting questions. It is working perfectly, but I also need to open a bootstrap model with a dynamic thymleaf id for editing questions. I think it is similar to your case. Are you using Java in the backend? – IU Kottahchchi Sep 08 '22 at 15:07
  • 1
    I just post my comment and after that, I found out how to fix the problem. I just want people to know because many times I am searching and could not find similar problems tha that I had. So, if it helps even one developer, it is worth it. My back end is Ruby on Rails and I am using React on the Front end with Bootstrap. – Yuriy Sep 08 '22 at 16:43

1 Answers1

0

OK, I think I figured it out. At least in my case, it is working. So for your code, it should be something like this:

<div class="modal"  th:id= {`question_editModal${question.question_id}`}>
</div >

and:

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target={`#question_editModal${question.question_id}`}>Edit Question</button>

Please, let me know if it is working for you.

Yuriy
  • 53
  • 7
  • I changed my code as
    . But an error occured."org.thymeleaf.exceptions.TemplateProcessingException: Could not parse as expression: "{`question_editModal${question.question_id}`}" " How to fix this issue?
     – IU Kottahchchi Sep 08 '22 at 17:14
  • 1
    There are Backticks ``, which I do not see in your code! – Yuriy Sep 08 '22 at 19:08
  • I copied and paste your code. Backticks are disappeared after comment submission. Can you please show your dynamic id and data-bs-target id? – IU Kottahchchi Sep 09 '22 at 00:40
  • In this fragment, I am using "answerModalLabel": – Yuriy Sep 09 '22 at 11:54