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?

jlowcs · Accepted Answer · 2015-03-14 22:32:20Z

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;
}

answered Mar 14, 2015 at 22:32

jlowcs

1,9331 gold badge11 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TTK Over a year ago

The first solution is the easiest, don't even need javascript, just use data-toggle="modal" data-target="#modal1", but its not so cheap...it needs to write a new modal for every button, but what if the structure of the modal is very complex? That's why I would like to recycle the code as much as possible. <br> The second solution is probably what I will do: is much easier to take the content of a hidden div and put it inside the modal then to play hiding and showing elements inside the same modal, thanks.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related