I have the following jsfiddle that generates a YUI Datatable with checkboxes, but i have a problem getting the data of ids from the table after i click the Get Records button.
anyway to call the table from the javascript?
P.S : I am using YUI2 library as my project is using that
Using Checkbox Listeners
I hope this codes show what you need http://yuilibrary.com/yui/docs/datatable/datatable-chkboxselect.html
Edit:
I update your code for adding checkboxClickEvent for handling checkbox event in each of data row and use an array to keep all of the checked record id.
var selectedID = [];
myDataTable.subscribe("checkboxClickEvent", function(oArgs){
alert("check box clicked");
var elCheckbox = oArgs.target;
var oRecord = this.getRecord(elCheckbox);
if (elCheckbox.checked) {
selectedID.push(oRecord.getData("id"));
}
else {
selectedID.pop(oRecord.getData("id"));
}
oRecord.setData("check",elCheckbox.checked);
});
Detail of working code is here.
Related
I have 3 or more DataTables in my single page link below. i am using custom filter input for all DataTables.
Click Here for page
or copy this url - http://image.webspapa.in/test.php
This is working fine for 2nd and 3rd table but
whenever i filter first table , all the three got filtered. whats wrong in
this ?
Second why i am unable access variable dataTabel value in my second $(function(){})(console showing it undefined) while i have already defined it as global scope
var dataTabel;
$(function() {
var dataTabel = $('.dataTable').DataTable({"dom": 't<"bottom"ip><"clear">'});
$('.panel-heading input').keyup(function(){
var Tabel = $('.panel-heading input').index($(this));
dataTabel.tables(Tabel).search($(this).val()).draw();
});
});
$(function(){
console.log(dataTabel);
});
please See my full code in link provided, and help me. Thanks in advance
I am developing an MVC app in which I have created two tables in view dynamically. In each table first column contains ID and last column contains save button. On click of save button I'm passing this ID to my function. Now I want to check the button was clicked from which table so that I can perform operations. I have tried many solutions but did not work. Can anybody help?
function SaveDocument(_param) {
//alert(_param + "Add");
return;
var tableRow = $("td").filter(function () {
return $(this).text() == String(_param);
}).parent('tr');
tableRow.parent().attr('uid');
}
and I have also tried links like this but none of these work.
Edit : -
I have created fiddle for this here
You mentioned that you're creating tables dynamically, so I'm assuming your click event won't fire unless you delegate it.
Try adding a class say .save to the buttons and run the below code.
$(document).on('click', '.save', function(){
console.log($(this).closest('table'));
});
I've been trying to work on this for awhile now, and I'm at my wits end. I have a web form with a GridView control. The data source is a dynamically created DataTable, and I would like to do this without Template Fields if at all possible. My goal is to have 4 checkbox columns that the user can click to change the values. I just made the 4 columns data type bool so that they automatically show up as checkboxes. I know how to select a row with a little help from javascript, but being able to detect which column was clicked has thus eluded me.
Relevant code showing how I am currently selecting the row:
function getSelectedRow(row)
{
jQuery(row).children(":first").children(":first")[0].click();
}
Code Behind:
protected void gvReviewOrder_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
string onClick = "javascript: getSelectedRow(this);";
e.Row.Attributes["onclick"] = onClick;
e.Row.Style["cursor"] = "pointer";
}
}
The latest thing I have tried was using JQuery from the following thread:
Table row and column number in jQuery
Instead of using an alert, I was trying to update the clicked column index into a hidden field, so this is what my current Javascript function looks like:
$("td").click(function ()
{
var colIndex = $(this).parent().children().index($(this));
$("#hfColumnId").val(colIndex);
});
So hypothetically my hidden field "hfColumnId" should be updated when the cell is clicked, but that is not happening. Do I need to add code on my OnRowDataBound Event to add the click event first?
As you can probably guess, I'm still learning when it comes to web forms, and I'm just over my head right now. Any help would be much appreciated.
So to make a long question short, is there any way to return the column index when a cell is clicked via jquery from a GridView control?
Thanks in advance!
edit
I found this thread from last year with a solution, but they suggest setting EnableEventValidation to false, and I know this is not recommended. So if I could figure out how to implement that way without setting that to false it could be a potential solution maybe?
Get clicked cell index in gridview (not datagridview) asp.net
Possible solution is described in : http://www.codeproject.com/Tips/209416/Click-select-row-in-ASP-NET-GridView-or-HTML-Table :
Listing 1. Adding onClick attribute to the Table dynamically rendered by ASP.NET GridView
protected void GridView1_RowDataBound(Object sender, GridViewRowEventArgs e){
if (e.Row.RowType == DataControlRowType.DataRow){
// javascript function to call on row-click event
e.Row.Attributes.Add("onClick", "javascript:void SelectRow(this);");
}
}
and corresponding sample Javascript Function to perform some custom formatting of the dynamically rendered Table Row on click event (essentially implementing a Click event handler):
Listing 2. Javascript function to format Table Row onClick
<script type="text/javascript">
// format current row
function SelectRow(row) {
var _selectColor = "#303030";
var _normalColor = "#909090";
var _selectFontSize = "3em";
var _normalFontSize = "2em";
// get all data rows - siblings to current
var _rows = row.parentNode.childNodes;
// deselect all data rows
try {
for (i = 0; i < _rows.length; i++) {
var _firstCell = _rows[i].getElementsByTagName("td")[0];
_firstCell.style.color = _normalColor;
_firstCell.style.fontSize = _normalFontSize;
_firstCell.style.fontWeight = "normal";
}
}
catch (e) { }
// select current row (formatting applied to first cell)
var _selectedRowFirstCell = row.getElementsByTagName("td")[0];
_selectedRowFirstCell.style.color = _selectColor;
_selectedRowFirstCell.style.fontSize = _selectFontSize;
_selectedRowFirstCell.style.fontWeight = "bold";
}
</script>
Alternatively, instead of adding onClick attribute to each row of the table as per Listing 1, it's possible to implement this functionality with Javascript code snippet shown below:
Listing 3. Javascript Table Row onClick event handler
// ** table row click event **
function row_OnClick(tblId) {
try {
var rows = document.getElementById(tblId).rows;
for (i = 0; i < rows.length; i++) {
var _row = rows[i];
_row.onclick = null;
_row.onclick = function () {
return function () {selectRow(this);};
}(_row);
}
}
catch (err) { }
}
Practical implementation of the solution shown above (Listing 3) with complete Javascript code base can be found here: http://busny.net.
Client-side Javascript (or jQuery) scripting provides high responsiveness. This core solution could be further extended pertinent to the particular requirements. For example, individual CheckBoxes within the row object var can be addressed by using the following syntax:
row.cells[0].firstChild.checked
and so on.
Hope this may help.
So I have a form through which I add entries to my database, I am trying to use the same form
to update/edit existing records in the database.
My page consists of a form to add data and a table which shows existing data.
the existing data table has a column edit against each entry, the table is filled dynamically using php.
This is what I am trying to to, when the user clicks on edit button against any row, the data in that row should be filled up into the form automatically.
I made a jsfiddle here
The JS script I have tried:
$("#tableID").on("click", ".edit_button", function() {
var data = $(this).closest("td").siblings().map(function() {
return $(this).text();
}).toArray();
console.log(data);
}); // the event is not recognized. no action on clicking.
There a quite a few techniques I found here stackoverflow, but most of them donot respond to click event or they return null/empty values, Is that because the form is filled dynamically?
I am pretty new to web development, Any help would be appreciated. Thanks!
Note: the database contains more than 20+ records (dynamically added), In Jsfiddle I have shown only 1, to keep the code clean. sorry for the lack of css styling :P
$("#tableID").on("click", ".edit_button", function() {
var data = $(this).closest("td").siblings().map(function() {
return $(this).text();
}).toArray();
console.log(data);
});
Use like this may be it is helpful
$("#tableID").click( function() {
var data = $(this).closest("td").siblings().map(function() {
return $(this).text();
}).toArray();
console.log(data);
});
I have a table that is dynamically built using DOM. It has 10 cols, and on each row i have some data that i get from a websocket, text boxes and a submit button to add each row to the database.
How can i remove a row after i submitted it?
Someone mentioned jQuery but can't figure it out how to do that.
EDIT
I'm using Chrome and had problems with all the scripts below. this is how i resolved it:
instead of $('input') I used jQuery('input') all the scripts are working fine.
thank you for your help.
Try something like this...
$('input').click(function() {
$(this).closest('td').remove();
});
Demo: http://jsfiddle.net/wdm954/32W63/
EDIT:
Here is another way to do this...
$('table form').submit(function() {
// run some ajax here to do your database work
$(this).closest('td').remove();
});
You can do like this:
$(document).ready(function(){
//Assuming all your submit buttons have the same class
$(".submit").live("click", function(e){
var buttonHnd = $(this);
$.post("your-php-file.php",
{/* the data you want to post e.g. */ name: $("#name").val()},
function(data){
buttonHnd.parent().parent().remove();
}
);
});
});
var myTableRow = ... // Find the row however you like
myTableRow.parentNode.removeChild(myTableRow);
You might also be interested in my AJAXFetch jQuery plug-in. Among other things, it lets you treat a row of a table as a form and submit all the form elements in it using AJAX, swapping it out the row with the result from the server (usually the non-form version). I use it in many of my internal applications for in-place editing of data.
You could try something like:
// Simple bottom row removal
$('#myTable tr:last').remove();
// Removing n'th (ex. 3rd) row from the table
$('#myTable tr:eq(2)').remove();
Source: JQuery HowTo
you can use jquery' remove to remove it from dom...
http://api.jquery.com/remove/