Possible bug in processing custom-element fields in an edit form

[unle70]

Hi Tony,

I'm having some trouble with implementing a Custom Element and going through the jqGrid code I see something strange. Perhaps you can help to clarify whether this is a problem or not.

I'm trying to implement an HTML5 input with datalist. You even have a nice article written on this topic. But my element needs to work somewhat like a "select", returning a "key" instead of the actual value in the input. This means that the custom-value function is critical for reading the correct value out of this field.

When creating a Custom Element in form-edit mode, the HTML structure looks like this:

<td class="DataTD">
    <span class="FormElement">
        <input class="FormElement customelement">    <!-- This is added by my custom-element function -->
    </span>
</td>

As you can see, both the "span" and the "input" have the "FormElement" class.
Now my problem is in the "getFormData()" function of jqGrid (see below).

In line #11467 we pull out all the items with ".FormElement". This would include both the "span" AND the "input".
Then in line #11468 we pull out all the items with ".customelement" INSIDE the ".FormElement". When we do that for the "span", we get the "input" which is inside. But when we do that for the "input" itself, we get an EMPTY list!

Now the problem is that in line #11469 we check if the list is empty and if it is, we try to read the item as a "non-custom". Eventually we reach line #11508 and then just read the simple value out of the "input".
In my case, I see the custom-value function IS being called once and IS returning the correct data, but eventually jqGrid is sending the raw value of the input item to the server.
Since we are reading the value for the same "name" twice, the later will override the former. Eventually the value received from the custom-value function will be overridden.

Is this a bug?

jqGrid/js/jquery.jqGrid.js

Lines 11465 to 11509 in a00419f

	function getFormData(){
	var a2 ={}, i;
	$(frmtb).find(".FormElement").each(function() {
	var celm = $(".customelement", this);
	if (celm.length) {
	var elem = celm[0], nm = $(elem).attr('name');
	$.each($t.p.colModel, function(){
	if(this.name === nm && this.editoptions && $.jgrid.isFunction(this.editoptions.custom_value)) {
	try {
	postdata[nm] = this.editoptions.custom_value.call($t, $("#"+$.jgrid.jqID(nm),frmtb),'get');
	if (postdata[nm] === undefined) {throw "e1";}
	} catch (e) {
	if (e==="e1") {$.jgrid.info_dialog(errors.errcap,"function 'custom_value' "+rp_ge[$(this)[0]].p.msg.novalue,rp_ge[$(this)[0]].p.bClose, {styleUI : rp_ge[$(this)[0]].p.styleUI });}
	else {$.jgrid.info_dialog(errors.errcap,e.message,rp_ge[$(this)[0]].p.bClose, {styleUI : rp_ge[$(this)[0]].p.styleUI });}
	}
	return true;
	}
	});
	} else {
	switch ($(this).get(0).type) {
	case "checkbox":
	if($(this).is(":checked")) {
	postdata[this.name]= $(this).val();
	} else {
	var ofv = $(this).attr("offval");
	postdata[this.name]= ofv;
	}
	break;
	case "select-one":
	postdata[this.name]= $(this).val();
	break;
	case "select-multiple":
	postdata[this.name]= $(this).val();
	postdata[this.name] = postdata[this.name] ? postdata[this.name].join(",") : "";
	break;
	case "radio" :
	if(a2.hasOwnProperty(this.name)) {
	return true;
	} else {
	a2[this.name] = ($(this).attr("offval") === undefined) ? "off" : $(this).attr("offval");
	}
	break;
	default:
	postdata[this.name] = $(this).val();
	}

[unle70]

Just a small update:
As I mentioned above, I saw the reference article (below) as for how such a custom element should be constructed. In that article it said that the "input" element should have a "FormElement" class. Now I tried to remove this class from the "input" element so that only the "span" would still have it. Looks like it works better.

https://guriddo.net/?kbe_knowledgebase=using-datalist-drop-down-menu-in-form-edit

[tonytomov]

I'm just going to ask - you why you set the input with this class?
I will go to read the article.

Thanks anyway.

[tonytomov]

Thanks Udi,

This was definitely wrong setting in the input. The reason that it was set wrong was to preserve the css style for the input missing that it not should be set.

I have fixed both the code and the article.

Thank you very much again.

Tony.