Changing value of dropdown option list on change (no submit button)
Changing value of dropdown option list on change (no submit button)
flan
Posts: 3Questions: 0Answers: 0
Hello,
I am building out new functionality within an existing application using DataTables. My setup involves grabbing data and definitions (pull-down menus, etc.) from the server side, using editable to edit individual cells on the client side (bServerSide is false), and posting changes via save buttons on the entire table.
This is generally working well, as long as I have the default "submit" button on the pulldown menu items. With a submit button, the changes are correctly saved to the cell/local table and my select list is updated. But my requirements are to remove that button, so I need to build a change event to update the field. It's close but I'm stuck on something -- basically it seems to be doing the update within the click event but the changes don't persist once the event is completed.
Here is my change code. It appears to grab the selected value, find the correct cell location, update the cell, etc. My menu option is selected. BUT...when it exits my event the cell pops back to my initial cell value and my original selection list/options.
[code]
$('#' + formId + ' tbody td form select').live('change', function (e){
sValue = $(this).val();
aCell = $(this).parent().parent().get(0);
aPos = oTable.fnGetPosition(aCell);
oTable.fnUpdate( sValue, aPos[0], aPos[1]);
$(aCell).text(sValue);
$("td.last-updated-cell", oTable).removeClass("last-updated-cell");
$(aCell).addClass("last-updated-cell");
});
[/code]
What step(s) am I missing to replicate the submit button on these option pulldowns within a cell?
I greatly appreciate any help or suggestions.
I am building out new functionality within an existing application using DataTables. My setup involves grabbing data and definitions (pull-down menus, etc.) from the server side, using editable to edit individual cells on the client side (bServerSide is false), and posting changes via save buttons on the entire table.
This is generally working well, as long as I have the default "submit" button on the pulldown menu items. With a submit button, the changes are correctly saved to the cell/local table and my select list is updated. But my requirements are to remove that button, so I need to build a change event to update the field. It's close but I'm stuck on something -- basically it seems to be doing the update within the click event but the changes don't persist once the event is completed.
Here is my change code. It appears to grab the selected value, find the correct cell location, update the cell, etc. My menu option is selected. BUT...when it exits my event the cell pops back to my initial cell value and my original selection list/options.
[code]
$('#' + formId + ' tbody td form select').live('change', function (e){
sValue = $(this).val();
aCell = $(this).parent().parent().get(0);
aPos = oTable.fnGetPosition(aCell);
oTable.fnUpdate( sValue, aPos[0], aPos[1]);
$(aCell).text(sValue);
$("td.last-updated-cell", oTable).removeClass("last-updated-cell");
$(aCell).addClass("last-updated-cell");
});
[/code]
What step(s) am I missing to replicate the submit button on these option pulldowns within a cell?
I greatly appreciate any help or suggestions.
This discussion has been closed.
Replies
I neglected to post the form back. Adding the following line to my code snippet above did the trick:
$(this).parents("form").submit();
Hopefully this helps someone out there...