Related
i am new to jqgrid , I need to Allow only values between 0 -999 only in Jqgrid Edit Form,
I need to display Custom message "Please enter number between 0 and 999".
$(document).ready(function () {
$("#TableDataGrid").jqGrid({
url: '/DataHandler.ashx?MethodName=RulesGetAllData1',
datatype: "json",
colNames: ['ID', 'Rule','value'],
prmNames: { id: "ID" },
colModel: [
{ name: 'ID', hidden: true, key: true, index: 'ID', editoptions: { disabled: true }, width: 20, "sortable": true, sorttype: 'integer', searchoptions: { sopt: ['eq'] }, searchrules: { required: true } },
{
name: 'RuleName', index: 'RuleName', width: 40, editable: true, sorttype: 'text',
searchoptions: {
sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'],
maxlength: 30, size: 30,
style: "width:auto;padding:0;max-width:100%;float:left"
},
searchrules: { required: true },
editrules: { required: true},
editoptions: { maxlength: 30, size: 30, disabled: true }
},
{
name: 'Value', index: 'Value', width: 40, editable: true, sorttype: 'integer',
searchoptions: {
sopt: ['eq', 'ge', 'le'],
maxlength: 5, size: 5,
style: "width:auto;padding:0;max-width:100%;float:left"
},
editoptions: { maxlength: 3, size: 5 },
,
searchrules: { required: true }
}
],
try to Put this code on editrules on which field you need to put validation
editrules: {
required: true, custom: true, custom_func: function (value, colname) {
if (value.indexOf('+') > -1 || value.indexOf('-') > -1
|| value.indexOf('.') > -1 || value.indexOf(' ') > -1)
return [false, "Please enter number between 0 and 999"];
if (isNaN(value))
return [false, "Please enter number between 0 and 999"];
else
return [true, ""];
}
}
I have a kendo grid described below. Looks fine, and all the other columns work well except I can't use the client filter on the "Round" column. The multi-select filter looks ok but when I select some values and press the "filter" button it throws a javascript error - just for this column! It even sorts properly.
Uncaught TypeError: (GameType.RoundNo || "").toLowerCase is not a function
It seems to be caused by the structure of the GameType object in the schema. I can't set the datatype to type:"number" because I need to set the default value for the editing function of this grid (which I've omitted from the sample below). I've no idea how to set the default value AND the data type at the same time, and I'm not even sure that will solve my problem.
<div id="tblGames"></div>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
<script>
$(document).ready(function () {
$("#tblGames").kendoGrid({
sortable: true,
groupable: true,
filterable: true,
columns: [
{ field: "Season", title: "Season", type: "number", filterable: { multi: true }, width: 100 },
{ field: "GameType.RoundNo", title: "Round", type: "number", filterable: { multi: true }, width: 90 },
{ field: "GameDate", title: "Date", type: "date", format: "{0:dd/MMM hh:mmtt}", width: 130 },
{ field: "Grade.GradeName", title: "Grade", filterable: { multi: true } },
{ field: "HomeTeam.TeamName", title: "Home", filterable: { multi: true } },
{ field: "AwayTeam.TeamName", title: "Away", filterable: { multi: true } },
{ title: "Score", template: "#= ScoreFor + ' - ' + ScoreAgainst #", width: 70, filterable: false },
{ field: "IsPlayed", title: "Played?", filterable: { multi: true }, width: 95 }
],
dataSource: {
schema: {
model: {
id: "GameID",
fields: {
GameID: { editable: false, defaultValue: 0 },
GameType: { defaultValue: { GameTypeID: 1, RoundNo: 0 }, validation: { required: true } },
GameDate: { type: "date", required: true },
Season: { type: "number" },
Grade: { defaultValue: { GradeID: 1 }, validation: { required: true } },
Ground: { defaultValue: { GroundID: 1 }, validation: { required: true } },
HomeTeam: { defaultValue: { TeamID: 1 }, validation: { required: true } },
AwayTeam: { defaultValue: { TeamID: 1 }, validation: { required: true } },
ScoreFor: { type: "number", validation: { min: 0, required: true } },
ScoreAgainst: { type: "number", validation: { min: 0, required: true } },
IsPlayed: { type: "boolean", defaultValue: true }
}
}
},
data: [{"GameID":1,"Grade":{"GradeID":1,"GradeName":"A Grade"},"GameType":{"GameTypeID":1,"Description":"Regular Season","RoundNo":1,"Round":"Round 1"},"Season":2015,"GameDate":"\/Date(1432702800000)\/","Ground":{"GroundID":1,"GroundName":"Main Oval, Mainland"},"HomeTeam":{"TeamID":1,"TeamName":"A Team"},"AwayTeam":{"TeamID":2,"TeamName":"Losers R Us"},"ScoreFor":10,"ScoreAgainst":0,"IsPlayed":true,"ErrorMessage":null},
{"GameID":2,"Grade":{"GradeID":2,"GradeName":"B Grade"},"GameType":{"GameTypeID":1,"Description":"Regular Season","RoundNo":2,"Round":"Round 2"},"Season":2015,"GameDate":"\/Date(1432659159000)\/","Ground":{"GroundID":2,"GroundName":"Happy Park, Happyland"},"HomeTeam":{"TeamID":3,"TeamName":"B Team"},"AwayTeam":{"TeamID":2,"TeamName":"Losers R Us"},"ScoreFor":55,"ScoreAgainst":0,"IsPlayed":true,"ErrorMessage":null}]}
});
});
</script>
I've also unsuccessfully tried:
GameType: [{ RoundNo: { type: "number", defaultvalue: 0, validation: { required: true } } }, { GameTypeID: { defaultValue: 1, validation: { required: true } } }],
Filtering is working fine if you set your RoundNo values to string in your Dataset.
$(document).ready(function () {
$("#tblGames").kendoGrid({
sortable: true,
groupable: true,
filterable: true,
columns: [
{ field: "Season", title: "Season", type: "number", filterable: { multi: true }, width: 100 },
{ field: "GameType.RoundNo", title: "Round", type: "number", filterable: { multi: true }, width: 90 },
{ field: "GameDate", title: "Date", type: "date", format: "{0:dd/MMM hh:mmtt}", width: 130 },
{ field: "Grade.GradeName", title: "Grade", filterable: { multi: true } },
{ field: "HomeTeam.TeamName", title: "Home", filterable: { multi: true } },
{ field: "AwayTeam.TeamName", title: "Away", filterable: { multi: true } },
{ title: "Score", template: "#= ScoreFor + ' - ' + ScoreAgainst #", width: 70, filterable: false },
{ field: "IsPlayed", title: "Played?", filterable: { multi: true }, width: 95 }
],
dataSource: {
schema: {
model: {
id: "GameID",
fields: {
GameID: { editable: false, defaultValue: 0 },
GameType: { defaultValue: { GameTypeID: 1, RoundNo: 0 }, validation: { required: true } },
//GameType: [{ RoundNo: { type: "number", defaultvalue: 0, validation: { required: true } } }, { GameTypeID: { defaultValue: 1, validation: { required: true } } }],
GameDate: { type: "date", required: true },
Season: { type: "number" },
Grade: { defaultValue: { GradeID: 1 }, validation: { required: true } },
Ground: { defaultValue: { GroundID: 1 }, validation: { required: true } },
HomeTeam: { defaultValue: { TeamID: 1 }, validation: { required: true } },
AwayTeam: { defaultValue: { TeamID: 1 }, validation: { required: true } },
ScoreFor: { type: "number", validation: { min: 0, required: true } },
ScoreAgainst: { type: "number", validation: { min: 0, required: true } },
IsPlayed: { type: "boolean", defaultValue: true }
}
}
},
data: [{"GameID":1,"Grade":{"GradeID":1,"GradeName":"A Grade"},"GameType":{"GameTypeID":1,"Description":"Regular Season","RoundNo":"1","Round":"Round 1"},"Season":2015,"GameDate":"\/Date(1432702800000)\/","Ground":{"GroundID":1,"GroundName":"Main Oval, Mainland"},"HomeTeam":{"TeamID":1,"TeamName":"A Team"},"AwayTeam":{"TeamID":2,"TeamName":"Losers R Us"},"ScoreFor":10,"ScoreAgainst":0,"IsPlayed":true,"ErrorMessage":null},
{"GameID":2,"Grade":{"GradeID":2,"GradeName":"B Grade"},"GameType":{"GameTypeID":1,"Description":"Regular Season","RoundNo":"2","Round":"Round 2"},"Season":2015,"GameDate":"\/Date(1432659159000)\/","Ground":{"GroundID":2,"GroundName":"Happy Park, Happyland"},"HomeTeam":{"TeamID":3,"TeamName":"B Team"},"AwayTeam":{"TeamID":2,"TeamName":"Losers R Us"},"ScoreFor":55,"ScoreAgainst":0,"IsPlayed":true,"ErrorMessage":null}]}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/index">
<style>
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="tblGames"></div>
</div>
</body>
</html>
i need to send a list of values selected from checkboxes in each of the columns in the jqgrid, my problem is to send this info to the controller,
this is some of the code that i need to send from this partialview to the controller
this is my jqgrid:
jQuery("#TratamientoGrid").jqGrid({
url:"Tratamiento/SearchGridTreat",
datatype:"json",
colNames: ['ID', 'Nombre', 'Apellido', 'Nº Doc', 'Estado', 'Fecha Inicio'],
jsonReader: { repeatitems: false },
colModel: [
{ name: 'TratamientoId',index: 'Id', key: true, width: 40 },
{ name: 'Paciente.Nombre',index: 'pacienteNombre', width: 125 },
{ name: 'Paciente.Apellido', index: 'pacienteApellido', width: 125 },
{ name: 'Paciente.NumeroDocumento', index:'numeroDocumento', width: 75 },
{ name: 'TratamientoEstado.Nombre', index: 'estado', width: 125 },
{ name: 'FechaInicioTratamiento', formatter: 'date', index: 'fechaInicio', width: 100 },
],
rowNum: 5,
rowList: [5, 10, 20, 30],
loadonce: true,
pager: '#TratamientoPag',
sortname: 'ID',
caption: 'Imprimir código QR de Tratamiento',
multiselect: true,
viewrecords: true,
sortorder: "desc",
height: 'auto',
autowidth: true,
onSelectRow: function(id) {
var index = listOfIds.indexOf(id);
if (index == -1)
{
listOfIds.push(id);
}
else
{
listOfIds.splice(index, 1);
}
document.getElementById('lblCantSelected').innerHTML = listOfIds;//to show ids
}
});
jQuery("#TratamientoGrid").jqGrid('navGrid', '#TratamientoPag', { edit: false, add: false, del: false, search: false });
this is a button where i need to send the ids to the controller
function getTreatmentsSelected(id) {
var tlist;
tlist = jQuery("#TreatmentGrid").jqGrid('getGridParam','selarrrow') ;
$.ajax({
url:'#Url.Action("TreatmentDoSomething", "Treatment")',
type:'post',
data:{List: tlist},
success:function(data){
alert("Done");
}
});
}
and this is where i need to get the list of id`s
public ActionResult TreatmentDoSomething()!
{
return PartialView("_TreatmentDoSomething");
}
I have this graph. I have a grid and I want to insert in each row this graph.
The problem is that as you can see there is a small line in the left, it seems that this line is the graph axis. I need to remove it not only because of the visual aspect but because the axis increases the grid cell height.
Thanks in advance!
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 100px; margin: 0 auto"></div>
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
backgroundColor: null,
renderTo: 'container',
type: 'bar',
},
title: {
text: ''
},
xAxis: {
gridLineWidth: 0,
enabled: false,
categories: [''],
labels: {
enabled: false
}
},
yAxis: {
enabled: false,
gridLineWidth: 0,
lineWidth: 0,
min: 0,
title: {
text: ''
},
labels: {
enabled: false
}
},
legend: {
enabled: false,
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +'';
}
},
credits:
{
enabled: false,
position:
{
align: 'left',
x: 10
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [ {
name: 'Clicks',
data: [2]
}, {
name: 'Distributed Points',
data: [3]
}],
exporting:
{
enabled: false
}
});
});
Is this what you are after?
I set the xAxis lineWidth: 0 and then after the plot is drawn:
$('.highcharts-axis').css('display','none');
EDIT:
If you also set tickWidth: 0, you can remove all traces of the axis lines without using the CSS call.
Revved fiddle here.
I have a problem with jqGrid . jqGrid version 4.2.0 - jQuery Grid
grid show loaded data not in tree mode, only grid mode. Why ?
Please help me ! Можно по русски .
Add in header
<link href="../jqGrid/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="jqGrid/js/i18n/grid.locale-ru.js" type="text/javascript"></script>
<script src="jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
and my function to get data from web service .
function getDataSC(pData) {
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: '<%= ResolveClientUrl("~/FetchData.asmx/bindSCJson") %>',
dataType: "json",
success: function(data, textStatus) {
if (textStatus == "success")
ReceivedClientDataSC(JSON.parse(getMain(data)).rows);
},
error: function(data, textStatus) {
alert('An error has occured retrieving data!');
}
});
}
function ReceivedClientDataSC(data) {
var thegrid = $("#gridSC");
thegrid.clearGridData();
for (var i = 0; i < data.length; i++)
thegrid.addRowData(i + 1, data[i]);
}
function getMain(dObj) {
if (dObj.hasOwnProperty('d'))
return dObj.d;
else
return dObj;
}
var lastSel;
$("#gridSC").jqGrid({
datatype: function(pdata) { getDataSC(pdata); },
treeGrid: true,
treeGridModel : 'adjacency',
ExpandColumn: 'Name',
ExpandColClick: true ,
mtype: 'POST',
treeIcons: {plus:'ui-icon-circle-plus',minus:'ui-icon-circle-minus',leaf:'ui-
icon-person'},
height: "100%",
width: 900,
colNames: ['Id', 'Name', 'CountryName', 'Town', 'Adress', 'Phone', 'Email',
'Url'],
colModel: [
{ name: 'Id', index:'id', width:10, hidden:true,key:true},
{ name: 'Name', index: 'Name', width: 80},
{ name: 'CountryName',index:'CountryName', width:80},
{ name: 'Town', index: 'Town', width: 20 },
{ name: 'Adress', index: 'Adress', width: 90 },
{ name: 'Phone', index: 'Phone', width: 20},
{ name: 'Email', index: 'Email', width: 20 },
{ name: 'Url', index: 'Url', width: 30}
],
pager: $('#pjmapSC')
//rowNum:20,
//viewrecords: true,
//gridview: true,
//rowList:[10,20,30,100],
//sortname: 'Id',
//sortorder: 'asc'
})
}
json from server service (loaded to grid) :
{"d":"{\"total\":1,\"page\":1,\"records\":2,\"rows\":[{\"err\":null,\"Id\":1,\"Parent
\":0,\"Name\":\"Сервисные центры\",\"CountryCode\":103,\"Town\":\"Киев\",\"Adress
\":\"Красных партизан 1\",\"Phone\":\"123-321\",\"Email\":\"mail#mail.ru
\",\"CountryName\":\"United Arab Emirates\",\"Url\":\"www.service1\",\"isLeaf\":false,
\"Expanded\":true,\"Level\":1},{\"err\":null,\"Id\":2,\"Parent\":1,\"Name
\":\"Сервисный центр 1_1\",\"CountryCode\":103,\"Town\":\"Киев\",\"Adress\":\"Артема
\",\"Phone\":\"123-321\",\"Email\":\"fert#ukr.net\",\"CountryName\":\"United Arab
Emirates\",\"Url\":\"www.service2\",\"isLeaf\":true,\"Expanded\":true,\"Level\":2}],
\"userData\":null}"}
Help Please ! Thanks.
EDIT:
Thanks Oleg , but i try change my server string to
{"d":{"__type":"_admin.JqGridData","total":3,"page":1,"records":26,"rows": [{"id":1,"cell":["1","Сервисные центры","United Arab Emirates","Киев","Красных партизан 1","123-321","mail#mail.ru","www.service1","0",null,"False","False"]},{"id":2,"cell":["2","Сервисный центр 1_1","United Arab Emirates","Киев","Артема","123-321","fert#ukr.net","www.service2","1","1","True","False"]},{"id":4,"cell":["4","Сервисный центр 1_2","United Arab Emirates","Донецк","Артема","123-321","fert#ukr.net","www.service2","1","1","True","False"]},{"id":5,"cell":["5","Сервисный центр 1_3","United Arab Emirates","Одесса","Артема","123-321","fert#ukr.net","www.service3","1","1","True","False"]},
and
$("#gridSC").jqGrid({
url: '<%= ResolveClientUrl("~/FetchData.asmx/bindSC") %>',
datatype: 'json',
mtype: 'POST',
treeGridModel: 'adjacency',
ExpandColumn: 'Name',
ExpandColClick: true,
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
if (postData.searchField === undefined) postData.searchField = null;
if (postData.searchString === undefined) postData.searchString = null;
if (postData.searchOper === undefined) postData.searchOper = null;
//if (postData.filters === undefined) postData.filters = null;
return JSON.stringify(postData);
},
jsonReader: {
root: function (obj) { return obj.d.rows; },
page: function (obj) { return obj.d.page; },
total: function (obj) { return obj.d.total; },
records: function (obj) { return obj.d.records; }
},
colNames: ['Id', 'Name', 'CountryName', 'Town', 'Adress', 'Phone', 'Email', 'Url'],
colModel: [
{ name: 'Id', index: 'id', width: 10, hidden: true, key: true },
{ name: 'Name', index: 'Name', width: 80 },
{ name: 'CountryName', index: 'CountryName', width: 80 },
{ name: 'Town', index: 'Town', width: 20 },
{ name: 'Adress', index: 'Adress', width: 90 },
{ name: 'Phone', index: 'Phone', width: 20 },
{ name: 'Email', index: 'Email', width: 20 },
{ name: 'Url', index: 'Url', width: 30 }
],
rowNum: 10,
rowList: [10, 20, 300],
sortname: 'Name',
sortorder: "asc",
pager: "#pjmapSC",
viewrecords: true,
gridview: true,
rownumbers: true,
height: "100%",
caption: ''
})
and test
treeReader : {
level_field: "level",
parent_id_field: "parent",
leaf_field: "isLeaf",
expanded_field: "expanded"
},
nothing change in grid (not tree grid) . In server side my method
int startIndex = (page - 1) * rows;
int endIndex = (startIndex + rows < recordsCount) ?
startIndex + rows : recordsCount;
List<TableRow> gridRows = new List<TableRow>(rows);
for (int i = startIndex; i < endIndex; i++)
{
gridRows.Add(new TableRow()
{
id = lsc[i].Id,
cell = new List<string>(11) {
lsc[i].Id.ToString(),
lsc[i].Name,
lsc[i].CountryName,
lsc[i].Town,
lsc[i].Adress,
lsc[i].Phone,
lsc[i].Email,
lsc[i].Url,
lsc[i].level.ToString(),
lsc[i].parent,
lsc[i].isLeaf.ToString(),
lsc[i].expanded.ToString()
if i change to this
//string.Format("Name:{0}", lsc[i].Name)
my grid load incorrectly data
Help please.
Thanks Oleg , but i try change my server string to
{"d":{"__type":"_admin.JqGridData","total":3,"page":1,"records":26,"rows": [{"id":1,"cell":["1","Сервисные центры","United Arab Emirates","Киев","Красных партизан 1","123-321","mail#mail.ru","www.service1","0",null,"False","False"]},{"id":2,"cell":["2","Сервисный центр 1_1","United Arab Emirates","Киев","Артема","123-321","fert#ukr.net","www.service2","1","1","True","False"]},{"id":4,"cell":["4","Сервисный центр 1_2","United Arab Emirates","Донецк","Артема","123-321","fert#ukr.net","www.service2","1","1","True","False"]},{"id":5,"cell":["5","Сервисный центр 1_3","United Arab Emirates","Одесса","Артема","123-321","fert#ukr.net","www.service3","1","1","True","False"]},
and
$("#gridSC").jqGrid({
url: '<%= ResolveClientUrl("~/FetchData.asmx/bindSC") %>',
datatype: 'json',
mtype: 'POST',
treeGridModel: 'adjacency',
ExpandColumn: 'Name',
ExpandColClick: true,
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
if (postData.searchField === undefined) postData.searchField = null;
if (postData.searchString === undefined) postData.searchString = null;
if (postData.searchOper === undefined) postData.searchOper = null;
//if (postData.filters === undefined) postData.filters = null;
return JSON.stringify(postData);
},
jsonReader: {
root: function (obj) { return obj.d.rows; },
page: function (obj) { return obj.d.page; },
total: function (obj) { return obj.d.total; },
records: function (obj) { return obj.d.records; }
},
colNames: ['Id', 'Name', 'CountryName', 'Town', 'Adress', 'Phone', 'Email', 'Url'],
colModel: [
{ name: 'Id', index: 'id', width: 10, hidden: true, key: true },
{ name: 'Name', index: 'Name', width: 80 },
{ name: 'CountryName', index: 'CountryName', width: 80 },
{ name: 'Town', index: 'Town', width: 20 },
{ name: 'Adress', index: 'Adress', width: 90 },
{ name: 'Phone', index: 'Phone', width: 20 },
{ name: 'Email', index: 'Email', width: 20 },
{ name: 'Url', index: 'Url', width: 30 }
],
rowNum: 10,
rowList: [10, 20, 300],
sortname: 'Name',
sortorder: "asc",
pager: "#pjmapSC",
viewrecords: true,
gridview: true,
rownumbers: true,
height: "100%",
caption: ''
})
and test
treeReader : {
level_field: "level",
parent_id_field: "parent",
leaf_field: "isLeaf",
expanded_field: "expanded"
},
nothing change in grid (not tree grid) . In server side my method
int startIndex = (page - 1) * rows;
int endIndex = (startIndex + rows < recordsCount) ?
startIndex + rows : recordsCount;
List<TableRow> gridRows = new List<TableRow>(rows);
for (int i = startIndex; i < endIndex; i++)
{
gridRows.Add(new TableRow()
{
id = lsc[i].Id,
cell = new List<string>(11) {
lsc[i].Id.ToString(),
lsc[i].Name,
lsc[i].CountryName,
lsc[i].Town,
lsc[i].Adress,
lsc[i].Phone,
lsc[i].Email,
lsc[i].Url,
lsc[i].level.ToString(),
lsc[i].parent,
lsc[i].isLeaf.ToString(),
lsc[i].expanded.ToString()
if i change to this
//string.Format("Name:{0}", lsc[i].Name)
my grid load incorrectly data
Help please.
You main error is in the wrong case of the column names of Tree Grid which you use. It should be level, parent, expanded instead of Level, Parent, Expanded which you use in the JSON input. Only isLeaf you use correctly. So you should either correct the column which use your web service or add parameter treeReader which describes the names which you use:
treeReader = {
level_field: "Level",
parent_id_field: "Parent",
leaf_field: "isLeaf",
expanded_field: "Expanded"
}
Additionally I would recommend you to change your code so that you use datatype: 'json' instead of datatype as function.