Hi Here Below Is My jS code. The problem is that it works fine when we load .recent-orders div for changing pages but when i click on the details text it reloads the page and dont show preloader instead it loads and move towards next page. I want it not to reload and move towards next page showing preloader for 1 sec.
Desire page to come but shouldnot reload page
JS:
$(document).ready(function () {
let sideMenu = document.querySelector("aside");
let menuBtn = document.querySelector("#menu-btn");
let closeBtn = document.querySelector("#close-btn");
let themeToggler = document.querySelector(".theme-toggler");
let detailCustomerEach = document.querySelectorAll(".detail_c_each");
let sidebar_a = document.querySelectorAll(".sidebar_a");
let alerts = document.querySelectorAll(".alert");
$(menuBtn).click(function () {
sideMenu.style.display = "block";
$(sideMenu).removeClass("animate__animated animate__slideOutLeft");
$(sideMenu).addClass("animate__animated animate__slideInLeft");
});
$(sidebar_a).click(function (e) {
// load another page without reloading
if ($(sidebar_a).hasClass("active")) {
$(sidebar_a).removeClass("active");
}
e.preventDefault();
$(this).addClass("active");
setTimeout(() => {
let url = $(this).attr("href");
// show page content and change the url
$(".recent-orders").load(url + " .recent-orders", function () {
window.history.pushState(null, null, url);
});
}, 1000);
$(".recent-orders").load("./inc/preloader.html");
});
$(detailCustomerEach).click(function (e) {
// load section detail customer without reloading
e.preventDefault();
let url1 = $(this).attr("href");
setTimeout(() => {
$(".recent-orders").load(url1 + " .recent-orders", function () {
window.history.pushState(null, null, url1);
});
}, 5000);
});
// hide alert after 2 seconds
$(alerts).each(function () {
setTimeout(
function () {
$(this).fadeOut("slow");
}.bind(this),
2000
);
});
$(closeBtn).click(function () {
// sideMenu.style.display = "none";
$(sideMenu).removeClass("animate__animated animate__slideInLeft");
$(sideMenu).addClass("animate__animated animate__slideOutLeft");
});
$(".add-product").click(function () {
window.open("./index", "_self");
});
// change theme
$(themeToggler).click(function () {
document.body.classList.toggle("dark-theme-variables");
themeToggler.querySelector("span:nth-child(1)").classList.toggle("active");
themeToggler.querySelector("span:nth-child(2)").classList.toggle("active");
});
});
HTML Main
<div class="recent-orders">
<h2>Customers</h2>
<table id="recent-orders-table">
<thead>
<tr>
<th>Customer Id</th>
<th>Customer Name</th>
<th>City</th>
<th>Contact</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>UZAIR</td>
<td>Lahore</td>
<td class="success">03233337187</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<td class="primary"> <a class="detail_c_each" href="./index?detail_customer=30"> Details </a> </td>
</tr>
<tr>
<td>2</td>
<td>UZAIR</td>
<td>Lahore</td>
<td class="success">03233337187</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<td class="primary"> <a class="detail_c_each" href="./index?detail_customer=31"> Details </a> </td>
</tr>
<tr>
<td>3</td>
<td>UZAIR</td>
<td>Lahore</td>
<td class="success">03233337187</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<td class="primary"> <a class="detail_c_each" href="./index?detail_customer=32"> Details </a> </td>
</tr>
</tbody>
</table>
Show All
</div>
Html to move
<?php
$server = "localhost";
$username = "root";
$pass = "";
$dbname = "stinkspolitics_pl";
$conn = mysqli_connect($server, $username, $pass, $dbname);
if (isset($_GET['detail_customer'])) {
$quest_id = $_GET['detail_customer'];
$get_quest = "SELECT * FROM questions WHERE quest_id = '$quest_id'";
$getting_quest = mysqli_query($conn, $get_quest);
while ($row = mysqli_fetch_assoc($getting_quest)) {
$quest_title = $row['quest_title'];
$category_id = $row['category_id'];
}
}
?>
<div class="recent-orders cust_det ">
<h2> Customer Detail</h2>
<div class="customer_detail">
<form id="form" method="POST" action="" class="c_form animate__animated animate__fadeIn">
<?php
if (isset($_GET['success'])) {
echo "<div class='alert alert-success'>
<strong>Success!</strong> Your question has been submitted.
</div>";
}
if (isset($_GET['error'])) {
echo "<div class='alert alert-danger'>
<strong>Sorry!</strong> Your question has not been submitted.
</div>";
}
?>
<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="cat_id" value="<?php echo $category_id ?>" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="quest_t" value="<?php echo $quest_title ?>" id="quest_t">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<button id="submit-btn" class="btn-primary" type="submit" name="submit">Submit</button>
</div>
</form>
</div>
</div>
<?php
if (isset($_POST['submit'])) {
$quest_t = $_POST['quest_t'];
$update = "UPDATE questions SET quest_title = '$quest_t' WHERE quest_id = '$quest_id'";
$run_update = mysqli_query($conn, $update);
if ($run_update) {
echo "<script>window.open('index?detail_customer=$quest_id&success', '_self')</script>";
}
}
?>
when you define URL to href it will being always redirect to that page
<a class="detail_c_each" href="./index?detail_customer=31"> Details </a>
alternate solution
HTML code
<a class="detail_c_each" herf="javascript:void(0)" data-href="./index?detail_customer=31"> Details </a>
JS code
$(detailCustomerEach).click(function (e) {
// load section detail customer without reloading
e.preventDefault();
let url1 = $(this).attr("data-href");
setTimeout(() => {
$(".recent-orders").load(url1 + " .recent-orders", function () {
window.history.pushState(null, null, url1);
});
}, 5000);
});
I hope this solution will work for you
Related
I want to read and print out tag attribute names from an xml file and print them out on the screen using ajax.The code I wrote in the file_controller.php file works fine in printing the attribute names but the ajax is not fetching the data printed out which is saved in the data array.Please guys I need help in solving this problem.The database files, xml files are all fine.its just the ajax call that is the problem.Thanks in advance
Here is my index.php code for receiving the data
<?php
require('connect.php');
?>
<html>
<head>
<title>Bellcom Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-9" style="margin:0 auto; float:none;">
<span id="message"></span>
<div class="form-group">
<label>Upload files</label>
<input type="file" name="file" id="file">
</div>
<br>
<div class ="form-group">
<label>Search for a File Number</label>
<input type="text" id="file_name" name="file_name">
</div>
<br>
<div class="form-group">
<button type="button" name="submit" id="submit" class="btn btn-info" >Fetch</button>
</div>
<div class="table-responsive" id="display" style="display:none">
<table class="table table-bordered">
<tr>
<td width="10%" align="right"><b>Attribute Name</b></td>
<td width="90%"><span id="name"></span></td>
</tr>
<tr>
<td width="10%" align="right"><b>System ID</b></td>
<td width="90%"><span id="sysid"></span></td>
</tr>
<tr>
<td width="10%" align="right"><b>Date</b></td>
<td width="90%"><span id="date"></span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#submit').click(function(){
var id= $('#file_name').val();
if(id != '')
{
$.ajax({
url:"file_controller.php",
type: "POST",
data:{id:id},
dataType:"JSON",
success:function(data)
{
$('#meeting_details').css("display", "block");
$('#name').text(data.name);
$('#sysid').text(data.sysid);
$('#date').text(data.date);
},
error: function (data) {
alert("data is not received");
}
})
}else{
alert("Please Select a file");
$('#meeting_details').css("display", "none");
}
});
});
</script>
and here is my php file for processing the data.
<?php
require('connect.php');
$f_name = "";
if (isset($_POST['id'])) {
$f_name = strip_tags($_POST['id']);//remvove html tags
$f_name = str_replace(' ', '', $f_name);//remove spaces
$f_name = strtolower($f_name);//lower case
$arr = array('XML_','.xml');
$f_name = implode("$f_name",$arr);
$database_file = mysqli_query($conn,"SELECT * FROM xml_files WHERE file_name='$f_name'");
$row = mysqli_fetch_array($database_file);
$database_file_name=$row['file_name'];
if (file_exists("files/$database_file_name")) {
$xml=simplexml_load_file("$database_file_name") or die("Error: Cannot create object");
foreach ($xml->children() as $node) {
foreach ($node->children() as $nodechild) {
foreach ($nodechild->children() as $nodegrandchild){
$arr = $nodegrandchild->attributes(); // returns an array
if (!empty($arr["name"])) {
$data['name'] = $arr["name"]; //save the attribute name in an array format
print ("name=".$arr["name"]); // get the value of this attribute
print ("<br>");
print ("<p><hr>");
}
if (!empty($arr["sysid"])) {
$data['sysid'] = $arr["sysid"];
print ("sysid=".$arr["sysid"]);
print ("<br>");
print ("<p><hr>");
}
if (!empty($arr["date"])) {
$data['date'] = $arr["date"];
print ("date=".$arr["date"]);
print ("<br>");
print ("<p><hr>");
}
}
}
}
}
echo json_encode($data);
}
?>
Try to add event.preventDefault():
$('#submit').click(function(event){
event.preventDefault()
i created a dynamic form where you can add a form group. on a second page the input is sent by post. if i add more than one field, the radio buttons don't work anymore and the mail delivery doesn't work either
I tried to make a for-loop, but doesnt worked..
index.php (dynamic form):
<script>
var ct = 1;
function new_link()
{
ct++;
var div1 = document.createElement('div');
div1.id = ct;
// link to delete extended form elements
var delLink = '<div style="text-align:right;margin-right:65px">Delete</div>';
div1.innerHTML = document.getElementById('newlinktpl').innerHTML + delLink;
document.getElementById('newlink').appendChild(div1);
}
// function to delete the newly added set of elements
function delIt(eleId)
{
d = document;
var ele = d.getElementById(eleId);
var parentEle = d.getElementById('newlink');
parentEle.removeChild(ele);
}
</script>
<style>
#newlink {width:600px}
</style>
<form method="post" action="index2.php">
<div id="newlink">
<div>
</div>
</div>
<p>
<br>
<input type="submit" name="submit1">
</p>
<p id="addnew">
New
</p>
</form>
<div id="newlinktpl" style="display:none">
<div>
<table>
<tr>
<label>Ordner:</label>
<td> <input type="text" name="linkurl[]" value="" placeholder="New Folder" required></td>
</tr>
<tr>
<td>
<label>Write</label>
<input type="radio" name="berechtigung[] " value="W">
</td>
<td>
<label>Read</label>
<input type="radio" name="berechtigung[] " value="R">
</td>
<td>
<label>None</label>
<input type="radio" name="berechtigung[] " value="K ">
</td>
</tr>
</table>
</div>
</div>
index2.php: (POST-DATA)
<?php
if(count($_POST))
{
$len = count($_POST['linkurl']);
for ($i=0; $i < $len; $i++)
{
echo $_POST['linkurl'][$i] . '<br>';
echo $_POST['berechtigung'][$i] . '<br>';
}
}
?>
I have a list product's category and want to edit.
when i click on edit button of particular category open a Bootstrap modal for click ID to update content.
Popup is coming but view is not loading on it.
List of data:
<?php if (is_array($category_list)) {
foreach ($category_list as $item): ?>
<tr>
<td>
<?=$item->category_name?></td>
<td>
<a href="#" class="btn btn-small z-depth-0" data-toggle="modal" data-target="#categoryModal" id="category_modal" data-id="<?=$item->cat_id?>" data-url="<?php $this->config->base_url();?>admin_panel/get_category/<?=$item->cat_id?>">
<i class="mdi mdi-editor-mode-edit"></i>
</a>
</td>
</tr>
<?php endforeach;}
?>
Javascript Function :
<script type="text/javascript">
$(document).on("click", "#category_modal", function () {
var url = $(this).data('url');
alert(url);
jQuery.ajax({
url: url,
success: function(response)
{
alert(response);
jQuery('#categoryModal .modal-content').html(response);
jQuery('#categoryModal').modal('show', {
});
}
});
});
</script>
Controller Function :
public function get_category() {
$cat_id = $this->uri->segment(3);
$data['category'] = $this->admin_model->get_category($cat_id);
$this->load->view('backend/category_popup', $data);
}
category_popup.php View:
<?php
if (is_array($category)) {
foreach ($category as $item) {
$cat_id = $item->cat_id;
$cat_name = $item->category_name;
}
} else {
$cat_id = '';
$cat_name = '';
}
?>
<form action="#" method="post" name="form" style="margin-top: -200px;width: 100%;height: 100%" class="z-depth-4">
<div class="card-panel">
<div class="card-panel cyan lighten-3">
<h4 style="text-align: center">Update Category - <strong><?=$cat_name?></strong></h4>
</div>
<div class="row">
<div class="col l6 s12">
<label for="subcat_name">Category Name</label>
<div class="input-field">
<input id="cat_names" name="cat_name" type="text" class="validate" value="<?=$cat_name?>">
</div>
</div>
</div>
<div class="row">
<div class="col l4 s12">
<button class="btn" type="button" name="action" onclick="update_cat()">Update</button>
</div>
</div>
</div>
</form>
append to ajax the data attribute:
$('#category_modal').on('show.bs.modal', function(e) {
var url = $(this).data('url');
alert(url);
jQuery.ajax({
url: url,
data:{data_id:$(this).attr('data_id')},
success: function(response)
{
alert(response);
jQuery('#categoryModal .modal-content').html(response);
}
});
});
and your controller change:
$cat_id = $this->input->get('data_id');
I have one search box on home page. when user enter the some value on home.php then that page goes to select.php. On select page i have filters with checkboxes, radio button & price range filter.
I have tried some jquery on click of radio button but its value are coming and sql query giving error. I want to filter out my result according to selection of radio button, checkboxes & price range. so please suggset any to me.
i have tried following code for this,
$("#localityid2").click(function () {
var search_keyword = $("#localityid2").val();
$.ajax({
type: "POST",
url: "select.php",
data: search_keyword ,
success: function () {
window.location.href = "select.php?locality="+search_keyword;
}
});
return false;
});
<table class="sbox">
<tr>
<td>
<div class="radiobtn">
<input type="radio" name="location" class="locality" id="localityid1" value="Aundh" style="float: none;">
</div>
<div class="text">Aundh</div>
</td>
</tr>
<tr>
<td>
<div class="radiobtn">
<input type="radio" name="location" class="locality" id="localityid2" value="Baner" style="float: none;"> </div>
<div class="text">Baner</div>
</td>
</tr>
<tr>
<td>
<div class="radiobtn">
<input type="radio" name="location" class="locality" id="localityid3" value="Ravet" style="float: none;">
</div>
<div class="text">Ravet </div>
</td>
</tr>
<tr>
<td>
<div class="radiobtn">
<input type="radio" name="location" class="locality" id="localityid4" value="Wakad" style="float: none;">
</div>
<div class="text">Wakad</div>
</td>
</tr>
</table>
<h3 style="margin-top: 19px;">Price Range</h3>
<div class="slide-result">
<div id="price-range"></div>
<div class="slide-result">
<input disabled class="amount1" type="text" id="pr1" value="1000" />
<input disabled class="amount2" type="text" id="pr2" value="600000" />
</div>
<div class="clear"></div>
</div>
<h3>AC/Non AC</h3>
<table class="sbox">
<tr>
<td>
<div class="radiobtn">
<input type="checkbox" name="actype[]" class="checkboxclass" value="&actype=1" style="float: none;" />
</div>
<div class="text">AC</div>
</td>
</tr>
<tr>
<td>
<div class="radiobtn">
<input type="checkbox" value="&actype=0" name="actype[]" class="checkboxclass" style="float: none;" />
</div>
<div class="text">Non Ac</div>
</td>
</tr>
</table>
include("db.php");
$city = $_POST['city'];
list($localitys, $citys) = explode(' - ', $city, 2);
$_SESSION['city'] = $citys;
$_SESSION['localitys'] = $localitys;
$_SESSION['event'] = $_POST['events'];
if(isset($_GET['locality']))
{
$sql= mysql_query("SELECT * FROM hall_search_data_1 WHERE city_name='".$_SESSION['city']."' AND hall_evnt_type LIKE '%".$_SESSION['event']."%' AND locality = '".$_GET['locality']."' ")or die(mysql_error());
}
else
{
$sql= mysql_query("SELECT * FROM hall_search_data_1 WHERE city_name='".$_SESSION['city']."' AND hall_evnt_type LIKE '%".$_SESSION['event']."%' ")or die(mysql_error());
}
while($row=mysql_fetch_row($sql))
{
///here my content will print
}
here some screen shot my select.php page
when i select any radio button then giving error like this
From the comments, I can suggest following fixes to your code.
<?php
include("db.php");
$city = '';
if(isset($_POST['city']))
{
$city = $_POST['city'];
list($localitys, $citys) = explode(' - ', $city, 2);
$_SESSION['city'] = $citys;
}
if(isset($_GET['localitys']))
{
$_SESSION['localitys'] = $localitys;
}
if(isset($_POST['events']))
{
$_SESSION['event'] = $_POST['events'];
}
$sql = "";
if(isset($_GET['locality']))
{
$sql .= "SELECT * FROM hall_search_data_1 WHERE 1 = 1 ";
if(isset($_SESSION['city']) && !empty($_SESSION['city']))
$sql .= " AND city_name='".$_SESSION['city']."' ";
if(isset($_SESSION['event']) && !empty($_SESSION['event']))
$sql .= " AND hall_evnt_type LIKE '%".$_SESSION['event']."%' ";
if(isset($_GET['locality']) && !empty($_GET['locality']))
$sql .= " AND locality = '".$_GET['locality']."' ";
mysql_query($sql) or die(mysql_error());
}
else
{
$sql .= "SELECT * FROM hall_search_data_1 WHERE 1 = 1 ";
if(isset($_SESSION['city']) && !empty($_SESSION['city']))
$sql .= " AND city_name='".$_SESSION['city']."' ";
if(isset($_SESSION['event']) && !empty($_SESSION['event']))
$sql .= " AND hall_evnt_type LIKE '%".$_SESSION['event']."%' ";
mysql_query($sql) or die(mysql_error());
}
?>
Also try printing $_POST and $_SESSION arrays so that you can come to know whether all parameters are passing/ passing correctly and all the sessions are setting up properly.
I create a search form that using ajax as the action. In success ajax, how can I just load some specific div without load all refresh page.
This is my form
<?php
$properties = array('id' => 'form1');
echo form_open("", $properties);
?>
<fieldset>
<div class="controls" id="chekboxes">
<label class="checkbox "><input type="checkbox" name="criteria[]" id="nomorcb"/> Nomor Request </label>
<input type="text" class="input-xlarge focused" id="no" name="no" placeholder="Masukkan No Request..."/>
<label class="checkbox "><input type="checkbox" name="criteria[]" id="namacb"/> Nama User </label>
<input type="text" class="input-xlarge focused" id="nama" name="nama" placeholder="Masukkan Nama User..."/>
<label class="checkbox "><input type="checkbox" name="criteria[]" id="departementcb" /> Departement</label>
<div class="control-group">
<div class="controls">
<select class="input-xlarge" id="selectError" name="dep">
<option value="">-- Pilih departement --</option>
<?php
foreach ($dep as $data) {
echo "<option value='" . $data['nama_departement'] . "'>" . $data['nama_departement'] . "</option>";
}
?>
</select>
</div>
</div>
<label class="checkbox "><input type="checkbox" name="criteria[]" id="rentangcb"/> Rentang waktu</label>
<div class="controls" id="tanggal-rentang">
<input type="text" class="input-small datepicker" id="tanggal" value="" name="tgl_awal"><span> s/d </span>
<input type="text" class="input-small datepicker" id="tanggal2" value="" name="tgl_akhir">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" id="submit">Cari</button>
<button type="reset" class="btn" id="cancel">Cancel</button>
</div>
</fieldset>
<?php echo form_close(); ?>
this is the action's code for execute the form.
public function search() {
$id_request = $this->input->post('nomor');
$nama_user = $this->input->post('nama');
$departement = $this->input->post('departement');
$awal = $this->input->post('tgl_awal');
if ($awal != "") {
$awal = $this->input->post('tgl_awal');
} else {
$awal = "2014-01-01";
}
$timestamp_awal = strtotime($awal);
$tgl_awal = date("Y-m-d H:i:s", $timestamp_awal);
$akhir = $this->input->post('tgl_akhir');
if ($akhir != "") {
$akhir = $this->input->post('tgl_akhir');
} else {
$akhir = "2020-01-01";
}
$timestamp_akhir = strtotime($akhir);
$tgl_akhir = date("Y-m-d H:i:s", $timestamp_akhir);
$data = $this->model_request->search($id_request, $nama_user, $departement, $tgl_awal, $tgl_akhir);
echo json_encode($data);
}
and this is the Ajax jquery for form above :
$('form').on('submit', function() {
var nomor = $('#no').val();
var nama = $('#nama').val();
var departement = $('#selectError').val();
var tgl_awal = $('#tanggal').val();
var tgl_akhir = $('#tanggal2').val();
$.ajax({
url: '<?php echo base_url() . 'it_team/control_it/search' ?>',
type: 'POST',
data: {nomor: nomor,
nama: nama,
departement: departement,
tgl_awal: tgl_awal,
tgl_akhir: tgl_akhir},
dataType: 'json',
success: function(obj) {
//Please give me an idea
}
});
return false;
For testing, I try seearch and thank God, it gives me a success on json like this:
[{"id_request":"015","nama_user":"Dzil","departement":"IT","waktu_it_terima":"2015-06-19 02:51:05"},
{"id_request":"017","nama_user":"Dzil","departement":"IT","waktu_it_terima":"2015-06-19 13:32:46"}]
My problem is, the result of search form above will be displaying into a table in same page with the form above. You know, in tbody's table will be generate the object on based the return of json. I am newbie using json. The table looked like this
<div class="box-content" id="things_table2">
<table class="table table-bordered table-striped table-condensed" id="table1">
<thead>
<tr>
<th>No. </th>
<th>No Request</th>
<th>Nama user</th>
<th>Departement</th>
<th>Tanggal Request</th>
<th>Action</th>
</tr>
</thead>
<tbody id="hasil-pencarian">
// Result will be showing here
</tbody>
</table>
</div>
Any help it so appriciated.
Try like this (beware there are less fields in your json than in your table):
var data = [
{
'id_request': '015',
'nama_user': 'Dzil',
'departement': 'IT',
'waktu_it_terima': '2015-06-19 02:51:05'
},
{
'id_request': '017',
'nama_user': 'Dzil',
'departement': 'IT',
'waktu_it_terima': '2015-06-19 13:32:46'
}
];
var html = '';
for (var i = 0; i < data.length; i++) {
var td="";
for(var key in data[i]){
td+='<td>'+data[i][key]+'</td>';
}
html+="<tr>"+td+"</tr>";
}
$('#hasil-pencarian').html(html);
There is nothing special about json. Treat it like any js object, ie after parsing it.
Since its just an array of objects, you can iterate over it and do whatever.
var html = '';
$.each(data, function (index, element) {
// build your html
html += '<tr>;'
html += '<td>'+ index + 1 + '</td>';
html += '<td>'+ element.id_request + '</td>';
// same for other elements use `element.<key-name>`
// end tr after all the td's are done
html += '</tr>;'
});
Once you have iterated over all the elements, inject it in the dom.
$('.DOM-ELEMENT').html(html);