In a page, there are around 150 submenus (expandable). Every click on a submenu opens a modal with specific information for the submenu. Data is fetched initially when the page loads. I wonder what is a better way to implement the modals.
Should I write 150 modals in the same page, or write one modal then create the content dynamically?
For the latter option I need an example.
Technologies used: Bootstrap, HTML, CSS, jQuery.
In a page, there are around 150 submenus (expandable). Every click on a submenu opens a modal with specific information for the submenu. Data is fetched initially when the page loads. I wonder what is a better way to implement the modals.
Should I write 150 modals in the same page, or write one modal then create the content dynamically?
For the latter option I need an example.
Technologies used: Bootstrap, HTML, CSS, jQuery.
Share Improve this question edited Sep 24, 2018 at 15:51 informatik01 16.4k11 gold badges78 silver badges108 bronze badges asked Jul 21, 2016 at 6:24 Rahbee AlveeRahbee Alvee 1,9947 gold badges26 silver badges45 bronze badges 3- Are you fetching data by php ? – Ayaz Ali Shah Commented Jul 21, 2016 at 6:27
- @Mr.Developer : No. Data is static. I have the data already. – Rahbee Alvee Commented Jul 21, 2016 at 6:30
- @VishalPanara: I dont want to show multiple modals in single page. I would like to show one modal at a time. But the problem is to write the code behind it for all the modals. – Rahbee Alvee Commented Jul 21, 2016 at 6:33
4 Answers
Reset to default 13You might like this example i have created, Let me know if you dont understand any where.
$(document).ready(function(e) {
// Initializing our modal.
$('#myModal').modal({
backdrop: 'static',
keyboard: false,
show: false,
});
$(document).on("click", ".modalButton", function() {
var ClickedButton = $(this).data("name");
// You can make an ajax call here if you want.
// Get the data and append it to a modal body.
$(".modal-body").html("<p>" + ClickedButton + "</p> <p>Some text in the modal.</p> ");
$('#myModal').modal('show');
});
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 1" data-toggle="modal">Open Modal 1</button>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 2" data-toggle="modal">Open Modal 2</button>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 3" data-toggle="modal" >Open Modal 3</button>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 4" data-toggle="modal">Open Modal 4</button>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 5" data-toggle="modal">Open Modal 5</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>You can just create a single modal. and as you have mentioned you will have 150 menu so you can give them a common class name and using a jquery get the click event of those button/menu. You can have some ajax call to get some dynamic data if you want. append your response to the modal body and just show the modal. Thats it!!
You can write one modal in your page. Then, every time you click a submenu, call an asynchronous function to get the appropriate data, append them to the modal and show it:
jQuery
$(document).on('click', '.submenu', function() {
$.ajax({
url: 'path/to/file',
method: 'POST',
data: { ... },
success: function(data) {
// Get the data and fill the modal
// Show modal
$('#myModal').modal('show');
},
error: function() {
// Error handling
}
});
});
Of course you should write one modal and generate content on demand. If you will go with the first option then every time you will need to make a change in the common area you will have to change +150 files! That's very bad approach.
You need to remember that web application should be consistent. This way you will save yourself a lot of time and effort.
Also, how do you plan to pull it off. Load 150 modal windows at once and than wait for data ?:P
The way I see it - create one modal that will be a framework and then fill it with data, maybe add stuff if you need it in other template file for specific case.
Cheers!
Load the data dynamically using jQuery. I'm assuming you have buttons to open each modal?
http://jsfiddle.net/h3WDq/
$('#myModal1').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
// Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. I'm using use jQuery here, you could use it to load your data
var modal = $(this)
modal.append("<p>Test</p>");
})