JQgrid Syntax error, unrecognized expression on return value from custom_value function

Question

For a simple view of problem please check: http://jsfiddle.net/9bmrjnwe/2/ (to generate the error: click on any row for editing. Then click on alternative row and then click back on the previously edited row. The error will popup.

Thanks

I'm new to JQuery. I have a JQgrid on my webpage containing a custom control while in editing mode. This custom control basically is a "html select" with select2. here is the relevant code of the JQgrid column:

        editoptions: {
            custom_element: function (value, options) {

                var val = $(value);
                var output = [];
                output.push("<select id = 'JQGridSelectCol1' width=900>");
                output.push('<option value= 101> ABC & XYZ </option>');
                output.push('<option value= 102> ABC XYZ </option>');
                output.push("</select>");
                var selectText = output.join('');

                $OuterDiv = $("<div id='SelectDivCol1'></div>");
                $OuterDiv.append(selectText);

                $select = $OuterDiv.children("#JQGridSelectCol1");

                var value2 = $("#vEntries").jqGrid('getCell', lastSel, 'Code');
                $select.val(value2);

                return $OuterDiv;

            },
           custom_value: function myvalue(elem, operation, value) {
                if (operation === 'get') {
                    return $(elem).find(":selected").text();
               }
           },

Now everything is working fine until I click on a row where in that column the selected text of contains ampersand character (&) and an error pops up with message: "Syntax error, unrecognized expression: ABC & XYZ" where "ABC & XYZ" is my selected text of . I tried to debug through Chrome and found the error on this line:

https://github.com/tonytomov/jqGrid/blob/c2ceeced1230ab7e91570c3d9a1400f3e7f0f8ed/js/grid.common.js#L490

Can anyone guide me in this regard?

Thanks

Answer 1

The error is in the line

var val = $(value);

of custom_element. You should remove the line. If you need to get the value from the cell you need use something like $OuterDiv.append($(selectText).val(value)); instead of $OuterDiv.append(selectText);, but you should take in consideration that

Moreover I recommend you remove all ids from HTML elements created in custom_element to be sure that you will never have id duplicates.