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 listbox. Let us see an example to get UserType and DateOfBirth information of multiple users. The user information form will be,

jQuery_AJAX_UI 

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 user. The code will be,

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

The css is,

body {
font-family: Arial;
}
.userInfo {
background-color: #27F224;
width: 300px;
margin-top:15px;
border-radius: 10px;
}
.userInfo div {
padding: 10px;
}
input, select {
height:30px;
border-radius: 4px;
border: 0;
font-size:16px;
width:120px;
}
label {
color: #DE7B35;
padding-right: 10px;
}
.moreUser {
width: 300px;
text-align:right;
}
.moreUser img{
cursor: hand;
}

Now, its 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 listbox. This options are loaded dynamically based on the match found with the specified selectors while invoking jQuery html(). The code will be,

<?php
$listOptions = '';
$userType = array("visiter","member", "admin");
foreach($userType as $k) {
$listOptions .= "<option value='" . $k . "'>" . $k . "</option>";
}
?>
<html>
<head>
<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>
<script>
function setDynamicUI(view) {
$("<div>").load(view, function() {
$("#target").append($(this).html());
$(".userType").html(<?php echo json_encode($listOptions); ?>); 
$('.userDOB').datepicker({
changeMonth: true,
changeYear: true
});
});
}
$( document ).ready(setDynamicUI("userInfo.php"));
</script>
</head>
<body>
<div id="target"></div>
<div class="moreUser" align="right"><img src="moreUser.png" title="More User" alt="More User"  onClick="setDynamicUI('userInfo.php');" /></div>
</body>
</html>

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 user, we are triggering jQuery datepicker 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