Dynamic HTML using Javascript: Fill same HTML object with different contents

Question

This is the general question:
Which is the best solution when there is an HTML object to fill in different ways depending on DOM events?

This is my case in particular:
I have a navbar where each button shows a modal. The skeleton of the modal is always the same but, as you can imagine, the content change depending on the button.
Then I thought to make each button fill the modal in a different way using Javascript and onclick attributes, this is more or less is how it looks like:

<li><a data-toggle="modal" data-target="#myModal" id="button1" onclick="fillmodal(this.id)">Text button1</a></li>
<li><a data-toggle="modal" data-target="#myModal" id="button2" onclick="fillmodal(this.id)">Text button2</a></li>
<li><a data-toggle="modal" data-target="#myModal" id="button3" onclick="fillmodal(this.id)">Text button3</a></li>

Let's imagine for example that:

• Button1 has to show just a text with some imagines inside the modal.
• Button2 has to show a form with a text area and a submit button inside the modal.
• Button3 has to show the same form of Button2 with 2 more fields.

As you can see the content is always different but some element could be shared (this is the case of the text area showed by Button2 and Button3 in our example).

There are many different approaches to this problem:

I could write a totally empty modal in the HTML and the function fillmodal(elementId) could make all the work to fill it, but I find this solution quite ugly because it takes a lot of lines in the script to fill the modal, then another solution would be to use AJAX Requests in order to take the content directly from the server.
I think this second solution would be the best in case of a lot of buttons.

So far the best solution that I found consist in to write everything directly inside the modal as hidden elements, and make the function fillmodal(elementId) show what necessary just changing the attributes.

Which do you think is the best solution?

Answer 1

Lots of different solutions for what you are trying to achieve.

Here's one (one modal per button):

<li><a id="button1" onclick="showmodal(this.id)">Text button1</a></li>
<li><a id="button2" onclick="showmodal(this.id)">Text button2</a></li>
<li><a id="button3" onclick="showmodal(this.id)">Text button3</a></li>

<div style="display: none;" class="modal" id="button1_content">Content 1</div>
<div style="display: none;" class="modal" id="button2_content">Content 2</div>
<div style="display: none;" class="modal" id="button3_content">Content 3</div>

function showmodal(id) {
    document.getElementById(id+'_content').style.display = "block";
}

Here's another (get modal's html from another div):

<li><a id="button1" onclick="showmodal(this.id)">Text button1</a></li>
<li><a id="button2" onclick="showmodal(this.id)">Text button2</a></li>
<li><a id="button3" onclick="showmodal(this.id)">Text button3</a></li>

<div style="display: none;" id="button1_content">Content 1</div>
<div style="display: none;" id="button2_content">Content 2</div>
<div style="display: none;" id="button3_content">Content 3</div>

<div id="modal">Content 3</div>

function showmodal(id) {
    document.getElementById('modal').innerHTML =
      document.getElementById(id+'_content').innerHTML;
}