XML Not well formed in Firefox getting xml response from server - ajax

I am using jQGrid Latest version in my project.following is complete configuration that i configured.
jQuery("#list").jqGrid( {
url : 'Link.do?method=findAllBrand',
mtype : 'GET',
height : 350,
datatype : "xml",
colNames : [ 'Name' ],
colModel : [ {
name : 'name',
index : 'name',
width : 620
} ],
rowNum : 10,
rowList : [ 10, 20, 30 ],
sortname : 'id',
sortorder : "desc",
viewrecords : true,
multiselect : true,
imgpath : 'themes/base/images',
caption : "Brand (s) Summary Grid",
pager : $('#pager'),
cache : false,
onSelectRow : function(id) {
}
});
I am getting following data in form of xml from server :
<?xml version="1.0" encoding="UTF-8" standalone="yes"?><rows><page>1</page><total>1</total><records>4</records><row id="BRD00003"><cell>Blanco</cell></row><row id="BRD00001"><cell>Bosch</cell></row><row id="BRD00004"><cell>Chef</cell></row><row id="BRD00002"><cell>F&P</cell></row></rows>
i know that in the last cell of last row is creating problem , because it contains & char which has special meaning in the xml. however i have escaped sequence the whole xml using Apache commons lang library using below function.
toXml = StringEscapeUtils.escapeXml(toXml);
and the resulting string is
<?xml version="1.0" encoding="UTF-8" standalone="yes"?><rows><page>1</page><total>1</total><records>4</records><row id="BRD00003"><cell>Blanco</cell></row><row id="BRD00001"><cell>Bosch</cell></row><row id="BRD00004"><cell>Chef</cell></row><row id="BRD00002"><cell>F&P</cell></row></rows>
still i got the same error in Mozilla firefox latest version and in chrome , ie 7,8 also.
I have to show you this special characters in the gird so how can i solve this problem ?
Thank You
Mihir Parekh

i am generating the xml from server side.
Then escape each text node and each attribute value separately, it's all simple as that.

I recommend you to use JSON format instead of XML whenever it's possible.
If you do need to use XML and you need to place some general values in XML you need use CDATA construct (<![CDATA["some common text"]]>).
Additionally I would recommend you to use autoencode: true as your standard jqGrid options. In the case you will be able to place any text in jqGrid cells. jqGrid will do the encoding of all characters which have special meaning for HTML.

Related

How to loaded ExtJS TreePanel from database table column2 as a ChildNode

`My oracle database and getting Tree-panel :
Now I would like to display database table from column2 asa each
Parent Node as Child Node please let me know how could I make it also
my Json Data I am getting result like that please let me know how could I get child node ?
My Expected result like :
This is the JSON data :
[{
"id":1,"reportTreeType":0,"text":"Root","reportType":null,"reportUrl":"", "hidden":false,
"children":[{
"id":5,"reportTreeType":0,"text":"Hardware","reportT‌​ype":"HardReport","reportUrl":"","hidden":false,"children":[], "leaf":false,"dirName":"","href":"","reportId":0,"qtip":""}]
I have tried ExtJS Tree-Panel below like but I am getting from table-1 column1 parent node not getting column2 child nodes ?
Ext
.onReady(function() {
var tree = new Ext.tree.TreePanel(
{id : 'treePanel',
el : 'tree-div',
useArrows : true,
title : 'Export',
autoScroll : true,
width : 250,
region : 'west',
animate : true,
enableDD : true,
containerScroll : true,
enableKeyEvents : true,
collapsible : true,
split : true,
rootVisible : false,
border : false,
// auto create TreeLoader
dataUrl :'<c:url value="/customize/ExportReport.do?method=getExport"/>',
root : {
nodeType : 'async',
text : 'Root',
draggable : false,
id : '-1',
expanded:true,
//here Children node I cannot able to rendered where I have made mistake ?
children:[{
text: reportT‌​ype, //TreeNode Java class variable
leaf: true }]
}
} }); });
If I understand well, you would like that Hardware is a child of Root and HardReport a child of Hardware.
I think there is no direct solution in ExtJs.
you change your backend to send the correct data
you have to manually parse the JSON
you load the data in a first tree store, and then you build a second tree store by looping through the first.

JQGrid : How to create a drop-down on the column header

I want to create a drop-down list on JQGrid header column and populate the drop-down with values from the Velocity template Array.
I have the following code :
$(document).ready(function() {
$("#activityTab").jqGrid(
{
datatype : "local",
width: 100,
colNames : [
headers.date, headers.method,
"javascript:showDropDown();",
headers.payFrom,
headers.confirmCode, headers.amount,headers.status ],
colModel : [ {
......
How can I call a method to populate the a particular header column as above.

Paging does not work in JqGrid

I am using jQGrid Latest version in my project.following is complete configuration that i configured.
jQuery("#list").jqGrid( {
url : 'Link.do?method=findAllBrand',
mtype : 'GET',
height : 350,
datatype : "xml",
colNames : [ 'Name' ],
colModel : [ {
name : 'name',
index : 'name',
width : 620
} ],
rowNum : 10,
rowList : [ 10, 20, 30 ],
sortname : 'id',
sortorder : "desc",
viewrecords : true,
multiselect : true,
imgpath : 'themes/base/images',
caption : "Brand (s) Summary Grid",
pager : #pager,
cache : false,
onSelectRow : function(id) {
}
});
I am getting following data in form of xml from server :
<?xml version="1.0" encoding="UTF-8" standalone="yes"?><rows><page>1</page><total>4</total><records>75</records><row id="BRD00005"><cell>AEG</cell></row><row id="BRD00010"><cell>ARC</cell></row><row id="BRD00006"><cell>Aga</cell></row><row id="BRD00007"><cell>Allenzi </cell></row><row id="BRD00008"><cell>Amana</cell></row><row id="BRD00009"><cell>Andi</cell></row><row id="BRD00011"><cell>Arda</cell></row><row id="BRD00012"><cell>Ariston</cell></row><row id="BRD00013"><cell>Asko</cell></row><row id="BRD00014"><cell>Baumatic</cell></row><row id="BRD00015"><cell>Bendix</cell></row><row id="BRD00003"><cell>Blanco</cell></row><row id="BRD00001"><cell>Bosch</cell></row><row id="BRD00004"><cell>Chef</cell></row><row id="BRD00016"><cell>Damani</cell></row><row id="BRD00017"><cell>Davell</cell></row><row id="BRD00018"><cell>Delonghi</cell></row><row id="BRD00019"><cell>Dishlex</cell></row><row id="BRD00020"><cell>Electrolux</cell></row><row id="BRD00021"><cell>Emilia</cell></row><row id="BRD00022"><cell>Euro</cell></row><row id="BRD00023"><cell>Eurolec</cell></row><row id="BRD00024"><cell>Euromaid</cell></row><row id="BRD00002"><cell>F&P</cell></row><row id="BRD00027"><cell>FP</cell></row><row id="BRD00025"><cell>Fagor</cell></row><row id="BRD00026"><cell>Fisher And Paykel</cell></row><row id="BRD00028"><cell>Franke</cell></row><row id="BRD00030"><cell>GE</cell></row><row id="BRD00034"><cell>GVA</cell></row><row id="BRD00029"><cell>Gaggenau</cell></row><row id="BRD00031"><cell>Glem </cell></row><row id="BRD00032"><cell>Glem Gas</cell></row><row id="BRD00033"><cell>Glemgas</cell></row><row id="BRD00035"><cell>Haier</cell></row><row id="BRD00036"><cell>Hisense </cell></row><row id="BRD00037"><cell>Hitachi</cell></row><row id="BRD00038"><cell>Hoover</cell></row><row id="BRD00039"><cell>Hotpoint</cell></row><row id="BRD00040"><cell>IAG</cell></row><row id="BRD00041"><cell>Ilve</cell></row><row id="BRD00042"><cell>Indesit</cell></row><row id="BRD00043"><cell>Jenn Air</cell></row><row id="BRD00044"><cell>Kelvinator </cell></row><row id="BRD00045"><cell>Kleenmaid</cell></row><row id="BRD00047"><cell>LG</cell></row><row id="BRD00046"><cell>La Germania</cell></row><row id="BRD00048"><cell>Liebherr</cell></row><row id="BRD00049"><cell>Linea</cell></row><row id="BRD00050"><cell>Lofra</cell></row><row id="BRD00051"><cell>Maytag</cell></row><row id="BRD00052"><cell>Midea</cell></row><row id="BRD00053"><cell>Miele</cell></row><row id="BRD00054"><cell>NEC</cell></row><row id="BRD00055"><cell>Neff</cell></row><row id="BRD00056"><cell>Nobel</cell></row><row id="BRD00057"><cell>Omega</cell></row><row id="BRD00058"><cell>Onix</cell></row><row id="BRD00059"><cell>Panasonic </cell></row><row id="BRD00060"><cell>Robinhood</cell></row><row id="BRD00061"><cell>Sagi</cell></row><row id="BRD00062"><cell>Samsung</cell></row><row id="BRD00063"><cell>Seimen </cell></row><row id="BRD00064"><cell>Sharp</cell></row><row id="BRD00065"><cell>Simpson</cell></row><row id="BRD00066"><cell>Smeg</cell></row><row id="BRD00067"><cell>St George</cell></row><row id="BRD00068"><cell>Technika</cell></row><row id="BRD00069"><cell>Techno</cell></row><row id="BRD00070"><cell>Technogas</cell></row><row id="BRD00071"><cell>Teka</cell></row><row id="BRD00072"><cell>Thor</cell></row><row id="BRD00073"><cell>Vintec</cell></row><row id="BRD00074"><cell>Westinghouse</cell></row><row id="BRD00075"><cell>Whirlpool</cell></row></rows>
I have modified the pager parameter as suggested by user Oleg in the other post.but still the pager is not working as expected. initially it shows only the 10 data of the record , when i click on next it does nothing.
what did i do wrong
Thank You
Mihir Parekh
The value of pager option must be quoted: pager : "#pager". You use datatype: "xml" without loadonce: true. In the case your server (url : 'Link.do?method=findAllBrand') is responsible for paging and sorting. If the user click on the next page new request to the server with the corresponding parameters page=2.
Typically the server should return the number of items which corresponds page and rows parameters. The XML response contains much more items. I suppose that the server returns all items independent from the requested page. In the case you should include loadonce: true. In the case the client code (JavaScript code of jqGrid) will do paging and sorting for you. If you use loadonce: true option you can remove the part
<page>1</page><total>4</total><records>75</records>
from the XML data returned from the server.
Additionally I would recommend you to consider to change to use JSON instead of XML whenever it's possible. In the case you could reduce the representation of items like
<rows>
<row id="BRD00022"><cell>Euro</cell></row>
<row id="BRD00002"><cell>F&P</cell></row>
<row id="BRD00026"><cell>Fisher And Paykel</cell></row>
</rows>
to
[["Euro","BRD00022"],["F&P","BRD00002"],["Fisher And Paykel","BRD00026"]]
So you can reduce the size of transferred data.
Additionally, like I wrote you in the comment to your previous question, you should replace sortname : 'id' to sortname : 'name' bacsue your grid don't have the column with the name "id". The option sortorder : "desc" should be probably removed.
You should remove deprecated option imgpath and remove option cache which not exist in jqGrid too. Instead of that I strictly recommend you to add gridview: true option and autoencode: true. If you use autoencode: true you will don't need to use HTML encoding (converting F&P to F&P on the server side).
UPDATED: The demo demonstrate how the grid could looks like:
I included toolbar filter and advanced searching in the grid to show how easy one can implement the features if one uses loadonce: true.

Is it possible to search locally in jqGrid with treeGrid installed

I am using jqGrid with treeGrid. I have added a filterToolbar. I would like to search locally instead of having a server call. The treegrid docs say that, "When we initialize the grid and the data is read, the datatype is automatically set to local." (This is regards to TreeGrid)
So, is it possible to implement local search with treeGrid. I tried the below configuration, but it is resulting in server calls.
My Configuration is
var grid = $("#grid").jqGrid({
treeGrid: true,
treeGridModel: 'adjacency',
ExpandColumn: 'businessAreaName',
ExpandColClick : true,
url:'agileProgramme/records.do',
datatype: 'json',
mtype: 'GET',
colNames:['Id'
, 'Business Area'
, 'Investment'
, 'Org'
, 'Goal'
],
colModel:[
/*00*/ {name:'agileProgrammeId',index:'agileProgrammeId', width:0, editable:false,hidden:true},
/*01*/ {name:'businessAreaName',index:'businessAreaName', width:160, editable:false},
/*02*/ {name:'programmeName',index:'programmeName', width:150, editable:false, classes:'link'},
/*03*/ {name:'org',index:'org', width:50, editable:false, classes:'orgHierarchy', sortable : false},
/*04*/ {name:'goal',index:'goal', width:70, editable:false}
],
treeReader : {
level_field: "level",
parent_id_field: "parent",
leaf_field: "leaf",
expanded_field: "expanded"
},
autowidth: true,
height: 240,
pager: '#pager',
sortname: 'id',
sortorder: "asc",
toolbar:[true,"top"],
caption:"TableGridDemo",
emptyrecords: "Empty records",
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "agileProgrammeId"
}
});
And to implement the search toolbar
$('#grid').jqGrid('filterToolbar', {stringResult: true,searchOnEnter : true});
Would appreciate any help or any pointer on even if it is possible?
The most problem in the TreeGrid filtering is that it's not clear what should be displayed in the TreeGrid as the result of applying the filter. The standard behavior of applying filter to the grid consist from removing all non-filtered rows. Such behavior will be wrong in case of TreeGrid. In the answer to the close question I tried to explain the problem.
What one can try to implement is some kind of highlighting of the filtered rows only (see here as an idea) or one can set some CSS class to the non-filtered rows to make there gray (like disabled). In any way one have to display parents of the filtered rows in some way. One more option will be to display the filtered TreeGrid not in the Tree form. On can display for example an additional column with the path to the filtered row and the rest row data.
UPDATED: What I mean with "to display parents of the filtered rows" is about the following. Let us we have the TreeGrid like the following
+root 123
+testchild1 32
test1 4
+child2 30
test2 7
and we filter for the first column for the text "test". In the case it would be wrong to display just the lines which has the text "test"
+testchild1 32
test1 4
test2 7
but in some scenarios if would be enough to display the above lines with the full path till the root element:
root\testchild1 32
root\testchild1\test1 4
root\testchild1\test2 7
In the case the information will be displayed in the grid instead of TreeGrid.
In other cases the searching in the leafs only can have sense. In the case one could really display the results in the TreeGrid form, but it will be not the common case.

jqGrid Not Loading Data

I'm sure this is something simple that I'm missing, but I just can't seem to find it. I have a simple jqGrid specified here:
$('#mainGrid').jqGrid({
datatype: 'local',
colNames: ['id', 'name'],
colModel: [
{ name: 'id', index: 'id', width: 100 },
{ name: 'name', index: 'name', width: 300 }
],
rowNum: 9999,
sortname: 'name',
viewrecords: true,
sortorder: 'asc',
data: [{"id":"924c18a4-cad6-4b6a-97ef-f9ca61614530","name":"Pathway 1"},{"id":"54897f40-49ab-4abd-acac-6047006c7cc7","name":"Pathway 2"},{"id":"61542c48-102f-4d8e-ba9f-c24c64a20d28","name":"Pathway 3"},{"id":"c4ca9575-7353-4c18-b38a-33b383fcd8b2","name":"Pathway 4"}]
});
This loads correctly. Simple proof of concept. Now I try to replace the local data with a call to a server resource:
$('#mainGrid').jqGrid({
url: 'AJAXHandler.aspx',
datatype: 'json',
colNames: ['id', 'name'],
colModel: [
{ name: 'id', index: 'id', width: 100 },
{ name: 'name', index: 'name', width: 300 }
],
rowNum: 9999,
sortname: 'name',
viewrecords: true,
sortorder: 'asc'
});
The server resource returns the same data. But the grid isn't loading the data. (At least, it's not showing any records.) I've confirmed with FireBug that the resource is indeed being called and is returning the expected data.
At first I thought that the content type in the resource's response should be changed to application/json, but that made no difference. Is there something else wrong with that response that's preventing the grid from loading the data?
Firebug output for the server resource:
Response Headers
Cache-Control private
Content-Length 261
Content-Type text/html; charset=utf-8
Server Microsoft-IIS/6.0
MicrosoftSharePointTeamSe... 12.0.0.6219
X-Powered-By ASP.NET
X-AspNet-Version 2.0.50727
Set-Cookie WSS_KeepSessionAuthenticated=80; path=/
Date Sat, 23 Apr 2011 14:35:43 GMT
Request Headers
Host cyber0ne.com
User-Agent Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16
Accept application/json, text/javascript, */*; q=0.01
Accept-Language en-us,en;q=0.5
Accept-Encoding gzip,deflate
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive 115
Connection keep-alive
X-Requested-With XMLHttpRequest
Referer http://cyber0ne.com/dovetail_pages/Member/Pathways.aspx?MemberID=b428e0a7-dd55-de11-8e97-0016cfe25fa3
Cookie WSS_KeepSessionAuthenticated=80
Params
_search false
nd 1303569347783
page 1
rows 9999
sidx name
sord asc
Response
[{"id":"4d4b8249-b5f9-4da6-aba2-bf3af588d560","name":"Pathway 1"},{"id":"230184e6-44cc-4274-97fd-b455440cd9c0","name":"Pathway 2"},{"id":"7f938218-b963-495f-9646-f3cfb1e63ea1","name":"Pathway 3"},{"id":"2b17f23e-5500-4b01-ac1c-df2de90dc511","name":"Pathway 4"}]
Update:
Per #Paul Creasey's answer below, the response content is now:
{"total":4,"page":1,"records":4,"rows":[{"id":"55132687-b0bd-4c89-97cb-122d127429eb","name":"Pathway 1"},{"id":"123ba476-1560-4148-ae96-968bdd10e190","name":"Pathway 2"},{"id":"43f5660b-141c-4ccc-848e-6b41667b399a","name":"Pathway 3"},{"id":"b0d21316-d07d-4b46-8011-89c3cb07a8f6","name":"Pathway 4"}]}
The behavior has changed slightly. The grid now says "Loading" but still doesn't load the data.
The answer of Paul is absolutely correct. You should just use jsonReader : {repeatitems: false}. I decide to write some more additional information only to clear why jqGrid could not read your original data at the beginning. I want additionally describe how jsonReader parameter can help to read JSON or XML data returned from the server.
First of all you can read almost any input JSON data in jqGrid. You should just define the jsonReader parameter which describe how the data should be read. For example the data in your original format do can be read by jqGrid with respect of the following jsonReader:
jsonReader: {
repeatitems: false,
page: function() { return 1; },
root: function (obj) { return obj; },
records: function (obj) { return obj.length; }
}
You can see on the demo that the way really works. You can read more about this in my old answer where I suggested to use functions as parameters of jsonReader in situations like youth.
Why is it needed at all to provide the data in so strange form in the server response? Why the jsonReader is needed? The reason is that jqGrid allows the server to implement sorting, paging and optionally filtering/searching. So the request to the server is not like "please get me the list of the users", but more like "please sort the users by the last name and get me the 5-th page of the data where the page consists of 10 rows". The page size (10 in the case) will be get from the combobox of the jwGrid pager. The rowList array parameter defines the list of possible values and the user can choose the page size which he/she prefer.
The returned data should contain not only up to 10 requested rows of the data, but tree additional parameters: "total", "page" and "records" which describes some fields which will be filled in the pager:
The data, which build the grid contain, are array of objects. Every array item hold the information about one grid row. The array item can be either the object with named properties like
{"id":"55132687-b0bd-4c89-97cb-122d127429eb","name":"Pathway 1"}
or the object like
{"id":"55132687-b0bd-4c89-97cb-122d127429eb",
cell:["55132687-b0bd-4c89-97cb-122d127429eb","Pathway 1"]}
or the arrays like
["55132687-b0bd-4c89-97cb-122d127429eb","Pathway 1"]
To read data in the first format one should use jsonReader:{repeatitems:false}. The second format is default and to read the data one need not define any jsonReader. To read data in the last format we should define jsonReader:{cell:''} and additionally key:true for the id column. The last format in the most compact, but it can be used only if one from the column of jqGrid has unique data which can be interpret as the id. The id is important, because jqGrid build HTML table with <tr> element having exactly the id which one post back. No id duplicates inside one page are permitted corresponds to HTML specifications.
The final remark. If you don't can or don't want to implement paging and sorting on the server side you should return all data in the server response and use loadonce:true parameter of jqGrid. This will follow to changing the datatype parameter of jqGrid to 'local' after the first data load. After that, the sorting and paging of data will be done inside of JavaScript code of jqGrid.
According to the docs here, the expected json format is:
{
"total": "xxx",
"page": "yyy",
"records": "zzz",
"rows" : [
{"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
{"id" :"2", "cell":["cell21", "cell22", "cell23"]},
...
]
}
Therefore you web service should be returning this:
{
"total": "4",
"page": "1",
"records": "4",
"rows" : [
{
"id": "4d4b8249-b5f9-4da6-aba2-bf3af588d560",
"name": "Pathway 1"
},
{
"id": "230184e6-44cc-4274-97fd-b455440cd9c0",
"name": "Pathway 2"
},
{
"id": "7f938218-b963-495f-9646-f3cfb1e63ea1",
"name": "Pathway 3"
},
{
"id": "2b17f23e-5500-4b01-ac1c-df2de90dc511",
"name": "Pathway 4"
}
]
}
At the moment you only have the rows array.
You could implement your own function to read the json, but i've never done this, see the "jsonReader as Function" section of the link above.
Edit:
I was wrong initially, either you should set the repeatitems flag to false:
jsonReader : {
repeatitems: false
},
and use the json above (i think!) or return data like this:
{
"total": "4",
"page": "1",
"records": "4",
"rows" : [
{
"id": "4d4b8249-b5f9-4da6-aba2-bf3af588d560",
"cells" : ["Pathway 1"]
},
{
"id": "230184e6-44cc-4274-97fd-b455440cd9c0",
"cells" : ["Pathway 2"]
},
{
"id": "7f938218-b963-495f-9646-f3cfb1e63ea1",
"cells" : ["Pathway 3"]
},
{
"id": "2b17f23e-5500-4b01-ac1c-df2de90dc511",
"cells" : ["Pathway 4"]
}
]
}
I've always done the latter, but i think the former is probably better!
I faced a similar problem in my project in firefox. I am trying to load data into jqgrid on page load. But i just see 'Loading...' and no data in grid.
I solved it in a single step. This may sound silly, but this is just what i did to get it working:
I just commented out the <script> tag in my <head> that points to the js file: jquery.jqGrid.js, as i already have another <script> tag that points to the js file: jquery.jqGrid.min.js
Also you need to ensure that the order of your scripts is correct... first load the jquery and then the jqgrid files.
This resolved my issue of data loading in firefox.

Resources