We Keep Coding

How to detect select onChange in a row cell

I am creating a dynamic table using java script and jquery, one of my project requirement is a select box in a row cell,
From the this SO link i am able to place a on click listener on a table row which gives me id of table row and cell(tr and td) but i am not able to detect select onchange i have also tried "jQuery get value of select onChange" but it is also not working in my case!!
My problem is
How to detect select on Change in a row cell as i have to update that
changed data in database?
thanks in advance!!!!!

I believe this will get everything you'll need for your database (value selected, cell and row it was selected in)... something like:
JSFiddle
$("td select").on("change", function() {
var value = this.value;
var $cell = $(this).parent();
var $row = $cell.parent();
alert("Selected ["+value+"] in cell ["+$cell.index()+"] of row ["+$row.index()+"]");
});

$(document).on('change','td',function(){
//Do your abacadabra!
});

HTML: Get value from input with no ID

Been looking around and I cant seem to find an answer to this so maybe im wording it wrong but here it goes.
So I have a table displaying data from a database. In jQuery I have made it so a row can be added with empty inputs and then submitted to the database, this works fine.
I am now attempting to be able to edit it. So each row will have a button to edit that row, the button will put the row values into inputs so you can change the value and update the database. How can I do this? I was looking into using this here but Im not sure how I can get the value of the input boxes without them having some sort of ID.
jQuery I was trying to use:
$('#tbl').on('click','.xx',function() {
$(this).siblings().each(
function(){
if ($(this).find('input').length){
$(this).text($(this).find('input').val());
}
else {
var t = $(this).text();
$(this).text('').append($('<input />',{'value' : t}).val(t));
}
});
});
Am I over thinking this? Should I just be grabbing the values and then putting them in pre-made input boxes?
Update:
HTML:
sb.AppendLine("<table style='width: 80%;'>")
sb.AppendLine("<tr class='inputRowbelow'>")
sb.AppendLine("<td style='width: 20%;' class='ui-widget-header ui-corner-all'>Area</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Details</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Options</td>")
sb.AppendLine("</tr>")
For Each w In workItems
sb.AppendLine("<tr>")
sb.AppendLine("<td>" & w.area & "</td>")
sb.AppendLine("<td>" & w.details & "</td>")
sb.AppendLine("<td><a href='#' class='fg-button ui-state-default ui-corner-all edit'><img src='/images/spacer.gif' class='ui-icon ui-icon-pencil' /></a></td>")
sb.AppendLine("</tr>")
Next
sb.AppendLine("</table>")

There are a couple of ways to do this, including changing your VB code to add extra data to the html, but I will answer this from a pure javascript/JQuery solution.
First of all you need to handle the click event for each edit button, after that you find the matching row, and then you can get the first to td elements of that row...
$(".edit").click(function(e){
e.preventDefault();//prevent the link from navigating the page
var button = $(this);//get the button element
var row = button.closest("tr");//get the row that the button belongs to
var cellArea = row.find("td:eq(0)");//get the first cell (area)
var cellDetails = row.find("td:eq(1)");//get the second cell (details)
//now you can change these to your inputs and process who you want
//something like this...
ConvertToInput(cellArea, "area");
ConvertToInput(cellDetails, "details");
});
function ConvertToInput(element, newId){
var input = $("<input/>");//create a new input element
input.attr("id", newId);//set an id so we can find it
var val = element.html();//get the current value of the cell
input.val(val);//set the input value to match the existing cell
element.html(input);//change the cell content to the new input element
}
Here is a working example
From that you can then do the saving that you say you have already implemented, using the ID values of each field to get the values to save.

Instead of using a For Each ... in ... Next loop, use a a For loop with a counter. give each button and each row an ID with the current counter value at the end. You can then use Jquery to make each row editable separately, because each row has a row number now.

How to get the selected row id in javascript?

I'm trying to use the following JavaScript function to get a particular cell value from a jqgrid upon click.
In the below function #datagrid is the table where the jqgrid is stored in.
$("#datagrid").click(function(){
var selr = $("#datagrid").getCol('companyid');
alert(selr);
});
My problem is when I click the jqgrid it will show ALL row id's from the jqgrid in the alert message, but I only need a particular companyid which was selected from the jqgrid. How do I make this work?

You should use getCell function to read the value from the cell identified by row id.
So, You should try something like this:
$("#datagrid").click(function(){
var grid = jQuery('#datagrid');
var sel_id = grid.jqGrid('getGridParam', 'selrow');
var myCellData = grid.jqGrid('getCell', sel_id, 'MyColName');
});

How to uncheck all the checkbox in tablesorter with pagination functionality

I have been tortured by this for quite a while.
Because of table sorter pagination will completely remove the invisible rows from the table for faster sorting. I could not get the checkbox in each row to work as my desired.
Here is my jsfiddle ->
http://jsfiddle.net/NcqfY/3/
click the variable trigger to bring up the table
Basically what I want to do is get the id for all selected rows and pushed them into an array selectedID. Empty selectedID array when the report is created (or the "create report" button is clicked). So after I clicked the button, I hope that all the checkboxes in the table should get unchecked. I am using the following code:
$('table.tablesorter tbody tr').find('input[type=checkbox]').prop('checked', false);
// I can only uncheck the boxes in current page
However I can only uncheck the boxes in current page, not include the pages that are invisible. This really gives me hard time to get the correct ID for selected rows.
Anyone could help me out would be greatly appreciated!

You had some errors in part of your javascript:
$('table.tablesorter tbody').on("click", "tr", function(event) {
if (event.target.type != 'checkbox') {
$(':checkbox', this).trigger('click');
var id = $(this).attr('id');
if (selectedID.indexOf(id) == -1) {
selectedID.push(id);
} else {
var index = selectedID.indexOf(id);
selectedID.splice(index, 1);
}
}
});
I corrected them for you and it seems to work fine:
!== --> !=
=== --> ==
var id = $(this).attr('id') --> var id = $(this).attr('id');
edit: the above was not working for me so I assumed that was the issue, but to answer your question:
$($(".tablesorter")[0].config.rowsCopy).each(function() {
$(this).find('input[type=checkbox]').prop('checked', false);
});
this will un-check all of the checkboxes in the table, even the hidden ones

According to the documentation of tablesort's pager, you can do this:
var t = $('table')
// disabling the pager will restore all table rows
t.trigger('disable.pager');
// ---do your thing---
// restore pager
t.trigger('enable.pager');
This seems to work, granted that you don't omit the pager's size selector (if you do, it throws errors).
I've updated your JSFiddle: jsfiddle.net/NcqfY/6/

jquery DataTables.net plugin: how to ignore specific rows when sorting

After a long exhausting search, I have found no answer to my question anywhere. Basically I have dynamically creating a table based on inputs by a user and also inserting a row with only a button after every 4th entry in the table. What I need is for the sorting function to ignore the rows with the button and leave them in place while sorting the rest of the table. Does anyone know if this is even possible?

You don't - what to do is use DataTables fnDrawCallback to insert your fourth row on each draw. DataTables will always empty the <tbody> element on each draw, so this would be required anyway.

"fnDrawCallback": function (oSettings) { }
var rows = $('.searchResultRow');
rows.each(function (index) {
if (index == 4 || index == 9) {
var insertLearn = $("<tr></tr>").addClass("searchResultRow ");
insertLearn.append(buildCell().attr('colspan', 9).html("<img src='../img/LearnMoreAnimated_v1-1.gif' />"));
$("#results_table > tbody > tr").eq(index).after(insertLearn);
}
});
}
was how I was able to get it....thanks for the help in pointing me in the right direction.