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>
Related
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).
Controller of my code is given below
<?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);
}
}
View of my code 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')!!}',
minlength:1,
autoFocus:true,
select:function(e,ui){
$('#id').val(ui.item.id);
}
});
</script>
And route is
Route::get('/',array('as'=>'disease','uses'=>'DiseaseController#index'));
Route::get('/autocomplete',array('as'=>'autocomplete',
'uses'=>'DiseaseController#autocomplete'));
Please help me where i am doing wrong as its not showing me any data when i type any word it just show the error in the console.
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>   Last 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">   Tanggal</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" }
]
});
I use Blueimp Jquery-File-Upload (https://github.com/blueimp/jQuery-File-Upload) for uploading pictures to the server.
Setting up the demo.
When I setup this plugin in the root as described in the documentation, all works fine. I even modified some of the code so I can run it on localhost/jsVR/vendor/
So far, so good.
Integration in a existing form
I modified an existing form and added "basic-plus.html" to the code which results in this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BOMmeldingen - Veiligheidsregister</title>
<link rel="icon"
type="image/png"
href="img/favicon.ico">
<link id="style" rel="stylesheet" type="text/css" href="/jsVR/css/style.css">
<link id="easyui-style" rel="stylesheet" type="text/css" href="/jsVR/js/jquery-easyui/themes/default/easyui.css">
<link id="easyui-icons-style" rel="stylesheet" type="text/css" href="/jsVR/js/jquery-easyui/themes/icon.css">
<!-- scripts to use in the form -->
<script type="text/javascript" src="/jsVR/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="/jsVR/js/jquery-easyui/easyloader.js"></script>
<script type="text/javascript" src="/jsVR/js/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div id="header-container"></div>
<div id="index-container" class="easyui-panel" data-options="{border: true}" style="">
<link rel="stylesheet" href="js/jquery-file-upload/css/blueimp-gallery.min.css">
<link rel="stylesheet" href="js/jquery-file-upload/css/bootstrap.min.css">
<!--<link rel="stylesheet" href="css/style.css">-->
<link id="js/jquery-file-upload-Style" rel="stylesheet" type="text/css" href="js/jquery-file-upload/css/jquery.fileupload.css">
<!--<link id="js/jquery-file-upload-Demo-style" rel="stylesheet" type="text/css" href="js/jquery-file-upload/css/jquery.fileupload-ui.css">-->
<style>
.lbl{
width: 30px;
}
</style>
<!-- include jQuery -->
<!--<script src="js/jquery-1.11.3.js"></script>-->
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/jquery-file-upload/js/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="js/jquery-file-upload/js/load-image.all.min.js"></script>
<!-- The Canvas to blob plugin is included for image resizing functionality -->
<script src="js/jquery-file-upload/js/canvas-to-blob.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery-file-upload/js/jquery.iframe-transport.js"></script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
<!--[if (gte IE 8)&(lt IE 10)]>
<script src="js/core/jquery.xdr-transport.js"></script>
<![endif]-->
<script src="js/jquery-file-upload/js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="js/jquery-file-upload/js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="js/jquery-file-upload/js/load-image.all.min.js"></script>
<script src="js/jquery-file-upload/js/jquery.fileupload-image.js"></script>
<script src="js/jquery-file-upload/js/jquery.fileupload-video.js"></script> <!-- optional for video uploads -->
<script src="js/jquery-file-upload/js/jquery.fileupload-audio.js"></script> <!-- optional for audio uploads -->
<script src="js/jquery-file-upload/js/jquery.fileupload-validate.js"></script>
<script src="js/jquery-file-upload/js/bootstrap.min.js"></script>
<!--<div id="dlg" class="easyui-dialog" style="width:900px;height:400px;padding:10px 20px"
closed="false" buttons="#dlg-buttons">-->
<div class="ftitle">Details BOM-meldingen</div>
<div class="container" style="background-color: wheat; padding: 30px;">
<form id="frm" method="post" novalidate>
<div class="fitem">
<label class="lbl">Datum:</label>
<input type="text" name="datum" class="easyui-datebox" required="true">
</div>
<div class="fitem">
<label>Melding:</label>
<input type="textarea" name="melding" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Naam:</label>
<input name="naam">
</div>
<div class="fitem">
<label>Plaats:</label>
<input name="plaats">
</div>
<div class="fitem">
<label>Oplossing:</label>
<input name="voorgestelde_oplossing">
</div>
<div class="fitem">
<label>Eigen actie:</label>
<input name="eigen_actie">
</div>
<div class="fitem">
<label>Gemeld aan:</label>
<input name="gemeld_aan">
</div>
</form>
<!--</div> end div dialog-box-->
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
<br>
<div id="dlg-buttons">
Save
Cancel
</div>
</div>
<script>
/*jslint unparam: true */
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'server/php/',
uploadButton = $('<button/>')
.addClass('btn btn-primary')
.prop('disabled', true)
.text('Processing...')
.on('click', function () {
var $this = $(this),
data = $this.data();
$this
.off('click')
.text('Abort')
.on('click', function () {
$this.remove();
data.abort();
});
data.submit().always(function () {
$this.remove();
});
});
$('#fileupload').fileupload({
url: url,
dataType: 'json',
autoUpload: false,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 999000,
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
previewMaxWidth: 100,
previewMaxHeight: 100,
previewCrop: true
}).on('fileuploadadd', function (e, data) {
data.context = $('<div/>').appendTo('#files');
$.each(data.files, function (index, file) {
var node = $('<p/>')
.append($('<span/>').text(file.name));
if (!index) {
node
.append('<br>')
.append(uploadButton.clone(true).data(data));
}
node.appendTo(data.context);
});
}).on('fileuploadprocessalways', function (e, data) {
var index = data.index,
file = data.files[index],
node = $(data.context.children()[index]);
if (file.preview) {
node
.prepend('<br>')
.prepend(file.preview);
}
if (file.error) {
node
.append('<br>')
.append($('<span class="text-danger"/>').text(file.error));
}
if (index + 1 === data.files.length) {
data.context.find('button')
.text('Upload')
.prop('disabled', !!data.files.error);
}
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}).on('fileuploaddone', function (e, data) {
$.each(data.result.files, function (index, file) {
if (file.url) {
var link = $('<a>')
.attr('target', '_blank')
.prop('href', file.url);
$(data.context.children()[index])
.wrap(link);
} else if (file.error) {
var error = $('<span class="text-danger"/>').text(file.error);
$(data.context.children()[index])
.append('<br>')
.append(error);
}
});
}).on('fileuploadfail', function (e, data) {
$.each(data.files, function (index) {
var error = $('<span class="text-danger"/>').text('File upload failed.');
alert(data.files[index].error);
$(data.context.children()[index])
.append('<br>')
.append(error);
});
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script></div>
<div id="footer-container"></div>
</body>
</html>
I cannot find anyreason why the file is not loaded to the server.
I added alert(data.files[index].error); to catch the error: 'undefined'.
I guess for some reason the script doesn't read server/php/index.php because I added a vardump in this file, but no response.
It may be very obvious where I go wrong, but any help is appreciated.
SOLVED:
It was obvious indeed.
I changed the url-var in
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'server/php/',...
with the full path:
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'js/jquery-file-upload/server/php/index.php', ...
and all goes well. :)
I have a master page that uses ajax to load contents in a div named 'Wrapper'.
Now I have a problem loading jquery UI tabs this way. I can load and show them if I ignore using AJAX. But when Using ajax just the tabs are being shown and not the panes! I have read all the topics regarding this issue but they didn't solve my problem.
JQuery code is :
$(function(){
$('#link').live('click',function(){
$.ajax({
url: "tabs.php",
success: function(response)
{
$("#Wrapper").html(response);
console.log(response);
}
});
});
});
The tabs.php :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fa-ir" lang="fa-ir">
<head>
<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="Scripts/menu.js"></script>
<script type="text/javascript" src="Scripts/jquery.cycle.all.js"></script>
<script type="text/javascript" src="Scripts/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.css" />
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.js"></script>
<style>
div.panes div h2
{
margin:5px 0 15px 0;
}
</style>
<link rel="stylesheet" type="text/css" href="css/tabs.css"/>
<link rel="stylesheet" type="text/css" href="css/tabs-panes.css"/>
<style type="text/css">
div.panes div
{
-background:#fff;
height:auto;
}
div.panes label
{
margin-bottom:15px;
display:block;
}
label.error
{
color:red;
}
body
{
background-color:#d4d6da;
}
</style>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/syntax.css"/>
<link rel="stylesheet" type="text/css" href="css/demos.css"/>
</head>
<body>
<table style="width:100%;height:auto;border:1px dashed blue;" >
<tr>
<td align="center">
<div id="wizard_tabs">
<!-- tabs -->
<ul class="tabs">
<li>1- File upload</li>
<li>2- Proj explanation</li>
</ul>
<!-- form and panes -->
<form action="projects-regEN.php" method="post" enctype="multipart/form-data">
<div class="panes" style="font-family:tahoma">
<div style="border:1px solid #1c94c4;" id="tabs-1">
<table id="projINFO" style="width:100%">
<tr>
<td>
<span class="innerStyle">Title</span>
</td>
<td>
<input type="text" style="width:150px" maxlength="50" id="projectTitle" name="projectTitle"/>
</td>
</tr>
<tr>
<td style="width:31%" >
<span class="innerStyle">Proj Upload</span>
</td>
<td style="width:30%">
<input type="file" id="projectUpload" name="projectUpload"/>
</td>
</tr>
</table>
<br/>
<input type="button" class="next" id="next" name="continue"/>
</div>
<div style="border:1px solid #1c94c4;" id="tabs-2">
<table style="width:100%;border:1px solid black;font-family:tahoma;font-size:11px">
<tr>
<th>
title
</th>
</tr>
<tr>
<td id="firstCol"></td>
</tr>
</table>
<br/>
<span class="innerStyle">explanation</span>
<textarea rows="4" maxlength="150" class="formItems" id="ProjInfo" name="ProjInfo" placeholder="پیام خود را اینجا وارد کنید"></textarea>
<input type="submit" id="submitproj" name="done"/>
</div>
</div>
</form>
</div>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
$(function(){
var wizard = $("#wizard_tabs");
$("ul.tabs", wizard).tabs("div.panes > div", function(event, index)
{
projUp=$("#projectUpload").val();
projTi=$("#projectTitle").val();
if (index > 0 && (projUp==''|| projTi=='' ))
{
$("#projectUpload").parent().addClass("error");
return false;
}
$("#projectUpload").parent().removeClass("error");
});
// get handle to the tabs API
var api = $("ul.tabs", wizard).data("tabs");
$(".next", wizard).click(function()
{
projUp=$("#projectUpload").val();
projTi=$("#projectTitle").val();
if(projUp!='' && projTi!='')
api.next();
});
});
</script>
</td>
</tr>
</table>
</body>
</html>
Using the papers I have read I tried initializing :
$("ul.tabs").tabs("div.panes <> div");
I put it in the success function of ajax but it didn't help. I also put it in the tabs.php but neither it helped. I don't know what else to do?!
Based on where I put the initial statement, it gives me different errors like:
"Uncaught Error:cannot call methods on tabs prior to initialization; attempted to call method 'div.panes > div'"
or
"Uncaught TypeError: Object [object Object] has no method 'tabs' "
Thanks
It looks like there is a small error (though maybe a typo for the question) in your code: <> should simply be >. Also, are you including every js file you need for tabs to work? The second error indicates that a required JS file/class may be missing.
For example, you may have included the jquery base, but did you include tools?
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
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" );
}
});
});