Dynamic Content Modal via AJAX with jQuery
by Vincy. Last modified on July 13th, 2022.
A modal window will provide much better user experience than a new page. In this tutorial, we are going to load dynamic content for a jQuery modal via an AJAX request. Taking a user to a new page is a complete distraction of what user is doing a currently.
In comparison to that, showing a modal window in the current page itself with dynamic content will help the user to stay in the context.
I have added an example for loading dynamic content by requesting a PHP file via an AJAX call. In this PHP file, I have declared a content array containing the dynamic data to be loaded to the jQuery modal window.
The modal dialog will be shown with the use of jQuery UI library functions. In a previous tutorial, we have seen how to initialize and open jQuery modal dialog with static content.
If you are a beginner then, you should start with learning about loading dynamic content using jQuery via AJAX. You may be also interested in auto load refresh a div using jQuery.
The jQuery load() function is used by passing the PHP file path to get the dynamic content. This function loads the dynamic content to the target DIV element after getting the AJAX response successfully.
Then the target DIV element will be shown as a jQuery dialog window by initializing dialog with the required options. In this example, I set the modal option as true and also set the height and width of the modal window.
HTML Elements for Handling Dialog
The following HTML code shows the HTML button elements that trigger the modal dialog. This code has a target DIV element to load dynamic data and open it in a modal window using the jQuery dialog() function.
<div id="demo-modal-target">
<div class="demo-title">Demo Open Modal Window</div>
<div onclick="loadDynamicContentModal('jquery')"
class="btn-modal-target" id="btn-jquery">jQuery</div>
<div onclick="loadDynamicContentModal('bootstrap')"
class="btn-modal-target" id="btn-bootstrap">Bootstrap</div>
<div onclick="loadDynamicContentModal('responsive')"
class="btn-modal-target" id="btn-responsive">Responsive</div>
</div>
<div id="demo-modal"></div>
jQuery Script to Load Dynamic Content in Modal
This jQuery function receives the key for requesting the dynamic content from the PHP file. The PHP file receives this key and returns the corresponding value associated with this key as an AJAX response.
The jQuery load() function loads the dynamic content to the target DIV. With the reference of the target DIV element id, the dialog function is initialized with a set of options. After initializing dialog we open the target DIV as a jQuery dialog window.
You can also load dynamic content on a Bootstrap modal using jQuery.
<script>
function loadDynamicContentModal(modal){
var options = {
modal: true,
height:300,
width:500
};
$('#demo-modal').html("<img src='LoaderIcon.gif' />");
$('#demo-modal').load('get-dynamic-content.php?modal='+modal).dialog(options).dialog('open');
}
</script>
The code for the PHP file containing the dynamic array data is given below and this PHP file will be invoked via the AJAX call.
<?php
$dynamic_content_array = array(
"jquery" => "<img src='jquery-logo.jpg' /><div class='modal-text'>jQuery is a Javascript library provides API functions for handling events with animation effects.</div>",
"bootstrap" => "<img src='bootstrap-logo.jpg' /><div class='modal-text'>Bootstrap is a popular framework helps in fast and furious web developement.</div>",
"responsive" => "<img src='responsive.jpg' /><div class='modal-text'>Web design methodology used to make the page content responsive to the size of various viewport.</div>"
);
if(!empty($_GET["modal"])) {
print $dynamic_content_array[$_GET["modal"]];
}
?>
Hi, I’m Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I’m currently available for freelance work.