I am using codeigniter. When I call an ajax request to the page by giving the full path to file, it works fine:
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>In this example is demonstrated how to implement server filtering, sorting and paging with jqxGrid.</title>
<link rel="stylesheet" href="http://localhost/jqwidgets-ver3.2.1/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'ShipName', type: 'string'},
{ name: 'ShipAddress', type: 'string' },
{ name: 'ShipCity', type: 'string' },
{ name: 'ShipCountry', type: 'string' }
],
cache: false,
url: 'http://localhost/CodeIgniter_2.1.4/index.php/blog/controllerfunction',
filter: function()
{
// update the grid and send a request to the server.
$("#jqxgrid").jqxGrid('updatebounddata', 'filter');
},
sort: function()
{
// update the grid and send a request to the server.
$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
},
root: 'Rows',
beforeprocessing: function(data)
{
if (data != null)
{
source.totalrecords = data[0].TotalRows;
}
}
};
var dataadapter = new $.jqx.dataAdapter(source, {
loadError: function(xhr, status, error)
{
alert(error);
}
}
);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
source: dataadapter,
width: "100%",
filterable: true,
sortable: true,
autoheight: true,
pageable: true,
virtualmode: true,
rendergridrows: function(obj)
{
return obj.data;
},
columns: [
{ text: 'Ship Name', datafield: 'ShipName'},
{ text: 'Address', datafield: 'ShipAddress'},
{ text: 'City', datafield: 'ShipCity'},
{ text: 'Country', datafield: 'ShipCountry'}
]
});
});
</script>
</head>
<body class='default'>
<h1>Shipment Records</h1>
<div style="width: 1000px" id="jqxgrid"></div>
</body>
</html>
works fine with
url: 'http://localhost/CodeIgniter_2.1.4/application/view/serverfiltering_paging_and_sorting_data.php',
but
url: 'http://server/CodeIgniter_2.1.4/index.php/controllername/controlerfunction',
shows an error : SyntaxError: JSON.parse: unexpected character
I did not make any other change in the code.
Related
I'm working with the jquery datatables plugin and codeigniter , while trying to follow (roughly ) http://www.ahmed-samy.com/php-codeigniter-full-featrued-jquery-datatables-part-1/. I am getting the following error:
DataTables warning: table id=big_table - Requested unknown parameter '0' for row 0. For more information about this error, please see http://datatables.net/tn/4
In firebug there are no errors and the following JSON is returned:
{"draw":0,"recordsTotal":3,"recordsFiltered":3,"data":[{"id":"2","message_id":"<047d7bf1665e40753c04fd394d72#google.com>","subject":"Delivery Status Notification (Failure)","date":"2014-07-02 19:34:17"},{"id":"3","message_id":"<ad86a2fb8673b8a6.14044068.406744.354605.en-US.b5df177c74ea#google.com>","subject":"Flying the red, white and blue on YouTube","date":"2014-07-03 19:01:21"},{"id":"4","message_id":"<047d7bf1665e04fd640c89#google.com>","subject":"Delivery Status Notification (Failure)","date":"2014-07-04 22:34:16"
i notice that the draw is 0 even though the number of records (3) is correct. The table itself its empty.
How can I fix this?
My controller:
function index()
{
//set table id in table open tag
$tmpl = array('table_open' => '<table id="big_table" border="1" cellpadding="2" cellspacing="1" class="mytable">');
$this->table->set_template($tmpl);
$this->table->set_heading("id,message_id,subject,date");
$this->load->view('serversidetestview');
}
//function to handle callbacks
function datatable()
{
$this->datatables->select("id,message_id,subject,date")->from('imap');
echo $this->datatables->generate();
}
My view:
<html>
<head>
<base href="<?=base_url();?>">
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
</head>
<body>
<h1>Subscriber management</h1>
<?php echo $this->table->generate(); ?>
</div>
<script type="text/javascript">
$(document).ready(function () {
var oTable = $('#big_table').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'datatable_controller/datatable',
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayStart ": 20,
"fnInitComplete": function () {
oTable.fnAdjustColumnSizing();
},
'fnServerData': function (sSource, aoData, fnCallback) {
$.ajax
({
'dataType': 'json',
'type': 'POST',
'url': sSource,
'data': aoData,
'success': fnCallback
});
}
});
});
</script>
</body>
</html>
Copy the Datatables.php from the libraries of the sample code
(http://www.ahmed-samy.com/demos/sources/tutorial_datatables.zip)
into your libraries directory instead of downloading it directly. I think there might be a bug in the latest download. I had the exact same issue.
I use the code below to get data from a database. No issues here.....
$query = "SELECT * FROM takenlijst";
$from = 0;
$to = 999;
$query .= " LIMIT ".$from.",".$to;
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$taken[] = array(
'taaknummer' => $row['taaknummer'],
'naam' => $row['naam'],
'taak' => $row['taak'],
'prioriteit' => $row['prioriteit'],
'datum' => $row['datum']
);
}
echo json_encode($taken);
However, when i use the code below i get no data. What am i doing wrong?
<html lang="en">
<head>
<link rel="stylesheet" href="../../jquery/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../jquery/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jquery/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../jquery/scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'taaknummer', type: 'string'},
{ name: 'naam', type: 'string'},
{ name: 'taak', type: 'string'},
{ name: 'prioriteit', type: 'string'},
{ name: 'datum', type: 'string'}
],
url: 'http://www.site.com/management/takenlijstdata.php',
cache: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
source: dataAdapter,
columns: [
{ text: 'Taaknummer', datafield: 'taaknummer', width: 250},
{ text: 'Naam', datafield: 'naam', width: 150 },
{ text: 'Taak', datafield: 'taak', width: 180 },
{ text: 'Prioriteit', datafield: 'prioriteit', width: 200 },
{ text: 'Datum', datafield: 'datum', width: 120 }
]
});
});
</script>
</head>
<body class='default'>
<div id="jqxgrid"></div>
</body>
</html>
The echo displays the data correctly. Even when i output the data to a txt file it can be read but not when i try to read it from this code.
I have been looking around for an answer to this but have not been able to find one. I am currently taking data from a mssql database and everything seems to populate fine on the php end but here is the code anyway
$responce->total = $total_pages;
$responce->page = $page;
$responce->records = $count;
$i=0;
while($row = sqlsrv_fetch_array($result,SQLSRV_FETCH_ASSOC)) {
$responce->rows[$i]['id']=$row[Cell1];
$responce->rows[$i]['cell']=array($row[Cell1],$row[Cell2],$row[Cell3]);
$i++;
}
echo $json_encode($responce);
And my json file comes out like this:
{"total":"1","page":"1","records":"1","rows":[{"id":"1","cell":["1","2","3"]}]}
And finally my HTML looks like this:
<link rel="stylesheet" type="text/css" media="screen" href="css/south-street/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link href="css/ui.multiselect.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/ui.multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
$("#list").jqGrid({
url: "retrieve.php",
datatype: "json",
mtype: "POST",
colNames: ["Cell1", "Cell2", "Cell3"],
colModel: [
{ name: "Cell1", width:55 , index:'Cell1' },
{ name: "Cell2", width: 90, index:'Cell2' },
{ name: "Cell3", width: 80, index:'Cell3' },
],
jsonReader: { repeatitems: false },
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
scroll:1,
sortname: Cell1",
sortorder: "asc",
sortable:true,
viewrecords: true,
gridview: true,
ignoreCase:true,
autowidth:true,
ondblClickRow: function (id) {
$(this).jqGrid('viewGridRow', id, { caption: "Server Information" });
}
});
});
</script>
If someone could please help me to figure out why my grid wont properly populate I would really appreciate it!
The main errors in your code are the following:
you should fix syntax error sortname: Cell1" to sortname: "Cell1".
remove jsonReader: { repeatitems: false } which is wrong with thze format which you use.
remove the second version of jQuery. Either jquery.js or jquery-1.9.0.min.js should be used.
May be your JS file are conflicted.
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
You should be use only one JS instead use of both jquery file.
and Change sequence of js file like this way..
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/ui.multiselect.js" type="text/javascript"></script>
Please remove "," from colModel
colModel: [
{ name: "Cell1", width:55 , index:'Cell1' },
{ name: "Cell2", width: 90, index:'Cell2' },
{ name: "Cell3", width: 80, index:'Cell3' },
],
to
colModel: [
{ name: "Cell1", width:55 , index:'Cell1' },
{ name: "Cell2", width: 90, index:'Cell2' },
{ name: "Cell3", width: 80, index:'Cell3' }
],
I think it solve your all problem.
I am actually trying to do exactly what has been done in this example "http://jsfiddle.net/BrLp7/" but unfortunately not able to perform this task when retrieving data from csv file. Below is my code which doesn't output anything and when we click on a point in a given example the resulting graph has to be stored in some text file in this form 5,10,13 if last point was clicked.
<html>
<head>
<title>A BASIC HTML FORM</title>
</head>
<body>
<FORM NAME ="form1" METHOD ="POST" ACTION = "BasicForm.php">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<!--[if IE]>
<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
<![endif]-->
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
title: {
text: 'Input'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Units'
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
$.get('testFile.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var x=this.series.processedXData.indexOf(this.x);
var items = line.split(',');
seriesData =[];
$.each(items, function(itemNo, item) {
if (itemNo < x) {
seriesData.push(parseFloat(item));
} else if (itemNo == x){
seriesData.push(0);
}
});
}
this.series.setData(seriesData);
}
}
}
},
series: []
};
$.get('testFile.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var series = {
data: []
};
$.each(items, function(itemNo, item) {
series.data.push(parseFloat(item)); });
options.series.push(series);
});
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!-- 3. Add the container -->
<div id="container" style="width: 1400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
</FORM>
</body>
</html>
I have a sample code:
<script src="js/jquery-1.4.2.min_2.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
$("img").lazyload({ placeholder: "images/grey.gif", effect: "fadeIn" });
});
</script>
click here
<div id="result"></div>
$(document).ready(function() {
$(".click").click(function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url:'',
data: '',
async: true,
success: function(response) {
$('#result').html('<img src="test.png" />');
}
});
});
}
But when result request ajax is result is
<img src="images/grey.gif" data-original="test.png" />
How to fix it with result is
<img src="test.png" data-original="test.png" />
You seem to assign the Lazyload before the image element is actually in your HTMl.. You need to assign it in the success callback of ajax function..
<script src="js/jquery-1.4.2.min_2.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.min.js" type="text/javascript"></script>
click here
<div id="result"></div>
<script type="text/javascript">
$(document).ready(function() {
$(".click").click(function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url:'yoururl',
data: '{}',
async: true,
success: function(response) {
// If response contains the image src
// then replace the src of the image with the response
$('#result').html('<img src="test.png" data-original="test.png" />');
$("#result img").attr('src', 'images/grey.gif')
.lazyload({ placeholder: "images/grey.gif", effect: "fadeIn" });
}
});
});
});