jqxGrid Error Unrecognized expression

[rameshgurunathanMember]

Hi there,

I used jqxGrid in one of my .net project. The grid has a checkbox column. It is editable. when I click on the checkbox column, It shows error like this

Microsoft JScript runtime error: Syntax error, unrecognized expression: .jqx-checkbox-ctrl=~/Admission/AdmissionRequestNew.ascx.

can you guys help me to fix it?. I expect reply ASAP.

Thanks in advance.

Ramesh Gurunathan

[Peter StoevKeymaster]

Hi Ramesh,

We can’t reproduce the reported behavior with the provided information. Please, send us a small sample to support@jqwidgets.com which we will be able to run locally. In addition, make sure that you use jQuery 1.6+ version and jQWidgets 2.5.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[rameshgurunathanMember]

Thanks for your quick reply

Here is my sample code:

$(document).ready(function () {
//debugger
var theme = getTheme();

var Batchprofile = {};

var perioditems = $(“#ddlPeriodjqx”).jqxDropDownList(‘getItems’);
var programItems = $(“#cmbProgramjqx”).jqxComboBox(‘getItems’);
var streamItems = $(“#Regulationjqx”).jqxDropDownList(‘getItems’);
var centreItems = $(“#cmbCentrejqx”).jqxComboBox(‘getItems’);
var ReqTypeItems = $(“#ddlRequestTypejqx”).jqxDropDownList(‘getItems’);
if (perioditems.length > 0) {
var periodId = $(“#ddlPeriodjqx”).jqxDropDownList(‘getSelectedItem’);
Batchprofile.PeriodID = periodId.value;
}
else {
Batchprofile.PeriodID = -1;
}

if (programItems.length > 0) {
var programId = $(“#cmbProgramjqx”).jqxComboBox(‘getSelectedItem’);
Batchprofile.ProgramID = programId.value;
}
else {
Batchprofile.ProgramID = 0;
}

if (streamItems.length > 0) {
var streamId = $(“#Regulationjqx”).jqxDropDownList(‘getSelectedItem’);
Batchprofile.StreamID = streamId.value;
}
else {
Batchprofile.StreamID = -1;
}

if (ReqTypeItems.length > 0) {
var requestId = $(“#ddlRequestTypejqx”).jqxDropDownList(‘getSelectedItem’);
Batchprofile.RequestID = requestId.value;
}
else {
Batchprofile.RequestID = -1;
}

if (centreItems.length > 0) {
var centreId = $(“#cmbCentrejqx”).jqxComboBox(‘getSelectedItem’);
Batchprofile.CentreID = centreId.value;
}
else {
Batchprofile.CentreID = -1;
}

Batchprofile.StudentID = -1;
var source =
{
datatype: “json”,
datafields: [
{ name: ‘Selection’ },
{ name: ‘ID’,type: ‘int’ },
{ name: ‘FeeComponentName’ },
{ name: ‘Amount’ },
{ name: ‘Quantity’, type: ‘int’ },
{ name: ‘PaidAmout’, type: ‘int’ }
],
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failder.
commit(true);
}
};

$.ajax({
url: locationUrl + ‘/AdmissionRequest.asmx/getFeeComponentsJD’,
type: ‘POST’,
dataType: ‘json’,
data: ‘{“Batchprofile”:’ + JSON.stringify(Batchprofile) + ‘}’,
async: false,
cache: false,
contentType: ‘application/json; charset=utf-8’,
success: function (data) {
source.localdata = data.d;
},
error: function (xhr, status, error) {
alert(JSON.stringify(xhr));
}
});

var dataAdapter = new $.jqx.dataAdapter(source);

// initialize jqxGrid
$(“#RequestCompGrid”).jqxGrid(
{
width: 680,
source: dataAdapter,
editable: true,
theme: theme,
selectionmode: ‘singlecell’,
columns: [
{ text: ‘Select’, datafield: ‘Selection’, columntype: ‘checkbox’, width: 67 },
{ text: ‘ID’, datafield: ‘ID’, columntype: ‘textbox’, width: 80 },
{ text: ‘Fee Component Name’, datafield: ‘FeeComponentName’, columntype: ‘textbox’, width: 500,editable: false
},
{ text: ‘Fees’, datafield: ‘Amount’, columntype: ‘numberinput’, width: 100, cellsformat: ‘d2’
, cellsalign: ‘right’,editable: false
},
{ text: ‘Quantity’, datafield: ‘Quantity’, columntype: ‘textbox’, width: 80 },
{ text: ‘Paid Amount’, datafield: ‘PaidAmount’, columntype: ‘textbox’, width: 80 }
]
});

$(‘#RequestCompGrid’).jqxGrid(‘hidecolumn’, ‘ID’);
$(‘#RequestCompGrid’).jqxGrid(‘hidecolumn’, ‘Quantity’);
$(‘#RequestCompGrid’).jqxGrid(‘hidecolumn’, ‘PaidAmount’);
$(‘#RequestCompGrid’).jqxGrid({ autoheight: true });

// // events
// $(“#RequestCompGrid”).bind(‘cellbeginedit’, function (event) {
// var args = event.args;
// $(“#cellbegineditevent”).html(“Event Type: cellbeginedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
// });

// $(“#RequestCompGrid”).bind(‘cellendedit’, function (event) {
// var args = event.args;
// $(“#cellendeditevent”).html(“Event Type: cellendedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
// });
});

// var rowEdit = function (row) {
// //if (row == 0)
// return false;
// }

// select or unselect rows when the checkbox is checked or unchecked.
$(“#RequestCompGrid”).bind(‘cellendedit’, function (event) {

if (event.args.value) {
$(“#RequestCompGrid”).jqxGrid(‘selectrow’, event.args.rowindex);
}
else {
$(“#RequestCompGrid”).jqxGrid(‘unselectrow’, event.args.rowindex);
}
});

[Peter StoevKeymaster]

Hi Ramesh,

How can we run that code locally? In addition, here’s a sample with CheckBox selection: customrowsselection.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[smefferdMember]

I have had the same experience with the “unrecognized expression: .jqx-checkbox-” javascript error and have provided steps to reproduce it below. It occurs whenever there is a query string in addition to the theme name as part of the url. It seems that one of the scripts (maybe jqcheckbox.js) is doing something with the entire query string but is only expecting a theme name. Since this occurs by just passing in extra query string information in the url, the problem can even be reproduced on the jqwidgets demo site with the following steps.

1) Open row selection example in a page by itself with the following url (note this url is a link on the custom row selection demo page)

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customrowsselection.htm?classic

2) Open browser javascript error console and clear the existing logging

3) Observe correct functionality by clicking the checkboxes and seeing rows selected. There is no output in the javascript error console

4) Use the following url to load the page with extra query string in the url. Note the addition of “&d=LookInErrorConsole” to the url query string. This functionality should be supported for links and forms which use GET method and url to expose parameters to the dynamic page containing the jqxGrid widget.

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customrowsselection.htm?classic&d=LookInErrorConsole

5) Open browser javascript error console and clear the existing logging

6) Observe error condition by clicking a checkbox. The row does not appear to be selected and the following error message appears in the javascript error console: “Error: Syntax error, unrecognized expression: .jqx-checkbox-classic&d=LookInErrorConsole”

[Peter StoevKeymaster]

Hi smefferd,

The demos URL expects a Valid Theme name. That is how the demos work, but this is not related to the widgets and how the themes work. To apply a theme to a widget, set its “theme” property to point to the theme’s name and include the theme’s CSS file. I also suggest you to take a look at the jquery-grid-styling-and-appearance.htm help topic which demonstrates how is expected a theme to be applied.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[smefferdMember]

Ok, so I see your point that the theme parameter in the query string is unique to the demo site. My issue and what I’m trying to point out actually doesn’t have anything to do with themes. In my application I am not specifying a theme at all in the url. The only reason I mentioned theme is because the demo on the jqwidgets web site uses the theme parameter in the query string and I was using the demo page as an example of how to reproduce the problem.

My issue only has to do with the checkbox widget in the grid component when the page address contains an = (equals sign) in the url query string. If the checkbox widget is removed from the layout or left unchecked or the query string in the url is removed the problem never occurs. When a url query string containing an = (equals sign) is part of the current page address as shown in the browser url address bar and the checkbox is checked from an unchecked state, a javascript error occurs. I’m thinking this might be because the = as in the query string example url I provided is not evaluating to valid javascript expression somewhere it is being applied in the jqcheckbox.js. Also worth noting is that the error does not occur while deselecting a currently checked checkbox..

The error manifests on the demo even if you leave out the theme name but still specify a query string with a name=value parameter. If it helps to clarify the issue, reread my previous post ignoring all mentions of theme, and run the test case steps substituting the following url in step 4. You should be able to reproduce this and agree that it is a problem.

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customrowsselection.htm?d=LookInErrorConsole

[smefferdMember]

Also notice in the first post of this thread by rameshgurunathan that the error message reported also contains a name=value (with an = equals sign). I would say very confidently that the url used in that application contained “?ctrl=~/Admission/AdmissionRequestNew.ascx”

[Peter StoevKeymaster]

Hi smefferd,

I am afraid that you did not understand my post. All our samples use a getTheme function for getting the theme’s name and load the CSS style dynamically, that’s how they work. You should not use the getTheme function in your projects. You should not also pass wrong parameters in our demos because the following happens: getTheme tries to load a theme based on your invalid parameter and as you have passed invalid parameter, error will occur. Please, see the help topic I posted in my previous post. It shows how is expected a theme to be applied.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[smefferdMember]

Thank you for the clarification. I removed all references to themes in my code and now it is working as expected when url parameters are present. I was not even interested in using themes, but I just assumed it was necessary since it was in the example code on the demo site. Thanks for your persistence and expedience in responding to these inquiries.

[Author]

Posts