URL field not working with flexigrid no response from URL - json

When I pass the URL I am getting a no response from the url otherwise if I specify the corresponding WCF service page which is included in my project it is working is it any cross domain issue what would be the possible issue
<form id="sform" runat="server">
<table id="flex2" style="display:none"></table>
<script type="text/javascript">
$(document).ready(function () {
var user_id = 1;
var data = { UserID: user_id };
$("#flex2").flexigrid({
useInlineEditor: true,
//singleSelect: true,
rowClick: function (row) {
//var r=this.DataSource.rows[row.rowIndex];
//var p=$(row).offset();
//alert(r[this.DataSource.key]+" "+r.Name+" offset:"+p.top+","+p.left);
//this.grid.inlineEditor.edit(row);
},
url: 'http://192.168.10.91:5001/Service.svc/GetStates',
method: 'POST',
dataType: 'json',
colModel: [
{ display: 'Hours', name: 'hours', width: 40, sortable: true, align: 'center' },
{ display: 'DOC', name: 'doc', width: 180, sortable: true, align: 'left' },
],
searchitems: [
{ display: 'Type', name: 'cmetype' }
],
onError: function (jqXHR, textStatus, errorThrown) {
alert("flexigrid failed " + errorThrown + jqXHR + textStatus);
},
sortname: "type",
sortorder: "asc",
usepager: true,
title: 'States',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 800,
height: 200
});
});
//This function adds paramaters to the post of flexigrid. You can add a verification as well by return to false if you don't want flexigrid to submit
function addFormData() {
//passing a form object to serializeArray will get the valid data from all the objects, but, if the you pass a non-form object, you have to specify the input elements that the data will come from
var dt = $('#sform').serializeArray();
$("#flex2").flexOptions({ params: dt });
return true;
}
$('#sform').submit(function () {
$('#flex2').flexOptions({ newp: 1 }).flexReload();
return false;
});
</script>
</form>

Make sure that the svc service is accesibile and that it can accept post requests.
If all works well, check that the response is JSON and is valid.

Related

Frontend - Add new use jqGrid?

I use jqGrid add new record, but i can't put data from grid to json string.
When i run, return code:
error Status: 'Unsupported Media Type'. Error code: 415
And my code:
$(document).ready(function () {
jQuery("#jQGridDemo").jqGrid({
url: 'http://192.168.1.59:8080/sunrise/api/v1/warehouse/getById/1',
mtype: "GET",
contentType: "application/json",
datatype: "json",
colNames: ['wareHouseID', 'name' , 'fullname' , 'company', 'address'],
colModel: [
{ name: 'wareHouseID', index: 'wareHouseID', width: 150,editable:false, editoptions:{readonly:true, size:10}, hidden:true},
{ name: 'name', index: 'name', width: 150,editable:true, editoptions:{size:30}},
{ name: 'fullname', index: 'fullname', width: 150,editable:true,editoptions:{size:30}},
{ name: 'company', index: 'company', width: 150,editable:true,editoptions:{size:30}},
{ name: 'address', index: 'address', width: 150,editable:true,editoptions:{size:30}}
],
rowNum: 10,
rowList:[10,20,30],
width: 1290,
sortname: 'wareHouseID',
sortorder:"desc",
height:235,
gridview: true,
viewrecords: true,
caption: "List User Details",
editurl:"http://192.168.1.59:8080/sunrise/api/v1/warehouse/update",
pager: "#jQGridDemoPager",
ajaxRowOptions : {
type :"POST",
contentType :"application/json",
dataType :"json"
},
serializeRowData: function(postData){
return JSON.stringify(postData);
}
});
$("#jQGridDemo").jqGrid('navGrid','#jQGridDemoPager',
{edit:true, add:true, del:false, search:true},
// Edit options
{
type:"PUT",
url:"http://192.168.1.59:8080/sunrise/api/v1/warehouse/update",
closeAfterEdit:true,
reloadAfterSubmit:true,
onclickSubmit: function(params, postData) {
return JSON.stringify(postData);
},
afterSubmit: function(response, postData) {
var res = jQuery.parseJSON(response.responseText);
return [true, "", res.d];
}
},
//Add option
{
type:"POST",
url:"http://192.168.1.59:8080/sunrise/api/v1/warehouse/new",
closeAfterAdd:true,reloadAfterSubmit:true,
onclickSubmit: function(params, postData) {
return JSON.stringify(postData);
},
afterSubmit: function(response, postData) {
var res = jQuery.parseJSON(response.responseText);
return [true, "", res.d];
}
}
);});
Could you help me to find a problem and how to fix it? Tks very much.
There are many unclear parts in your code. Nevertheless I guess that the main problem which you have is the following: you use ajaxRowOptions to set contentType and you use serializeRowData to serialize the data from request as JSON. The problem is: you use form editing, but ajaxRowOptions and serializeRowData will be used only in case of inline editing.
So you should use
ajaxEditOptions: { contentType :"application/json" },
serializeEditData: function (postData) {
return JSON.stringify(postData);
}
You have to remove onclickSubmit which returns JSON.stringify(postData) additionally.
I hope it should solve the problem. If it will not help then you should write first of all which version of jqGrid you use and which fork of jqGrid you use (free jqGrid, Guriddo jqGrid JS or some old jqGrid in version <= 4.7). You should write additionally more information about the server which reruns the error "'Unsupported Media Type'. Error code: 415".

JQGrid and JSON data from Web2py

Q1.json is working (index.json). but i cant display in the jqgrid. i think colmodel names is the problem.Is it required that the colModel name is from database field? i want to display in jqgrid is from my select statements and those variables is from different tables. Not only one table but 3 tables.
Q2.Same row should be displayed in jqgrid but from different table. is it possible?
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'{{=URL(r=request,f='call',args=['json','index'])}}',
data: "{}",
datatype: 'json',
mtype: 'GET',
contentType: "application/json; charset=utf-8",
complete: function(jsondata, stat) {
if (stat == "success") {
var thegrid = jQuery("#list")[0];
thegrid.addJSONData(JSON.parse(jsondata.responseText).d);
}
},
colNames:['code','name','max','min','quantity','amount'],
colModel :[
{name:CODE',index:'CODE', width:55},
{name:'Name', index:'Name',width:100},
{name:'MAX(table2.hour)', index:'MAX(hour)',width:100},
{name:'MIN(tabl2.hour)', index:'MIN(hour)',width:100},
{name:'SUM(quantity)', index:'SUM(quantity)',width:180},
{name:'SUM(amount)', index:'SUM(amount)',width:180}
],
hidegrid: false,
scrollOffset:0,
pager: '#pager',
rowNum:100,
shrinkToFit:false,
//rowList:[10,20,30,50],
//sortname: 'id',
//sortorder: 'desc',
viewrecords: false,
width: "100%",
height: "100%",
caption: 'SALES Grid'
});
});
</script>
{"rows": [0, {"table1": {"Name": "dyon"}, "_extra": {"MAX(table2.hour)": "20130514214301484", "MIN(table2.hour)": "20130514052610093", "SUM(table2.quantity)": 2115.854, "SUM(table2.amount)": 90089.15}, "table3": {"CODE": 1800}}]}
NOTE: i want to display the data in one page only.when i run the index.html it contains rows but it is blank and theres a rows contains 0 per cell.When i run the index.json it contains the data i needed. Im newbie to python. thanks!
The first problem is that you use many options of jqGrid which not exist (see the documentation): data, contentType, complete. You remove the options or use some other options which do what you probably tried to do.
The second problem is the usage of properties in JSON input which has dots inside (like SUM(table2.quantity) for example). To be able to read such properties you have to define jsonmap as function. For example
jsonmap: function (obj) {
return obj._extra["SUM(table2.quantity)"];
}
Because the JSON data have 0 as the first element you will have to fix the above code to somthing like
jsonmap: function (obj) {
return typeof obj === "object"? obj._extra["SUM(table2.quantity)"]: "";
}
The first demo demonstrate the results:
The best would be to fix your server code to remove the unneeded 0 item from rows array. If you can't do this on the server side you can do this on the client side inside of beforeProcessing callback.
The demo displays
It uses the following JavaScript code
$("#list").jqGrid({
url: "CrazyGirl.json", // need be changed to youth
datatype: "json",
ajaxGridOptions: { contentType: "application/json" },
serializeGridData: function (data) {
return JSON.stringify({}); // send empty object (???)
},
colNames: ["code", "name", "max", "min", "quantity", "amount"],
colModel: [
{name: "code", width: 55, jsonmap: "table3.CODE"},
{name: "name", width: 100, jsonmap: "table1.Name"},
{name: "max", width: 120,
jsonmap: function (obj) {
return typeof obj === "object"? obj._extra["MAX(table2.hour)"]: "";
}},
{name: "min", width: 120,
jsonmap: function (obj) {
return typeof obj === "object"? obj._extra["MIN(table2.hour)"]: "";
}},
{name: "quantity", width: 100,
jsonmap: function (obj) {
return typeof obj === "object"? obj._extra["SUM(table2.quantity)"]: "";
}},
{name: "amount", width: 100,
jsonmap: function (obj) {
return typeof obj === "object"? obj._extra["SUM(table2.amount)"]: "";
}}
],
jsonReader: { repeatitems: false },
hidegrid: false,
pager: "#pager",
rowNum: 1000,
shrinkToFit: false,
height: "100%",
caption: "SALES Grid"
});

Highchart not displaying json data

I can't figure out what I'm doing wrong with my Highchart. It's supposed to read a json array, (really just a date, and a y value and plot it to a chart. However, I can't seem to get any points to plot to a chart. What am I doing wrong?
php code:
$statement = "select count(title) from node where title like 'WEN%'";
$result = mysql_query($statement);
while ($row = mysql_fetch_array($result)) {
$data = $row['count(title)'];
}
$x = time() * 1000;
$y = $data;
$array = array($x,$y);
echo json_encode($array);
html/javascript code:
<p>Chart</p>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
<script>
function requestData() {
jQuery.ajax({
url: 'queryp.php',
datatype: 'json',
success: function(point) {
var series = chart.series[0];
// add the point
chart.series[0].addPoint(point, true);
// call it again after one second
setTimeout(requestData, 5000);
},
cache: false
});
}
</script>
<script type="text/javascript">
jQuery(function () {
jQuery(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 10,
events: {
load: requestData
}
},
title: {
text: 'Live Query Data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
series: [{
name: 'Query Data',
data: []
}]
});
});
});
</script>
</div>
Your series[0] object has no method named addPoint, you should see this in the console.
If you want to append to the data array, just use push
chart.series[0].data.push(point[1]);
The problem is that you are referencing to chart variable, which is not ready yet - you are using load event handler. Use something like this:
function requestData() {
var series;
if(chart.series[0]){
/* all other cases load chart */
series = chart.series[0];
} else {
/* first load chart */
series = this.series[0];
}
jQuery.ajax({
url: 'queryp.php',
datatype: 'json',
success: function(point) {
series.addPoint(point, true);
setTimeout(requestData, 5000);
}
});
}
Also, make sure that values are numbers. Not strings.

Extjs MVC run function after store loads

I've got a grid getting data through a json store. I want to display the total number of rows in the grid. The problem is that the store.count() function is running before the store loads so it is returning 0. How can I get my count function to run only once the store has loaded? I'm working in MVC, here is my app.js which has my counting logic in it.
Thank you for any help
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: [
'Users'
],
launch: function(){
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
Ext.create('Ext.container.Viewport', {
resizable: 'true',
forceFit: 'true',
layout: 'fit',
items:[{
xtype: 'userpanel',
}]
});
var port = Ext.ComponentQuery.query('viewport')[0],
panel = port.down('userpanel'),
grid = panel.down('userlist'),
label = panel.down('label');
var count = grid.store.getCount();
var labelText = "Number of people in list: " + count;
label.setText(labelText);
}
});
store code:
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
autoSync: true,
purgePageCount: 0,
proxy: {
type: 'rest',
url: 'json.php',
reader: {
type: 'json',
root: 'queue',
successProperty: 'success'
}
},
sortOnLoad: true,
//autoLoad: true,
sorters: [
{
property: 'PreReq',
direction: 'DESC'
},
{
property: 'Major1',
direction: 'ASC'
},
{
property: 'UnitsCompleted',
direction: 'DESC'
}
],
listeners:{
onload: function(){
var port = button.up('viewport'),
grid = port.down('userlist'),
panel = port.down('userpanel'),
label = panel.down('label'),
count = grid.store.getCount(),
labelText = "Number of people in list: " + count;
label.setText(labelText);
},
scope: this
}
});
grid code:
Ext.define('AM.view.user.List' , {
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
store: 'Users',
height: 'auto',
width: 'auto',
//resizable: 'true',
features:[{
ftype: 'grouping'
}],
autoFill: 'true',
layout: 'fit',
autoScroll: 'true',
initComponent: function() {
function renderTip(value, metaData, record, rowIdx, colIdx, store) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
};
var dateRender = Ext.util.Format.dateRenderer('m/d/Y');
this.columns=[
//code for all my columns
]
];
this.callParent(arguments);
}
});
Try putting a listener on the store then listen for the onload event get the count and update the field that way. Though there are many ways to do this that is just one.
But in the example above you never load the store you just create it, which is why you see zero.
figured it out, needed to add a listener for the "load" event, not "onLoad". Code below...
Ext.define('APP.store.Store', {
extend: 'Ext.data.Store',
model: 'APP.model.Model',
autoLoad: true,
autoSync: true,
purgePageCount: 0,
proxy: {
type: 'rest',
url: 'json.php',
reader: {
type: 'json',
root: 'users',
successProperty: 'success'
}
},
sortOnLoad:true,
sorters: [{
property: 'last',
direction: 'ASC'
}],
listeners: {
load:{
fn:function(){
var label = Ext.ComponentQuery.query('#countlabel')[0];
label.setText(this.count()+ ' Total Participants);
}
}
}
});

ExtJS-Parsing json data and display in view

I am calling a rest webscript using Extjs with JSON,but unable to display on view.
The problem is i am getting the json data as response from the server.But when i want to display on view.Its not getting displayed.
here is my json:
{
"data":
{
"ticket":"TICKET_87c91dd9d18d7242e44ff638df01e0cb388ee4c7"
}
}
and here is extjs code:
Ext.onReady(function() {
alert("in login js");
var store = new Ext.data.JsonStore({
proxy : new Ext.data.ScriptTagProxy({
// url : 'http://ip:8080/alfresco/service/api/login',
url : 'http://ip:8080/alfresco/service/api/login?u=Value1&pw=Value2&format=json',
method : 'GET'
}),
reader : new Ext.data.JsonReader({
root : 'data',
fields : ['ticket']
})
});
alert("after the webscript call");
//store.load();
var grid = new Ext.grid.GridPanel({
renderTo: 'PagingFragment',
frame:true,
width:600,
height:800,
autoHeight: true,
autoWidth: true,
store: store,
loadMask:true,
columns: [
{
height:100,
width:100,
header: "Ticket",
dataIndex: 'ticket',
// renderer: title_img,
//id: 'ticket',
sortable: true
}
],
bbar: new Ext.PagingToolbar({
pageSize: 2,
store:store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}'
}),
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: {
fn: function(sm,index,record) {
Ext.Msg.alert('You Selected',record.data.title);
}
}
}
})
});
store.load({
params: {
start: 0,
limit: 5
}
});
});
and in jsp:
<body>
<div id="PagingFragment" style="position:absolute;top:10px;left:200px">
</div>
</body>
could anybody help on this
'data' must be an array.
Instead of { data: { ticket: 'blahblahblah' } } you must return
{ data: [{ ticket: 'blahblahblah' }] } see the diference?