Alexandru Severin Alexandru Severin - 3 months ago 11
Javascript Question

Value of dyanamic select in jqGrid not being submitted

I'm trying to create a grid with a column of type select, having dynamic options. The options are populated after the Edit Form is displayed.

My idea was to use the

dataInit
event as described in this answer.

The model for the column is:

{name: 'bad', index: 'bad', editable: true, edittype: 'select',
editoptions: {
dataInit: function(elem) {
setTimeout(function() {
$(elem).empty()
.append("<option value='1'>Option 1</option>")
.append("<option value='2'>Option 2</option>");

}, 50);
}
}


The options are correctly populated in the form, but when submitting, the value of the select field is not sent to the controller. I have used the
beforeSubmit
event to display the
data
object being sent:

beforeSubmit: function(data, id) {
alert(JSON.stringify(data));
// Alerts: {"":"1","list_id":"_empty"}
// Notice that "" should be "bad"
}


Test it yourself: http://fiddle.jshell.net/6zaHp/137/

Answer

I would recommend you to use value: {} for the select, which will be build dynamically.

{name: 'bad', editable: true, edittype: 'select',
  editoptions: {
    value: {},   // <-- Added this line
    dataInit: function(elem) {
      setTimeout(function() {
         $(elem).empty()
                .append("<option value='1'>Option 1</option>")
                .append("<option value='2'>Option 2</option>");
      }, 50);
   }
}

Without the setting jqGrid don't set some required attributes like the name attribute on the <select>. The name attribute will be used to build the property name of the resulting JSON data sent to the server.

See updated the corresponding demo here: http://fiddle.jshell.net/6zaHp/139/

Comments