Datatable autorefresh is changing the CSS of the Table - php

I have this
table.php
<?php
$connect = mysqli_connect("dbexample.com", "dboexample", "password", "dbexample");
$query ="SELECT * FROM te_lb_load_board, te_lb_load_board_cstm WHERE te_lb_load_board.id = te_lb_load_board_cstm.id_c AND te_lb_load_board_cstm.load_status_c LIKE '%open%' ORDER BY shipping_date_c DESC, shipping_time_c ASC";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Load Board</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.15/api/fnReloadAjax.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script>
$(document).ready(function(){
$('#employee_data').DataTable();
});
setInterval(function () {
table.fnReloadAjax();
}, 3000);
</script>
</head>
<body>
<br /><br />
<div class="container">
<h3 align="center">Load Board</h3>
<br />
<div class="table-responsive">
<table id="employee_data" class="table table-striped table-bordered">
<thead>
<tr>
<td>Date</td>
<td>Time</td>
<td>Zip</td>
<td>City</td>
<td>Country</td>
<td>Date</td>
<td>Time</td>
<td>Zip</td>
<td>City</td>
<td>Country</td>
<td>Description</td>
</tr>
</thead>
<?php
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td>'.$row['shipping_date_c'].'</td>
<td>'.$row['shipping_time_c'].'</td>
<td>'.$row["billing_address_postalcode"].'</td>
<td>'.$row["billing_address_city"].'</td>
<td>'.$row["billing_address_country"].'</td>
<td>'.$row['arrival_date_c'].'</td>
<td>'.$row['arrival_time_c'].'</td>
<td>'.$row["shipping_address_postalcode"].'</td>
<td>'.$row["shipping_address_city"].'</td>
<td>'.$row["shipping_address_country"].'</td>
<td>'.$row["description"].'</td>
</tr>
';
}
?>
</table>
</div>
</div>
</body>
</html>
I create an index.php file with this code:
<title>Glastopf Observation Center</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('#results').load('table.php'); // table.php is where I have my table
}, 3000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]></script>
<div id="results">Loading data ...</div>
It is working, I got the autrefresh of my data on the table but I have every 3 seconds this css problem:
This is how it looks as usual
This is how it looks after 3 seconds
I put the css links into the index.php file I mentioned before but I still have the same css problems:
<title>Glastopf Observation Center</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.15/api/fnReloadAjax.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('#results').load('table.php');
}, 3000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]></script>
<div id="results">Loading data ...</div>


I got it working...
In your table.php (you have to use PDO instead of MySQLi):
<?php
$pdo = new PDO("mysql:dbname=dbexample;host=dbexample.com;port=3306", "dboexample", "password");
$query = $pdo->prepare("SELECT * FROM te_lb_load_board, te_lb_load_board_cstm WHERE te_lb_load_board.id = te_lb_load_board_cstm.id_c AND te_lb_load_board_cstm.load_status_c LIKE '%open%' ORDER BY shipping_date_c DESC, shipping_time_c ASC");
$query->execute();
echo json_encode($query->fetchAll());
?>
In your index.php:
<!DOCTYPE html>
<html>
<head>
<title>Load Board</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.15/api/fnReloadAjax.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
</head>
<body>
<br /><br />
<div class="container">
<h3 align="center">Load Board</h3>
<br />
<div class="table-responsive">
<table id="employee_data" class="table table-striped table-bordered"></table>
</div>
</div>
<script>
$(document).ready(function() {
var table;
$.post('table.php', {}, function(data) {
if(data) {
console.log(data);
table = $('#employee_data').DataTable({
data: data,
columns: [
{'data': 'shipping_date_c', 'title': 'Date'}
,{'data': 'shipping_time_c', 'title': 'Time'}
,{'data': 'billing_address_postalcode', 'title': 'Zip'}
,{'data': 'billing_address_city', 'title': 'City'}
,{'data': 'billing_address_country', 'title': 'Country'}
,{'data': 'arrival_date_c', 'title': 'Date'}
,{'data': 'arrival_time_c', 'title': 'Time'}
,{'data': 'shipping_address_postalcode', 'title': 'Zip'}
,{'data': 'shipping_address_city', 'title': 'City'}
,{'data': 'shipping_address_country', 'title': 'Country'}
,{'data': 'description', 'title': 'Description'}
]
});
}
}, 'json');
setInterval(function () {
table.clear().draw();
$.post('table.php', {}, function(data) {
table.rows.add(data).draw();
}, 'json');
}, 3000);
});
</script>
</body>
</html>

Related

PHP ajax response working but there is "undefined" text in the beginning of the div

So, i want to populate div with id "listberita" with html code from ajax response.
Here is the php code where contain div with "listberita" id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Jabary - Website Budaya Jabar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/f8535c9b97.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="berita.css">
</head>
<body>
<!-- Navbar -->
<?php include 'php/navbar.php'; ?>
<div class="container my-5">
<div class="kategoricaption mb-5">
<div class="row">
<div class="col">
<h1 class="text-center fw-bold judulkategori">Berita</h1>
<hr class="mx-auto" style="width:10%; background-color: #f49f16;">
</div>
</div>
</div>
<div class="card-group vgr-cards" id="listberita">
</div>
</div>
<!-- footer -->
<?php include 'php/footer.php'; ?>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="js/bootstrap.bundle.min.js "></script>
<script src="berita.js"></script>
</body>
</html>
Here is my ajax js code
$(this).ready(function() {
getNews()
function getNews() {
$.ajax({
type: "GET",
url: "_php/getBerita.php",
dataType: "JSON",
success: function(response) {
var kode;
$.each(response, function(i, obj) {
console.log(kode)
kode += '<div class="card kartu pb-3"><div class="card-img-body"><img class="card-img" src="img/Berita/' + obj.gambar_berita + '" alt="Card imagecap"></div><div class="card-body"><h4 class="card-title">' + obj.nama_berita + '</h4><p class="card-text">' + obj.keterangan_berita.substring(0, 250) + '....</p>Read More</div></div>'
$('#listberita').html(kode);
})
}
});
}
})
Here is my php code where ajax request to (php_/getBerita.php)
<?php
include '../koneksi.php';
$result = $conn->query("SELECT * from tbl_berita");
while($row=$result->fetch_assoc()){
$data[]=$row;
}
echo json_encode($data);
?>
The code above is working, it's return the data i want. But there is a problem.
Here is the problem
How to get rid the "undefined" thing on the beginning of div?

Try changing your var kode; to var kode = "";.
When you define the variable without initializing it, it will be undefined. And then your loop is appending text to an undefined variable. That's probably why.

Jquery and laravel 404 not found

Hey I am new at laravel and I am making an autocomplete search bar. But I am having problem that is when I write any word it gives error in my console panel that is
Failed to load resource: the server responded with a status of 404 (Not Found). jquery-1.10.2.js:8706
the line on which this error is coming in jquery is
xhr.send( ( s.hasContent && s.data ) || null );
Please help me. I have already tried alot but failed to get the required result.
View of my code where I included jquery is
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-4"></div>
<div class="col col-md-4">
<section class="card">
<header class="card-heading">
<input type="text" name="searchname" class="form-control" id="searchname" placeholder="Search" >
</header>
<div class="card-block">
<table>
<tr>
<td>ID</td>
<td><input type="text" name="id" class="form-control"></td>
</tr>
<tr>
<td>Symtomps</td>
<td><input type="text" name="symtomps" class="form-control" ></td>
</tr>
</table>
</div>
</section>
</div>
</div>
</body>
<script type="text/javascript">
$('#searchname').autocomplete({
source: '{!!URL::route('autocomplete')!!}',
//source: '{{ asset('search') }}',
//source: '{{URL::route('autocomplete')}',
minlength:1,
autoFocus:true,
select:function(e,ui){
//$('#id').val($data->symtomps);
}
});
</script>
Controller of my code is
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Disease;
use Input;
class DiseaseController extends Controller
{
public function index()
{
return view('disease.disease');
}
public function autocomplete(Request $request)
{
$term = $request->term;
$data = Disease::where('symtomps','Like','%'.$term.'%')
->take(2)
->get();
$result=array();
foreach($data as $key => $v)
{
$results[]=['id' =>$v->id,'value'=>$v->symtomps];
}
return response()->json($results);
}
}

You have not resource (means not any store file like json) either use ajax or do like this.
source: function (request, response) {
$.get("{!! URL::route('autocomplete') !!}", {
query: request.term
}, function (data) {
response(data);
});
},

If you are using jQuery from CDN, then you have to specify complete link in correct format.
Try changing your lines:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
to
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

How to add Total Cell at the bottom of Jquery Datatable

I need datatable to be implemented in my project. I wanna show total number at the bottom of the table like below:
I already make default data table like this :
This is my code.
<?php
include "db.php";
$obj->tglan=$obj->get_hari();
if (isset($_POST['tanggal2'])) {
$obj->tglan = $_POST['tanggal2'];
}
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="assets/DataTables/media/js/jquery.js"></script>
<script type="text/javascript" src="assets/DataTables/media/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/DataTables/media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="assets/DataTables/media/css/dataTables.bootstrap.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
<link rel="stylesheet" href="assets/datepicker/css/bootstrap-datepicker3.css"/>
</head>
<body>
<center>
<h3>Daftar SPTA<br><?php echo $obj->tanggal("D, j M Y",$obj->tglan);?></h3>
</center>
<left>
<h5>&nbsp&nbsp&nbspLast refreshed : <?php echo $obj->tanggal("D, j M Y",$obj->tglan)." ".date("H:i:s");?></h5>
</left>
<br/>
<form action="viewLaporanUtama2.php" method="POST">
<div class="form-group" >
<label for="tanggal">&nbsp&nbsp&nbspTanggal</label>
<input type="text" name="tanggal1" class="tanggal" id="myText" required/>
<input type="submit" name="enter" value="Cari" class="btn btn-info btn-sm">
</div>
</form>
<div class="container-fluid">
<div class="table-responsive">
<table border = '0' class="table table-striped table-bordered data" id="tabelSpta">
<thead>
<tr>
<th>No</th>
<th>No SPTA</th>
<th>No Register Induk</th>
<th>Nama Petani</th>
<th>Gawang/Pos</th>
<th>Timbang Bruto</th>
<th>Giling</th>
<th>Timbang Tarra</th>
<th>Netto(kw)</th>
<th>Kode Rafraksi</th>
<th>Potongan (kw)</th>
<th>Netto Akhir (kw)</th>
</tr>
</thead>
<tbody>
<div id="bagReload">
<?php
echo $obj->tampilLaporan();
?>
</div>
</tbody>
</table>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
var tabel = $('.data').DataTable();
});
</script>
<!-- <script src="js/jquery-3.2.1.min.js"></script> -->
<script src="assets/js/bootstrap.js"></script>
<script src="assets/datepicker/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.tanggal').datepicker({
format: "yyyy-mm-dd",
autoclose:true
});
});
</script>
</html>
I've already searched but, there's few reference but I couldn't understand that
How I can add Total cell and show at the bottom of datatable?

See this example here http://jsbin.com/putiyep/edit?js,output written by bindrid.
http://jsbin.com/putiyep/edit?js,output
Basically it leverages the footerCallback of the API and use the column index of the table and basic math to return your total.
Excerpt of the code (again not my code):
// Table definition
var dtapi = $('#example').DataTable({
data: dataSet,
pageLength: 3,
"deferRender": false,
"footerCallback": function (tfoot, data, start, end, display) {
var api = this.api();
var p = api.column(4).data().reduce(function (a, b) {
return a + b;
}, 0)
$(api.column(4).footer()).html(p);
$("#total").val(p);
},
"order": [1],
"columns": [
// rest of the columns
{ data: "first_name" },
{ data: "last_name" },
{ data: "firstNumber" },
{
data: "secondNumber", render: function (data) {
return '<input type="text" style="width:50px" value="' + data + '">';
}
},
{ data: "rowTotal" }
]
});

How to edit design in a bootstrap template?

How do I edit the design hidden somewhere in this code? Currently this has a functioning search and I want to put an Add button next to a textbox. But I cannot even find the search in this code I'm showing below. I found this datatable template bootstrap on youtube.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Survey Settings</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href=" //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet">
</head>
<body>
<?php
require_once("/dao/CategoryDAO.php");
require_once("/dao/TopicDAO.php");
$category = new CategoryDAO();
$topic = new TopicDAO();
$allCategories_arr = $category->getAllCategories();
$allTopics_arr = $topic->getAllTopicTitles();
?>
<div class="container">
<div class="row">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<td>Category ID</td>
<td>Category Name</td>
<td >Action</td>
</tr>
</thead>
<tbody>
<?php
foreach($allCategories_arr as $ar) {
echo "<tr>";
echo "<td>" . $ar['category_id'] . "</td>";
echo "<td>" . $ar['categoryname'] . "</td>";
echo "<td><a class='btn btn-default' href='viewsubcategory.php?catid=" . $ar['category_id'] . "' >More Info</a>";
echo "</tr>";
}
?>
</tbody>
</table>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>
</body>
I discovered that this code was triggering the whole design. Therefore, is there anyway I can show the 'hidden' code in this script? I just want to pud an add button and a textbox next to the search.
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>

Ok not sure I totally understand your requirements but going from your original post it says an add button by the search box that allows you to insert rows into the datatable. the solution below adds an inline form in the toolbar. then the onclick event adds the row to the datatable.
function category(id, name, action) {
var self = this;
this.id = id;
this.name = name;
this.action = action;
}
function model() {
var self = this;
this.categories = [];
}
var mymodel = new model();
$(document).ready(function() {
mymodel.categories.push(new category('1', 'Cat1', 'Post'));
mymodel.categories.push(new category('2', 'Cat2', 'Get'));
mymodel.categories.push(new category('3', 'Cat3', 'Put'));
var table = $('#mytable').DataTable({
data: mymodel.categories,
columns: [{
data: 'id'
}, {
data: 'name'
}, {
data: 'action'
}
],
dom: '<"toolbar">frtip'
});
$("div.toolbar").html(
'<form class="form-inline">\
<div class="form-group">\
<input type="text" class="form-control" id="rowid" placeholder="id">\
</div>\
<div class="form-group">\
<input type="text" class="form-control" id="name" placeholder="name">\
</div>\
<div class="form-group">\
<input type="text" class="form-control" id="action" placeholder="action">\
</div>\
<input type="button" class="btn btn-danger" id="add" value="add"></input>\
</form>'
);
$('#add').click(function(event) {
table.row.add({
'id': $('#rowid').val(),
'name': $('#name').val(),
'action': $('#action').val()
}).draw(false);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped table-bordered" cellspacing="0" width="100%" id="mytable">
<thead>
<tr>
<th>Category Id</th>
<th>Category Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

Error in displaying the ajax result using Codeigniter and Mysql

I just need a little help here about displaying my table query result. When i checked the response from my ajax I shows. But when passing to the views it doesn't shows. Here's my code:
Controller/user.php
<?php
class User extends CI_Controller{
public function __construct(){
parent::__construct();
$this->load->model('user_model');
}
public function index(){
$this->load->view( 'index' );
}
public function read() {
echo json_encode( $this->user_model->getAll() );
}
}
?>
Model/user_model.php
<?php
class User_Model extends CI_Model{
public function __construct(){
parent::__construct();
}
public function getAll(){
$qGetAllData = $this->db->get('user');
if($qGetAllData->num_rows() > 0){
return $qGetAllData->result();
}else{
return array();
}
}
}
?>
View/index.php
<html>
<head>
<title><?php echo $title; ?></title>
<base href="<?php echo base_url(); ?>" />
<link type="text/css" rel="stylesheet" href="css/smoothness/jquery-ui-1.8.2.custom.css" />
<link type="text/css" rel="stylesheet" href="css/styles.css" />
</head>
<body>
<table id="records"></table>
<div id="tabs">
<ul>
<li>Read</li>
<li>Create</li>
</ul>
<div id="read">
<table id="records"></table>
</div>
<div id="create"></div>
</div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery-templ.js"></script>
<script type="text/template" id="readTemplate">
<tr>
<td>${id}</td> //doesn't display ID
<td>${name}</td> //doesn't display Name
<td>${email}</td> //doesn't display EMial
</tr>
</script>
<script type="text/javascript" src="js/myjs.js"></script>
</body>
</html>
Javascript/myjs.js
$(document).ready(function(){
$( '#tabs' ).tabs({
fx: { height: 'toggle', opacity: 'toggle' }
});
$.ajax({
url: 'index.php/user/read',
datatype: 'json',
success: function(response){
$('#readTemplate').render(response).appendTo('#records');
}
});
});
That's all guys. I just don't know where's my error.

I think you have issue with just render data.
please review this link for reference.
Please try below code.
Your html : View/index.php
<html>
<head>
<title><?php echo $title; ?></title>
<base href="<?php echo base_url(); ?>" />
<link type="text/css" rel="stylesheet" href="css/smoothness/jquery-ui-1.8.2.custom.css" />
<link type="text/css" rel="stylesheet" href="css/styles.css" />
</head>
<body>
<table id="records"></table>
<div id="tabs">
<ul>
<li>Read</li>
<li>Create</li>
</ul>
<div id="read">
<table id="records"></table>
</div>
<div id="create"></div>
</div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery-templ.js"></script>
<script type="text/javascript" src="js/myjs.js"></script>
</body>
</html>
Your JS : js/myjs.js
var readtpl = "<tr><td>${id}</td><td>${name}</td><td>${email}</td></tr>";
$.template( "readTemplate", readtpl );
$(document).ready(function(){
$( '#tabs' ).tabs({
fx: { height: 'toggle', opacity: 'toggle' }
});
$.ajax({
url: 'index.php/user/read',
datatype: 'json',
success: function(response){
$.tmpl( "readTemplate", response ).appendTo( "#records" );
}
});
});

Categories