We Keep Coding

Toggle Class issue when Event Handlers are needed

I have a couple of td elements I would like to make editable and then when a button is clicked have them revert to static. The problem is getting these elements to toggle back and forth. How do I accomplish this in the easiest way possible?
It seems recursive where I would click edit -> replace the elements with input elements -> give button static function handler -> click button -> replace the input with static content -> add event handler. The only issue I have is attaching the handler to the newly created elements.
Javascript:
// how do I encapsulate this into its own function? Seems recursive.
$('.edit-me').click(function(){
// remove the other editable fields.
// For some reason the second toggle errors out. - Why?
makeEditable(this);
$(this).toggleClass('edit-me');
$(this).toggleClass('static-me');
});
// attach a handler to the newly created elements
$('.static-me').click(function(){
// this is not working because newly created items do not have the event associated to them.
console.log("HERE");
makeStatic(this);
$(this).toggleClass('edit-me');
$(this).toggleClass('static-me');
});
}
$('.delete-me').click(function(){
pair_delete(this);
});
function makeEditable(obj){
// replace the elements with an editable element.
$(obj).parent().children('td.editable').each(function(index, item){
$(item).html('<input class="form-control edit-mode editing" data-field="' + $(this).attr('data-field') + '" value="' + $(this).html() + '" >');
// toggle for event handling.
$(item).removeClass('editable');
$(item).addClass('edit-mode');
});
$('.editing').change(function(){
// create the update
pair_update(this);
});
}
function makeStatic(obj){
// makes the row static.
$(obj).parent().children('td.edit-mode').each(function(index, item){
// replace with input field.
$(item).html('<td class="editable" data-field="'+ $(item).attr('data-field') +'">' + $(item).find('.editing').val() + '</td>');
$(item).addClass('editable');
$(item).removeClass('edit-mode');
});
}
HTML:
<td class="editable" data-field="pair_name"><?=$pair['pair_name']?></td>
<td class="editable" data-field="email_name"><?=$pair['email_id']?></td>
<td class="editable" data-field="sent_event_id"><?=$pair['sent_event_id']?></td>
<td class="editable" data-field="minutes"><?=$pair['minutes']?></td>
<td class="edit-me">
<button type="submit" class="btn btn-primary">
<i class="glyphicon glyphicon-pencil icon-white"></i>
</button>
</td>

if you'd rather keep to toggling, use .on('click', '.classname', function() { // do stuff here; }); instead of .click() (it should solve the bindings to the new elements on the dom)
another solution is to try something without toggle, since toggle gets messy with switching out elements and such. something more straight forward like this could work : http://jsfiddle.net/swm53ran/177/
$(document).ready(function() {
$('table').on('click', '.edit', function() {
var name = $(this).closest('tr').find('.name').html();
var email = $(this).closest('tr').find('.email').html();
$(this).closest('tr').find('.name').html('<input type="text" value="'+ name +'"/>');
$(this).closest('tr').find('.email').html('<input type="text" value="'+ email +'"/>');
$(this).closest('tr').find('.edit').closest('td').html('Save');
});
$('table').on('click', '.save', function() {
var name = $(this).closest('tr').find('.name').find('input').val();
var email = $(this).closest('tr').find('.email').find('input').val();
$(this).closest('tr').find('.name').html(name);
$(this).closest('tr').find('.email').html(email);
$(this).closest('tr').find('.save').closest('td').html('Edit');
});
});
<table>
<tr>
<td class="name">Name1</td>
<td class="email">Email1</td>
<td class="action">Edit</td>
</tr>
<tr>
<td class="name">Name2</td>
<td class="email">Email2</td>
<td class="action">Edit</td>
</tr>
<tr>
<td class="name">Name3</td>
<td class="email">Emaiil3</td>
<td class="action">Edit</td>
</tr>
</table>

Getting Value From Table TR id and TD id

I have problems getting id from tr and td in my table.
Let's say I have a table like this:
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr id='0'>
<td>Diatas Rata-Rata</td>
<td id='1'>1 </td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr id='0'>
<td>Diatas Rata-Rata</td>
<td id='3'>3 </td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
I want to getting id from TR and id FROM td for each tr clicked in specific table (table_tingkat_jual).
This is my syntax in jQuery:
$('#table_tingkat_jual tr').click(function(){
this.stopPropagation();
});
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).closest('td').attr('id');
alert("TD ID " + tdid);
});
But when I clicked the row in that table, nothing happened. What I want is alert me the id. (See the alert function).
What's wrong?

Update from chat:
It turns out the problem is that the table is loaded dynamically via ajax, so a delegated event is needed (in addition to the other fixes):
$(document).on('click', '#table_tingkat_jual tr', function (e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').data('id');
alert("TR ID " + trid);
var tdid = $this.find('td[data-id]').data('id');
alert("TD ID " + tdid);
});
Previous details:
There are several issues, not the least of which is the use of duplicate ID's in the HTML (which is invalid).
You also do not need separate, identical, selectors to handle stopPropogation (assuming you actually need stopPropogation at all (e.g. to avoid clicks in parent objects).
It appears you also want to drill down for the TD values, so try this:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/fw5ty/
$('#table_tingkat_jual tr').click(function(e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').data('id');
alert("TR ID " + trid);
var tdid = $this.find('td[data-id]').data('id');
alert("TD ID " + tdid);
});
data('id') is a short-cut for attr('data-id').
note I have changed your HTML to use data-id attributes instead of id= so that duplicate values are allowable.
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr data-id='0'>
<td>Diatas Rata-Rata</td>
<td data-id='1'>1</td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr data-id='0'>
<td>Diatas Rata-Rata</td>
<td data-id='3'>3</td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
If you really must use duplicate ID's (which I strongly recommend you fix) use this code instead:
http://jsfiddle.net/TrueBlueAussie/fw5ty/1/
$('#table_tingkat_jual tr').click(function(e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $this.find('td[id]').attr('id');
alert("TD ID " + tdid);
});

you have two elements with the same id:
<tr id='0'>
id should be unique. Use a class if you want both to be 0, or assign one a different value.

The issue is that .closest starts looking from the target element and up, not down on the DOM tree, and since your event is on tr it never gets to the td, that's why you always get undefined, if what you want is to get the id of the first td with one, try using .find():
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).find('td[id]').attr('id');
alert("TD ID " + tdid);
});
Sample fiddle
Also I'd get rid of:
$('#table_tingkat_jual tr').click(function(){
this.stopPropagation();
});
And finally, you're not supposed to have repeated id attributes on html, so you should change those or use a data attribute or a class instead.

Maybe you forgot to include jquery?
I just included jQuery from google and let the script wait until the document is completly loaded.
I also gave the different ids, but that was not the problem i think.
I also recommend giving all the an ID, because now he alerts undefined ID.
For me it works like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).closest('td').attr('id');
alert("TD ID " + tdid);
});
});
</script>
</head>
<body>
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr id='0'>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr id='1'>
<td>Diatas Rata-Rata</td>
<td id='1'>1 </td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr id='2'>
<td>Diatas Rata-Rata</td>
<td id='3'>3 </td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
<body>
</html>
Hope it helps.

Delete row from table using JQuery. Please see code

I used a code which I got in the net that adds a table row every onclick event. It worked perfect for me until I realized I needed to have an onclick event for every row that when clicked, it will delete the row.
Is there a way for that to happen using my code?
Please see codes below:
Javascript/JQuery code:
<script>
var counter = 2;
function addRow() {
event.preventDefault();
var newRow = jQuery('<tr><td><label>'+ counter +'</label></td><td><textarea name="txtActionStep' + counter + '" style="width:300px; height: 50px; word-wrap:break-word;"></textarea></td><td valign="top"><input type="text" name="txtOwner' + counter + '"/></td></tr>');
counter++;
jQuery('table.actionsteps-list').append( newRow );
}
</script>
HTML Code:
<table class="actionsteps-list" width="510">
<tr>
<th colspan="3" align="left">Action Steps</th>
</tr>
<tr>
<td>Step #</td><td>Action Step</td><td>Owner</td>
</tr>
<tr>
<td><label>1</label></td>
<td><textarea name="txtActionStep1" style="width:300px; height: 50px; word-wrap:break-word;"></textarea></td>
<td valign="top"><input type="text" name="txtOwner1" /></td>
</tr>
</table>
<table width="510">
<tr>
<td align="right">Add Action</td>
</tr>
</table>
Thank you!

Sure, using delegation we can accomplish that.
$('table.actionsteps-list').on('click', 'tr', function(e){
$(this).remove();
});
You probably want to add a button to your row to signal a deletion, so let's assume you add (to each row):
<td><button class="delete">Delete</button></td>
Then just change your delegation method like this:
$('table.actionsteps-list').on('click', '.delete', function(e){
e.preventDefault(); // stops the page jumping to the top
$(this).closest('tr').remove();
});

Use a delegate ot catch the event at the table level, that way any new row that you add will also be handled:
$('.actionsteps-list').on('click', 'tr', function(){
$(this).remove();
});
Side note:
Don't use the javascript: protocol for inline Javascript, that's only used when you put Javascript in the href attribute of a link:
Add Action

IE7 issue with jQuery find?

The following code worked fine in IE7 until I started using IE9.js file. The IE9.js file adds an additional class "ie7_class82" to the already present classes which I added. The code below stopped working in IE7. Is there a known issue with not able to find matching classes with jQuery when multiple classes are present?
--------------HTML code skeleton-------------
<table cellspacing="0" cellpadding="0" bgcolor="#FFF" width="100%">
<thead>
---table rows here----
</thead>
<tbody>
<tr>
<td>
<table cellspacing="0" border="0" width="100%" style="float:left">
<thead>
<tr style="text-align:left;">
<td style="font-size:14px;font-weight:bold;text-align:left;padding:10px 5px">
<span><label class="quarterly">Quarterly</label></span>
<span style="padding:5px">|</span>
<span><label class="monthly">Monthly</label></span>
<span style="padding:5px">|</span>
<span><label class="daily">Daily</label></span>
</td>
</tr>
</thead>
<tbody>
---table rows here----
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" border="0" width="100%" style="float:left" class="quarterly">
---table rows here---
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" border="0" width="100%" style="float:left" class="monthly">
---table rows here---
</table>
</td>
</tr>
<td>
<table cellspacing="0" border="0" width="100%" style="float:left" class="daily">
---table rows here---
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
---------jQuery code--------------
$('table thead span label').click(function() {
$(this).parents('table').parents('table').find('table').hide();
$(this).closest('table').find('tbody tr').hide();
$(this).closest('table').show();
$(this).closest('table').find('tbody tr.' + this.className).show();
$(this).parents('table').parents('table').find('table.' + this.className).show();
});​
Note: Unfortunately no errors in IE7(and works fine in FF and Chrome). It is supposed to hide all the tables and show only the ones which match the class name that is present in the label tag. IE7 hides all the tables but fails to show the tables that match the class.
Updated code(that works in IE7, thanks to SO):
$('table thead span label').click(function() {
var classSelector = $.trim($(this).attr('class')).split(/\s+/g).join(',');
$('label:not('+classSelector+')').css('color','#00425f');
$(this).css('color','#d6c9b9');
$(this).parents('table').parents('table').find('table').hide();
$(this).closest('table').find('tbody tr').hide();
$(this).closest('table').show();
$(this).closest('table').find('tbody tr.' + classSelector).show();
$(this).parents('table').parents('table').find('table.'+ classSelector).show();
});

this.className returns the actual class attribute which, in ie7's case, because of the ie9.js file, contains more than one class.
This means that a selector like the one you use :
'table.' + this.className
will be translated into:
'table.yourClassName ie7_class82'
which is not a valid jquery (or css) selector.
I suggest you replace this.className with something like :
var classSelector = $.trim($(this).attr('class')).split(/\s+/g).join('.');
which means that :
'table.' + classSelector
will be translated into :
'table.yourClassName.ie7_class82.some-other-classes-if-any'

Like one comment mentioned, 'tbody tr.' + this.className will generate an invalid selector if this has more than one class.
It's a little confusing why you're trying to get a row that has a class equal to the label you're clicking on. Perhaps take a look at the DOM navigation methods of jQuery. Specifically parent and parents:
http://api.jquery.com/parent/
http://api.jquery.com/parents/
If you absolutely must do what you're trying to do, then the fix would be to replace spaces with periods in this.className. So you could modify your code to do this:
'tbody tr.' + this.className.replace(/ /g,'.')

$(document).ready() makes datatable not work properly

I'm trying to start the table empty with no data in <tbody> and choose some parameters send to the server via $.getJSON and append the returned json data inside <tbody>.
But it looks like because of the $(document).ready() it makes it not work properly, the pagination and the search stop working completely.
BTW, I'm including all the needed files, I know that the error is because I'm populating the table after the page loads, I just would like to know if there is another approach to solve this problem.
Here is my code:
<script type="text/javascript" src="../js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#contacts').dataTable({
"sPaginationType" : "full_numbers"
});
$("#submit").click(function()
{
$.getJSON("/myurl",
function(data)
{
$("#table_body").empty();
$.each(data, function(i, item)
{
$("#table_body").show("slow");
$("#table_body")
.append(
'<tr class="gradeC">' +
'<td>' + item.name+ '</td>' +
'<td>' + item.birthdate + '</td>' +
'<td>' + item.age + '</td>' +
'</tr>'
);
});
});
});
});
</script>
<!-- NOW THE HTML CODE FOR THE TABLE -->
<table cellpadding="0" cellspacing="0" border="0" class="display" id="contacts">
<thead>
<tr>
<th>Name</th>
<th>Birthdate</th>
<th>Age</th>
</tr>
</thead>
<tbody id="table_body"></tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Birthdate</th>
<th>Age</th>
</tr>
</tfoot>
</table>

It doesn't appear that you are using the Datatables API properly. Read through the documentation and try using the datatables methods for adding rows and emptying the table, etc.

Try using the $(function() { ... }); syntax instead. I recently had an issue where $(document).ready(function() { ... }); wasn't working. I tried the newer syntax and it fixed it...
Hope this helps.

fnAddData() should not be used for loading entire content row by row. To table content from JSON you can set this url in the sAjaxSource property and define mappings between JSON properties and columns. See examples on:
http://datatables.net/release-datatables/examples/ajax/objects.html
http://datatables.net/release-datatables/examples/ajax/deep.html
I believe that your approach works, but take a look on this pages too maybe it would be easier to load them this way.
Jovan