Develop Reference

datatables dropdown combobox

Im using Datatables from https://datatables.net.
One of the columns on the datatable has a dropdown combobox as cell data.
When I push a button, I need to get the selected value of the combobox inside the selected row.
$.each($("#prize_selector tr.selected"), function () {
var row = prizes_table.row(this).data();
row[3].$('select').options[row[3].$('select').selectedIndex].id;
[...]
});
but no success. How can I access the DOM select inside the cell, without traversing all the input selects on the table? (there are a lot).
edit the console throws row[3].$ is not a function

I assume you're using Select extension to select rows.
Below is a correct way to access select element for each selected row:
table.rows({ selected: true }).every(function(){
var $select = table.$('select', this.node());
var $option = table.$('select option:selected', this.node());
console.log($select.val(), $option);
});
See this example for code and demonstration.

How to refresh HTML field on selecting the drop down list?

I want to get html field (a drop down list) refreshed as I get it by default on clicking the chart type from the (chart type) drop down list. The default selection after selecting a chart is shown below: (if I select "Pie Chart 2D" from the drop down list)
Now if I select another similar chart "Pie Chart 3D" (which has same drop down field) and also I select the field data, then the image is as below:
PROBLEM
Now if I select the "Pie Chart 2D" back again from the drop down list I get this 2nd image field set already. I want the field to be refreshed as it is shown in the 1st image of Pie Chart 2D. Therefore, how should I refresh the field?
NOTE:
The field that I want to refresh to default is "Define X-Axis" drop down list.
I hope I have cleared my problem, in case of confusion in the understanding I will be replying soon. I hope it is not difficult to solve!
Thanks for your time.

You can add an onchange event listener to your select. If you have a function updateDiv() in JS that would update your <div> element that you want to call with a change of the <select> element:
In HTML:
<select id="chartType" onchange="resetFieldToDefault();">
In jQuery:
$("select#chartType").change(resetFieldToDefault);
In (plain) JS:
document.getElementById("chartType").addEventListener("change", resetFieldToDefault);
EDIT
I don't think I answered the question correctly above. I believe the question was more along the lines of, How could I deselect all the options in that field (once a select field was changed)? So I only answered the first part of the question, but the second part about resetting the other <select> element remains unsettled. (Am I correct?)
To do this, add a listener as shown above. And then, add the (plain) JS function:
var resetFieldToDefault = function() {
var selectedOptions = document.getElementById("xAxisSelect").selectedOptions;
for(var i = 0; i < selectedOptions.length; i++)
selectedOptions[i].selected = false;
}

I would do something like this:
$("#chartType).on("change", function() {
refreshDivs(this.val());
});
function refreshDivs(value) {
if(value=="Scatter Chart") {
$("#divEventCategory").hide();
$("#divEventSubCategory").hide();
} else if ((value=="Bubble Chart") {
$("#divEventCategory").show();
$("#divEventSubCategory").show();
}
}
If you need to refresh the content of the dropdowns/listboxes based on the choice, just add the code in the corresponding section as well.

the combo box editor in cell editing grid does not deselect after choosing a value

I am having an editor grid with four columns and i am trying to implement a sql builder. The where statement will have four fields namely "condition1" "operator" "condition2" "and/or".
I am using a combo box to select between and/or/none and there is a delete button as row action. when I delete a row and if that row is the last,the value of and/or combo in the previous row will be set as "none". I am able to achieve that but the problem is , when the combo box is selected in the previous row and i delete the row next to it, the value changes in the store but not in the view. the value changes in the view when the combo box is not selected in the previous row.
my code is :
if(rowIndex == grid.all.endIndex)
{
//get the previous record and set the vale to none
var previousRowRecord = grid.store.getAt(rowIndex-1);
previousRowRecord.set('andor','NONE');
//delete the current record
grid.getStore().removeAt(rowIndex);
grid.getView().refresh();
}
else
{
grid.getStore().removeAt(rowIndex);
}
How to deselect a combo box once the value is selected ? i think this can be a work around

Not sure if I understood you correctly (a screenshot would help out a lot here), but it may sound like the combo box is still in the edit state when you are deleting the row below. If so, try the following:
First make sure the grid editor plugin has an id:
plugins: [{
ptype: 'cellediting',
...
pluginId: 'celleditplugin'
}],
Then, before deleting the row, do the following:
yourGrid.getPlugin('celleditplugin').completeEdit();

Setting Combobox Value for RowEditing Editor in Extjs

I am kinda facing an interesting problem where my combobox is behaving weird.
I have a grid with three columns ID , Name , Associated Part.
I have enabled Rowediting plugin and editors for ID is textfield(EditID), Name is textfield(EditName) and Associated Part is combobox(EditPartCombo).
I have a button called Update.
When I select any row in the grid and press Update, rowediting starts at that exact position.
EditID and EditName shows default values that has been selected but EditCombo populates as Blank.
Code on Update button:
{
text: 'Update Part',
handler: function(btn){
var grid = btn.up('grid');
var selection = grid.getSelectionModel().getSelection();
if(selection.length > 0){
alert(selection[0].get('ID_PART'));
Ext.getCmp('EditPartCombo').setValue(selection[0].get('ID_PART'));
var rowEditing = grid.getPlugin('RowEditPlugin');
var rowno = grid.store.indexOf(selection[0]);
rowEditing.cancelEdit();
rowEditing.startEdit(rowno, 1);
}
else{ Ext.Msg.alert('Error' , 'Please Select any Row'); }
}
Following alert gives me proper value of selected column:
alert(selection[0].get('ID_PART'));
but somehow it does net set the value to combobox.
Same thing works fine if I open a new pop-up window and apply the value to combobox created on window.
Please help.
Thanks in advance.

Jquery Chosen is updating cascading selects on step behind native select boxes

I am using jquery chosen on 4 select boxes that are being populated via database.
The select box ids are: #Year_395, #Make_395, #Model_395, #Trim_395.
I am using the following script to "cascade" them so that the second select box's options depend on what option has been selected in the first, the options for the third are dependent on the second selection etc.
function cascadeSelect(parent, child){
var childOptions = child.find('option:not(.static)');
child.data('options',childOptions);
parent.change(function(){
var parentValue = (this.value).replace(" ", "_");
childOptions.remove();
child
.append(child.data('options').filter('.sub_' + parentValue))
.change();
})
childOptions.not('.static, .sub_' + parent.val()).remove();
}
The native select boxes are cascading correctly. The problem is that when I implement jQuery Chosen, the new select boxes update, but do so one step behind the native boxes. For now I am using the below code to update the options for jQuery Chosen's replacement select box display. This should cause jQuery Chosen to update #Trim_395 as soon as an option for #Model_395 has been selected.
$("#Model_395").chosen().change(function(){
$("#Trim_395").trigger('chosen:updated');
});
Here is the link to the build site:
You will see that if you select your year, make, and model, no trim options will be available, as if you have yet to select the model. If you then select another model, the options for the first model you selected will be displayed. Selecting a third model will display the trim options for the second, etc.

I figured it out on my own. jQuery Chosen was updating before the hidden select boxes had time to update so:
$("#Model_395").change(function(){
wto = setTimeout(function() {
$("#Trim_395").trigger('chosen:updated');
}, 500);
});
Solved the problem. Thanks to anyone who looked :)