jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

Double decoding when using inline editing on markup content in a jqGrid with autoencode: true

08/11/2013
12:58

sbach2o

New Member

Members

Forum Posts: 2

Member Since:
08/11/2013

Offline

Hi,

I have the following problem:

I am trying to allow editing of markup content in a cell within a jqGrid. The grid is configured for inline editing and data is retrieved json encoded. The grid is configured with 'autodecode: true'.

Everything works fine, until the rare case when edited markup itself contains text which must be encoded within attributes. Examples:

This causes no problems:

This however…

Will appear on the server (after server-side decoding) as:

I've followed this in a debugger and found the actual error occurs while the jqGrid switches to edit mode for the line in question. The text is stored fine while the corresponding grid line is displayed in readonly mode. Note, that the text is already stored decoded. In a call to jqGrid('editRow', …), however, the following happens (quoted from version 4.3.1, but I checked the current code and the relevant part is still the same):

editRow :
function(rowid,keys,oneditfunc,successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc) { 
// Compatible mode old versions [ ... ]
// End compatible
return this.each(function(){
var $t = this, nm, tmp, editable, cnt=0, focus=null, svr={}, ind,cm;
if (!$t.grid ) { return; }
ind = $($t).jqGrid("getInd",rowid,true);
if( ind === false ) {return;}
editable = $(ind).attr("editable") || "0″;
if (editable == "0″ && !$(ind).hasClass("not-editable-row")) {
cm = $t.p.colModel;
$('td[role="gridcell"]',ind).each( function(i) {
nm = cm[i].name;
var treeg = $t.p.treeGrid===true && nm == $t.p.ExpandColumn;
if(treeg) { tmp = $("span:first",this).html();}
else {
try {
tmp = $.unformat(this,{rowId:rowid, colModel:cm[i]},i);
} catch (_) {
tmp = ( cm[i].edittype && cm[i].edittype == 'textarea' ) ? $(this).text() : $(this).html();
}
}
if (nm != 'cb' && nm != 'subgrid' && nm != 'rn') {
// This decodes an already decoded text:
if($t.p.autoencode) { tmp = $.jgrid.htmlDecode(tmp); }
svr[nm]=tmp;
if(cm[i].editable===true) {
if(focus===null) { focus = i; }
if (treeg) { $("span:first",this).html(""); }
else { $(this).html(""); }
var opt = $.extend({},cm[i].editoptions || {},{id:rowid+"_"+nm,name:nm});
if(!cm[i].edittype) { cm[i].edittype = "text"; }
if(tmp == "&nbsp;" || tmp == "&#160;" || (tmp.length==1 && tmp.charCodeAt(0)==160) ) {tmp='';}
var elc = $.jgrid.createEl(cm[i].edittype,opt,tmp,true,$.extend({},$.jgrid.ajaxOptions,$t.p.ajaxSelectOptions || {}));
$(elc).addClass("editable");
if(treeg) { $("span:first",this).append(elc); }
else { $(this).append(elc); }
//Again IE
[ some IE work around ]
cnt++;
}
}
});

See the line with the comment (which I cannot get to hilighte in purple). If I remove that, everything works fine. Of course, this applies to my scenario; I have no idea which other configurations may be broken.

Edit: Sorry, I fell afoul of the quirks of the editor. The formatting is a mess; I'll leave the formatting for the time being and hope the meaning is clear enough.

10/11/2013
12:01

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Thanks. I have read the whole post.

Could you please test in your case the following.

Do not comment this line

if($t.p.autoencode) { tmp = $.jgrid.htmlDecode(tmp); }

but comment this one in saveRow function in inline edit module

if($t.p.autoencode) {
    $.each(tmp,function(n,v){
        tmp[n] = $.jgrid.htmlDecode(v);
    });
}

Please let me know what is happen.

Thank you in advance.

Kind Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

12/11/2013
15:26

sbach2o

New Member

Members

Forum Posts: 2

Member Since:
08/11/2013

Offline

Hello and thanks for the prompt answer.

I tried what you suggested (both occurences in saveRow), and it has no effect. If I read the code and interpret what I saw in the debugger correctly, saveRow is invoked before an edited row is sent to the server. This is too late to fix anything which has been messed up before.

As I mentioned above, the problem arises when the row in question is switched to edit mode. In my code this is done, in the onSelectRow callback, by a call to:

jqGrid('editRow', rowId, true, undefined /*on edit*/, undefined /*success*/, url, { /*some extra params*/ }, someAfterSavefunc, undefined /*errorFunc*/, someAfterRestoreFunc)

In short, the displayed contents of a cell, if it contains markup as outlined in my initial post, is okay before this call to 'editRow', and afterwards, when the row switched to edit mode, it is broken. The point which breaks it is described in my initial post. Of course, the person doing the editing can easily fix it by putting the guarding encodings back into place, but he/she must remember to do this always.

Since this applies only in the rare cases of contents which itself contains encoded portions, this usually causes no problem. But in our case we want let the user edit xml-snippets which are required to contain well-formed xml attributes.

To recapitulate:

In readonly mode the cell shows the contents exactly as it is stored on the server.
During execution of 'editRow', when the contents is extracted with 'tmp = $.unformat(...)' it is exactly right.
When afterwards 'tmp = $.jgrid.htmlDecode(tmp)' is called, guarding encodings of inner encoded contents are removed, and this cannot be fixed or sorted out when 'saveRow' executes later.

The relevant configuration of the grid is as follows (somewhat shortened):

colNames:['ID', 'Name', 'Value'],

colModel: [

{ name: 'id', index: 'id', hidden: true, sortable: false, editable: false }

{ name: 'name', index: 'name', width: 100, sortable: true, editable: true, editoptions: { dataInit: someDataInitFunc } }

{ name: 'value', index: 'value', width: 300, sortable: false, editable: true }],

url: someUrl,

postData { somePostData },

datatype: 'json',

mtype: 'POST',

jsonReader: { repeatitems: false, id: '0'}

scrollrows: true,

cellEdit: false,

cellsubmit: 'clientArray', // I don't remember why this is here

autoencode: true,

beforeRequest: beforeRequestFunc,

onSelectRow: onSelectRowFunc, // calls 'editRow'

afterInsertRow: someMiscProcessingFunc

This implements a somewhat enhanced editor for a property bag. The value field is where occasionally some XML contents should be edited.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
29 Guest(s)

Currently Browsing this Page:
1 Guest(s)