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.
Related
I am attempting to populate a checkbox in a dialog based upon the checkbox in a selected table row. The page has multiple tables. The tables have the same columns and a variable number of rows. Each row has one checkbox. When clicking on the row's edit icon, I open a dialog window. I am attempting to set the property of the dialog property checkbox to the property of the row property and am not having success: I have read every jquery checkbox posting and tried the solutions. These are my last 2 tries:
$('.ui-icon-pencil').click(function(e) {
var initialRow = $(this).parent().parent();
var $thisFieldset = $("#bookmark-data-fieldset");
var urlid = $("td:first", initialRow).text();
/*default dialog checkbox to not checked*/
$('#dialoggoalstatus').removeAttr('checked');
var urlname = $("td:nth-child(2)", initialRow).text();
var newurlname = urlname.trim();
var goal_date = $("td:nth-child(3)", initialRow).text();
$('#bookmark-goaldate').val(goal_date);
/* populate the dialog checkbox with the property of the
row checkbox*/
$("#dialoggoalstatus").prop($("td:nth-child(4)",
initialRow).find(':checkbox').prop('checked'));
/* I also tried this*/
$("#dialoggoalstatus").prop($(initialRow).
find('td input:eq(4)').is(':checked'));
This did not work. Can you help me identify what I am missing?
In addition, I attempting to then populate the table with the selection of made in the dialog form.
I am using this:
var goalid = $("td:first", initialRow).text();
$("td:nth-child(2)",initialRow).text($("#namefield").val());
$("td:nth-child(3)", initialRow).text($("#datefield").val());
$("td:nth-child(4)", initialRow).
prop($( "#dialoggoalstatus").prop('checked'));
This also is not working.
Any help would be greatly appreciated.
I am saving all inputs in a form in the form of array into a variable.
Example: var data = $('inputs,select')
Now, I want to get selected index of dropdown using variable data.
Please help.
Edit: Added Fiddle for reference
Fiddle
If I have understood your question properly, you save a jQuery object with every input and select in a variable. To get the selected index of a dropdown you would have to iterate over your variable to find out if its a select or a regular input, and then get its selected index.
//loop over every dom element in the variable
data.each(function () {
//if its a select
if ($(this).is("select")) {
//find its selected index using native DOM and do something with it
$(this)[0].selectedIndex;
}
});
You probably want to add $( "select option:selected" ).text(); to select the selected item.
This was from: http://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/
Hi im trying to check to see if a row is selected in jqGrid and if it is then toggle the selection.
I know i can deselect the current row using
`.jqGrid('setSelection', rowid, false);`
and
.jqGrid('resetSelection');
applys this to every row in the grid. But i need to check if the row is already selected before i deselect it.
But what i need to do is an if statement that checks if the selected row is selected and if so do some code but i don't know how to get the true or false value from the row. I've tried using and alert to see what the setSelection reruns but it just displays [object object]. Thank you for any help.
You can use .jqGrid("getGridParam", "selrow") and .jqGrid("getGridParam", "selarrrow") (be carefull in the strange name of the option) to get internal options which hold the last selected rowid and the array of rowids of selected rows. So, if you need to check whether the row with the rowId is selected and you use multiselect: true option, then you can use the following code template
var selRowIds = $("#grid").jqGrid("getGridParam", "selarrrow");
if ($.inArray(rowId, selRowIds) >= 0) {
// the row having rowId is selected
}
This is kind of a strange question, but this requirement came up about showing only those values inside a table which were selected using a dropdown list, I used dataTable plugin to display this data and to achieve the requirement I used the search[Filter plugin] feature. So whenever I selected any value from my dropdown list I entered it in the search input tag of dataTable. However, filtering of the data would not occur unless I changed the added data myself.
Have used the following script to add the selected value in the search box of DataTable; this function is triggered using onchange in the HTML tag:
function changeService(val) {
var service = val;
$('#example_filter').find('input').val(service);
}
This function adds the value in the required search input tag - I can see the value in the textbox; but the data within the dataTable is not filtered until I change this...
Instead of trying to hack around the ui, why not use the DataTables api for this:
http://datatables.net/api#fnFilter
So when you're dropdown list changes, you could call the fnFilter function on your datatable:
$('#dropdownlist').on('change', function() {
var val = $(this).val();
var dataTable = $('#table').dataTable();
dataTable.fnFilter(val);
});
i am using this method me return last selected row and i want current selected row.
//JavaScript
$.subscribe('cellselect', function(event, data) {
var sel_id = jQuery("#gridtable").jqGrid('getGridParam', 'selrow');
alert(sel_id);
});
//JQgrid event
onCellSelectTopics="cellselect"
In the Documentation says: "selrow: string This option is readonly. It contains the id of the last selected row". here
The selrow option will retrieve the currently selected row in the grid. Are you running into trouble when using this option in your application code?
For what it's worth, if you did want to get the ID of the previously selected row then you would have to add additional code to your application.
selrow will return the currently selected row index if you are not using paging. If paging is used it will return null.
See this link for more information.