I was trying to implement server side paging with JqxGrid and Codeigniter. I am following the tutorial here, http://www.jqwidgets.com/server-side-paging-with-jquery-grid/. I have a problem with posting pagenum and pagesize to Codeigniter controller. When I tried $this->input->get('') method, its not working.
Here is my Source for jqxgrid,
var source =
{
datatype: "json",
datafields: [
{ name: 'itemname'},
{ name: 'category'},
],
id: 'id',
url: '<?php echo base_url()."index.php/cart/reportgriddata/"; ?>',
root: 'Rows',
beforeprocessing: function(data)
{
source.totalrecords = data[0].TotalRows;
}
};
And in my controller, I used following method to get parameters from get-url of dataadapter
$pagenum =$this->input->get('pagenum');
$pagesize =$this->input->get('pagesize');
But here the values getting for both $pagenum and $pagesize is null.
Got it working by using POST method.
var source =
{
type:"POST"
datatype: "json",
datafields: [
{ name: 'itemname'},
{ name: 'category'},
],
id: 'id',
url: '<?php echo base_url()."index.php/cart/reportgriddata/"; ?>',
root: 'Rows',
beforeprocessing: function(data)
{
source.totalrecords = data[0].TotalRows;
}
};
and using,
$pagenum =$this->input->post('pagenum');
$pagesize =$this->input->post('pagesize');
Related
I'm trying to get data from a webservice using ajax and POST method.
Ext.Ajax.request({
url: 'http://localhost......',
method:'POST',
success: function(response) { console.log(response.responseText); },
failure: function() { Ext.Msg.alert('Fail'); },
jsonData:{
/*Here I specify my request json*/
}
}
});
The above thing works fine but when i try to mimic the same in EXTJS store it responds with a error
he server responded with a status of 415 (Unsupported Media Type)
EXTJS STORE CODE
Ext.define('IWM.store.JsonTest', {
extend: 'Ext.data.Store',
autoLoad: true,
fields:['Name'],
proxy: {
type: 'ajax',
method : 'POST',
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
},
jsonData:{
/*JSON */
}
},
url: 'http://localhost......',
success: function(response) { console.log(response.responseText); },
failure:function(){console.log("failed");},
reader: {
type: 'json',
root: 'result',
successProperty: 'success'
}
}
});
First things first, try to change store config as below.
var IWMStore = new Ext.data.JsonStore({
// it seems to me you had forgotten model
model: 'YourDataModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'http://your-url-address',
reader: {
type: 'json',
root: 'json-root-value',
idProperty: 'unique-property-in-json-file'
}
}
});
Example JSON value :
// here, ctgMains is the root value, CUST_ASSORT_SECTION_ID is the idProperty
{"ctgMains":[{"CUST_ASSORT_SECTION_ID":"1","CTG_SECTION":"HORECA"},{"CUST_ASSORT_SECTION_ID":"7","CTG_SECTION":"SCO"},{"CUST_ASSORT_SECTION_ID":"3","CTG_SECTION":"TRADER"}]}
Second Attempt :
Try to add headers property in your proxy definition, like below:
proxy: {
type: 'ajax',
url: 'http://your-url-address',
reader: {
type: 'json',
root: 'json-root-value',
idProperty: 'unique-property-in-json-file'
},
headers: {
'Content-type': 'application/json',
'Accept': 'application/json'
}
}
Following on from Oğuz Çelikdemir's answer, you may need to define a json writer for your proxy.
proxy: {
type: 'ajax',
url: 'http://your-url-address',
reader: {
type: 'json',
root: 'json-root-value',
idProperty: 'unique-property-in-json-file'
},
writer: {
type: 'json'
}
}
That should set the json mediatype header (assuming that's what your request is expecting).
Using Kendo.web.js versions 2013.2.716 and 2012.3.1315, I am trying to use a function in my transport.create rather than calling a URL. What I find is that the function does not get called. Instead a default URL is called and the resulting HTML appears to cause an error in the bowels of kendo because it is expected to be JSON instead.
I assume that this is some type of configuration error, but I can't figure out where the problem is.
Here is a snippet of the code:
var clientListDS = new kendo.data.DataSource({
transport: {
read: {
url: window.baseUrl + 'HealthCheck/ClientSummary',
dataType: 'json',
type: 'POST'
},
create: function(a,b,c) { alert('Create'); },
createY: window.baseUrl + 'HealthCheck/DontCallMe',
createX: {
url: window.baseUrl + 'HealthCheck/DontCallMe',
dataType: 'json',
type: 'POST'
},
whatWeWantCreateToDo: function () {
showChooseDialog('Some Random String', 'Select Client', OnRefreshInactiveClientList);
},
destroy: function () {
alert('destroy');
},
update: function () {
alert('update');
}
},
autoSync: true,
schema: {
model: {
id: 'ID',
fields: {
ID: { required: false, type: 'number', nullable: true },
ClientName: { type: 'string' },
ClientTag: { type: 'string' },
Status: { type: 'string' }
}
}
}
});
Then I use the resulting data source to build a grid like this:
$('#cClientGrid').kendoGrid({
dataSource: clientListDS,
columns: [
{ field: 'ClientTag', title: 'Tag'},
{ field: 'ClientName', title: 'Name' },
{ field: 'Status' }
],
editable: {
mode: 'incell',
createAt: 'bottom'
},
edit: function (pEvent) {
if (pEvent.model.isNew())
alert('create');
else
alert('Edit');
},
toolbar: ['create']
});
Some behavior that is worthy of note:
You see several attempts at the create configuration. If I use CreateY or CreateX, it will call the resulting URL. If I use Create or WhatWeWantCreateToDo, I end up downloading the containing page with each element of my schema as get string items (I assume this is some type of default behavior as I can't find a reference to the URL which is downloaded).
When I turn off autoSync, the grid will call its edit function when I use the toolbar to create a new item. When I turn on autoSync, the edit function does not get called. Instead the data source create functionality runs.
Any thoughts or insight on how I might be able to call a function instead of a URL will be appreciated.
First make in transport everything being an URL or a function, do not mix them up.
If you need to implement read as a function, you simply do:
transport: {
read : function (options) {
$.ajax({
url: window.baseUrl + 'HealthCheck/ClientSummary',
dataType: 'json',
type: 'POST',
success : function (result) {
options.success(result);
}
});
},
am facing problem while updating list from controller. I have store, model and list to show Json data. am able to get data but could not able update the list. and if do the ajax call in my store am able to data with list but listners are not getting called. So i moved the code to controller.
here is my store:
Ext.define('MyApp.store.StoreList', {
extend:'Ext.data.Store',
requires:['MyApp.model.ModelList'],
config:{
model:'MyApp.model.ModelList',
autoLoad:'true',
storeId:'id_StoreList'
}
});
model:
Ext.define('MyApp.model.ModelList', {
extend: 'Ext.data.Model',
xtype:'modelList',
config: {
fields:['name']
}
});
controller
Ext.define('MyApp.controller.Main', {
extend : 'Ext.app.Controller',
requires : ['MyApp.view.MyList'],
config : {
refs : {
loadbtn:'button[action=loadbtn]',
dataList: '#id_listitems'
},
control : {
"#dataList": {
itemtap: 'onListItemTap'
},
loadbtn:{
tap : 'handleloadbtn'
}
}
},
handleloadbtn: function(){
console.log('loadbtn tapped');
Ext.Viewport.setMasked({xtype:'loadmask',message:'loading...'});
this.ajaxCall();
},
ajaxCall:function(){
Ext.Ajax.request({
method: 'POST',
scope: this,
extraParams: {
Details: true
},
url:'http://localhost:9080/works',
actionMethods: {
create : 'POST',
read : 'POST', // by default GET
update : 'POST',
destroy: 'POST'
},
headers :{
"Content-Type" :'application/xml',
'Accept':'application/json'
},
reader:
{
type:'json'
},
success: function(response){
console.log('success');
// var list = Ext.getCmp('id_listitems')
//var store = Ext.getStore('id_StoreList');
var store = Ext.data.StoreManager.lookup('id_StoreList');
this.getDataList().setStore(store);
//Error : Uncaught ReferenceError: getDataList is not defined
console.log('test:',test);
Ext.Viewport.setMasked(false);
}
})
}
});
list:
Ext.define('MyApp.view.MyList',{
extend:'Ext.Panel',
xtype:'myList',
requires:['Ext.dataview.List'],
config:{
layout:'fit',
styleHtmlContent:'true',
styleHtmlCls:'showListCls',
items:[
{
docked:'top',
items:[
{
xtype:'button',
text:'Load',
ui:'Plain',
action:'loadbtn',
width:'180px',
height:'30px',
docked:'right',
margin : '5 15 5 0'
}
]
},
{
xtype:'list',
id: 'id_listitems',
action:'list_Item_Action',
store:'StoreList',
itemTpl:['{name}'
]
}
]
}
});
Can any one please help me out in resolving this? Thanks.
You need to use this.getDataList() like so:
Ext.Ajax.request({
method: 'POST',
extraParams: {
Details: true
},
url:'http://localhost:9080/works',
actionMethods: {
create : 'POST',
read : 'POST', // by default GET
update : 'POST',
destroy: 'POST'
},
headers :{
"Content-Type" :'application/xml',
'Accept':'application/json'
},
reader:
{
type:'json'
},
success: function(response){
console.log('success');
// var list = Ext.getCmp('id_listitems')
//var store = Ext.getStore('id_StoreList');
var store = Ext.data.StoreManager.lookup('id_StoreList');
this.getDataList().setStore(store);
//Error : Uncaught ReferenceError: getDataList is not defined
console.log('test:',test);
Ext.Viewport.setMasked(false);
},
scope: this
});
You also need to add scope: this to your request config object so that this in the success method is not the request but your controller.
Hope this helps.
I think you can try this.
your store would look like
Ext.define('MyApp.store.StoreList', {
extend:'Ext.data.Store',
requires:['MyApp.model.ModelList'],
config:{
model:'MyApp.model.ModelList',
autoLoad:'true',
clearOnPageLoad: false,
proxy: {
type: 'jsonp',
useDefaultXhrHeader: false,
url: 'http://localhost:9080/works',
reader: {
type: 'json',
rootProperty: "Items" //It depends on your json data structure
},
callbackKey: 'callback'
}
}
});
In the Controller "handleloadbtn" function , you can just call
Ext.getStore("StoreList").load(); //despite of the config "autoLoad:true"
I want to get data from Yii controller action in Ext.data.store with following code:
var vehicles = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['vehiclename'],
root: 'vehicles'
}),
proxy: new Ext.data.HttpProxy({
url: '<?php echo $this->createUrl('GetVehicles');?>'
}),
autoLoad: true
});
or following code for vehicles:
var vehicles = Ext.create('Ext.data.Store', {
fields: [
{name: 'vehiclename'}
],
proxy: {
type: 'ajax',
url: '<?php echo $this->createUrl('GetVehicles'); ?>',
reader: {
type: 'json',
root:'vehicles'
}
},
autoLoad: true
});
My action code is:
public function actionGetVehicles()
{
$sql = "select vehicleName from vehicletbl inner join companytbl on vehicletbl.companyid=companytbl.companyid and companytbl.companyid='2';";
$vehicles = Yii::app()->db->createCommand($sql)->queryAll();
//var_dump($vehicles);
echo '{vehicles:'.json_encode($vehicles).'}';
}
When i send request to action with browser address bar i get following json:
{vehicles:[{"vehiclename":"pride"},{"vehiclename":"benz"}]}
but i don't know why Ext.data.store can't get data and store themes!
What is wrong in my code?
I use store at:
items: [treePanel,Ext.create('Ext.grid.PropertyGrid', {
title: 'History',
closable: false,
header: true,
sortableColumns: false,
customEditors: {
Vehicle: Ext.create('Ext.form.ComboBox', {
store: vehicles,
queryMode: 'local',
displayField: 'vehiclename'
})
},
/*propertyNames: {
'evtStart': 'Start Time'
},*/
source: {
"Vehicle": 'Select Vehicle',
"Select Start Date": false,
"Select End Date": true
}
})]
Chrome developer tool output:
You returned json is not valid. It should be:
{"vehicles":[{"vehiclename":"pride"},{"vehiclename":"benz"}]}
(Quotation marks around the root vehicles).
I'm having trouble passing parameters into the GetAll method of my controller. I tried Filter as below but no luck. any suggestions?
Ext.define('AM.store.Sessions', {
extend: 'Ext.data.Store',
model: 'AM.model.Session',
autoLoad: false,
proxy: {
type: 'ajax',
api: {
read: 'Session/GetAll',
update: 'data/updateUsers.json'
},
reader: {
type: 'json',
root: 'Data',
successProperty: 'success'
},
filters: [
new Ext.util.Filter({
property: 'eyeColor',
value: 'brown'
})
]
}
});
Im not sure what you are after. But stating extraParams in you proxy will put that parameter on every load() on your store. Like this.
Ext.define('AM.store.Sessions', {
extend: 'Ext.data.Store',
model: 'AM.model.Session',
autoLoad: false,
proxy: {
type: 'ajax',
api: {
read: 'Session/GetAll',
update: 'data/updateUsers.json'
},
extraParams:{
eyeColor:'brown'
}
reader: {
type: 'json',
root: 'Data',
successProperty: 'success'
}
}
});
You could also listen on the "beforeLoad" event on the store and modifu parameters there.
OR.. you could just pass parameters to the load() function as this
var myStore = Ext.create('AM.store.Session');
myStore.load({
params:{
eyeColor:'brown'
}
})