Load Dynamic Data using jQuery

There are many ways to load dynamic data using jQuery. For example,

  • Sending jQuery AJAX call to PHP for dynamic data to be loaded.
  • Creating HTML with dynamic data and load it into target DIV.

In this tutorial, we are going use the second method to load dynamic data into a list box. Let us see an example to get UserType and DateOfBirth information of multiple users. The user information form will be,


When we click on the Add User icon at the bottom right corner, a new wizard will be appended with UI.

jQuery Example to Load ListBox Dynamically

In this example, we should go with the following steps to implement dynamic data loading using jQuery.

  1. Create UI to be appended for each user information.
  2. Download and import latest version of jQuery library files and jQuery UI files.
  3. Create custom jQuery handlers to append UI and load dynamic data into it.
  4. Trigger handlers on the mouse click event of Add User icon.

We should create UI for getting UserType and DateOfBirth from the user. The code will be,

<div class="userInfo">
<div><label>User Type:</label>
<select name="userType[]" class="userType">
<div><label>Date of Birth:</label><input type="text" name="dateAry[]" class="txtDate" />

The CSS is,

body {
font-family: Arial;
.userInfo {
background-color: #27F224;
width: 300px;
border-radius: 10px;
.userInfo div {
padding: 10px;
input, select {
border-radius: 4px;
border: 0;
label {
color: #DE7B35;
padding-right: 10px;
.moreUser {
width: 300px;
.moreUser img{
cursor: hand;

Now, it’s time to set dynamic data into the UI. Let us have an array of user type. We should iterate over a loop to get options for UserType list box. These options are loaded dynamically based on the match found with the specified selectors while invoking jQuery HTML(). The code will be,

$listOptions = '';
$userType = array("visiter","member", "admin");
foreach($userType as $k) {
$listOptions .= "<option value='" . $k . "'>" . $k . "</option>";
<title>Load Dynamic Data using jQuery</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
function setDynamicUI(view) {
$("<div>").load(view, function() {
$(".userType").html(<?php echo json_encode($listOptions); ?>); 
changeMonth: true,
changeYear: true
$( document ).ready(setDynamicUI("userInfo.php"));
<div id="target"></div>
<div class="moreUser" align="right"><img src="moreUser.png" title="More User" alt="More User"  onClick="setDynamicUI('userInfo.php');" /></div>

Foreach loop creates HTML <option>…</option> tags and put it into a PHP variable $listOptions. This variable will be sent to jQuery to load this dynamic content into all elements having specified selectors.

Since we are getting DateOfBirth from the user, we are triggering jQuery date picker on date box click event.

Download Loading Dynamic Data using jQuery Source Code

This jQuery code tutorial was published on December 12, 2013.

↑ Back to Top