We Keep Coding

Tablesorter not sorting on dynamically added content

I have a problem with Jquery Tablesorter where I am adding data dynamically to a pre-existing table.
According to the docs, after adding content, all that needs to be done is for $("table").trigger("update") to tbe run to tell tablesorter than new content has been added, however in reality this appears not to work.
See http://jsfiddle.net/7Wurn/9/ for an example. Clicking on the HTML table headers will order the columns, but after adding a new row the new row does not get sorted.
It seems like something minor is wrong, as the example used on the Tablesorter website uses almost identical code to the code I've added on JSFiddle. The only difference is that the $("table").trigger("update"); is run as part of a callback after an Ajax call.
Any ideas what is wrong?

I also faced the same problem when using datatables in jQuery. When you are appending it to the table you are not appending the data to same tbody element. Instead your data is being added to a new tbody element. The table format should be<thead></thead> and then <tbody></tbody>.
Do something like this:
$("#tableId tbody").append(someContent);
I have updated your fiddle http://jsfiddle.net/7Wurn/68/. Also please use jquery 1.9.1. Its not working in 2.0b1. Don't know why

I have been playing with this and found that it's related to how, in the DOM, a tbody tag is being rendered.
I got it to work for the first entry by doing the following:
$("table tbody:first").before('<tr><td>Aaphod</td><td>Beeblebrox</td> <td>28</td> <td>$9.99</td> <td>20%</td><td>jul 6, 2006 8:14 am</td></tr>');
That's because it sticks it into the first tbody, and tablesorter recognizes it. However, subsequent additions cause it to be inserted as a new tbody tag.
I'm going to keep playing with it and will update if I get something!

Html table does not redraw after adding to its DOM ie8

IE bugs out on me with a large table by not redrawing the table when I add input's to it using jquery. It forces a redraw/update when I scroll the table up or down but otherwise it doesnt render the input properly.
<div style="overflow: auto;">
<table>
<tbody>
/// lots of rows
</tbody>
</table>
</div>
and the javascript snippet :
input = $(document.createElement("input"));
input.attr("type", "text");
input.attr("value", $.trim(div.html()));
TD.prepend(input);
This works just fine in firefox but refuses to behave in IE8. A way to fix is to force a redraw but I can't seem to find a way to do that.
I think ie8 is rendering in quirks mode but it doesnt work in either ie8 or quirks mode.
[Edit]
function forceIERedraw() {
if ($.browser.msie) {
obj = getThing();
obj.scrollTop = obj.scrollTop - 1;
obj.scrollTop = obj.scrollTop + 1;
}
}
This works but of course makes the screen shake ever so slightly. Horribly hacked but at least you can see things that I add to the dom.

hiding and showing the body usually works with issues like yours:
input = $(document.createElement("input"));
input.attr("type", "text");
input.attr("value", $.trim(div.html()));
TD.prepend(input);
document.body.style.display = 'none';
document.body.style.display = 'block';

Today I encountered somewhat similar problem, solved it by just rewriting the whole html of the div again. Later I found your question here...
Lets say your div had an id stupiddiv
Now you do something like this :
$('#stupiddiv').html($('#stupiddiv').html());
after appending the table and all... That would just work if you had small tables, but with huge tables, I guess it would take performance toll...

Turns out the problem was specific to the website im working on (10 years old at that.) and rendering in ie quirks mode. Basically the whole thing was a mess and this was a side effect of various other problems on the page.

internet explorer and dynamic lists from javascript

I have a page that requires user input then it will execute some javascript and populate fields on the page. Part of this includes calling a perl script that will run and get data from another page check that against the input from the user. The number of items that the perl script will return could be anywhere from zero to ten or even more. To handle this I have written some javascript to append each item into a list on my html page.
The problem I am coming across is that it seems to work perfectly fine in Safari and chrome, but does not seem to want to work in internet explorer 6 or 7. The major issue here is that most of the people that will be using this will be on internet explorer. I have no errors in my javascript code.
<div id='testDiv'><ul></ul></div>
then I just have my javascript replace the instance off </ul> in the div with
<li>blah blah blah</li></ul>
and have that repeat for each time an item needs to be added to the list. Everything else on the page works fine, and there are even new line for where the new list items show be. However it does not show any text there.
is there something I am doing wrong or is internet explorer not rendering this correctly?
EDIT: added the requested information.
var dateList = document.getElementById('testDiv').innerHTML;
var insertToList = "<li><div>blah blah blah</div></li></ul>";
dateList = dateList.replace('</ul>', insertToList);
document.getElementById('testDiv').innerHTML = dateList;
I have this in a loop to cycle through the results and add results to the list as appropriate. Unfortunately, I cannot link you the page since this is an internal project.

Depending on what you are using for your selector engine, IE is different. I recommend using jQuery for selecting and replacing content as it handles browser differences for you.

In IE6 testDiv.innerHTML is <UL></UL>. Note the upper-case tags.
dateList.replace('</ul>', ...) can't find anything that matches so it doesn't perform the replace.
A better approach would be to get a reference to the list (ul) element and append the HTML there.
var ulRef = document.getElementById('testDiv').getElementsByTagName("ul")[0];
ulRef.innerHTML += "<li><div>blah blah blah</div></li>";

Copy the content of one table into another

In my current application i need to copy the content of one table into another... With setting innerHTML it works perfectly in FF... but not in IE8...
Here is the Code i used to copy in FF:
getID("tableA").innerHTML = getID("tableB").innerHTML;
// getID is a custom function i wrote to provide a shorter version of document.getElementById();
TableA is empty (only the tbody tag exists). TableB is looking like this:
table
tbody
tr
td "Content" /td
td "Content" /td
/tr
/tbody
/table
I already tried using nodeValue.. or appendData... or outerHTML.. but nothing really worked...

Internet Explorer doesn't let you edit the inside of tables with innerHTML - it is all or nothing.
Since you are trying to use innerHTML to copy the information, a complete copy should be safe (i.e. not have any id attributes that might become duplicated), in which case I would do this:
var source = document.getElementById('tableA');
var destination = document.getElementById('tableB');
var copy = source.cloneNode(true);
copy.setAttribute('id', 'tableB');
destination.parentNode.replaceChild(copy, destination);

I'm kind of surprised to learn this didn't get fixed for IE 8. Geez, talk about dragging your feet. This is an intentional omission in Internet Explorer's implementation of innerHTML — you can't set innerHTML in a table. The creator of the feature has offered an explanation and a workaround. Basically, you can get hold of an actual tbody node and use replaceChild() to turn the original table's tbody into that.

Insert rows into table

What is the best plain javascript way of inserting X rows into a table in IE.
The table html looks like this:
<table><tbody id='tb'><tr><td>1</td><td>2</td></tr></tbody></table>
What I need to do, is drop the old body, and insert a new one with 1000 rows. I have my 1000 rows as a javascript string variable.
The problem is that table in IE has no innerHTML function. I've seen lots of hacks to do it, but I want to see your best one.
Note: using jquery or any other framework does not count.

Here's a great article by the guy who implemented IE's innerHTML= on how he got IE to do tbody.innerHTML="<tr>...":
At first, I thought that IE was not
capable of performing the redraw for
modified tables with innerHTML, but
then I remembered that I was
responsible for this limitation!
Incidentally the trick he uses is basically how all the frameworks do it for table/tbody elements.
Edit: #mkoryak, your comment tells me you have zero imagination and don't deserve an answer. But I'll humor you anyway. Your points:
> he is not inserting what i need
Wha? He is inserting rows (that he has as an html string) into a table element.
> he also uses an extra hidden element
The point of that element was to illustrate that all IE needs is a "context". You could use an element created on the fly instead (document.createElement('div')).
> and also the article is old
I'm never helping you again ;)
But seriously, if you want to see how others have implemented it, take a look at the jQuery source for jQuery.clean(), or Prototype's Element._insertionTranslations.

Do as jQuery does it, eg. add <table> and </table> around it, insert into document and move the nodes you want to where you want them and ditch the temp-element.

the code ended up being this:
if($.support.scriptEval){
//browser needs to support evaluating scripts as they are inserted into document
var temp = document.createElement('div');
temp.innerHTML = "<table><tbody id='"+bodyId +"'>"+html;
var tb = $body[0];
tb.parentNode.replaceChild(temp.firstChild.firstChild, tb);
temp = null;
$body= $("#" + bodyId);
} else {
//this way manually evaluates each inserted script
$body.html(html);
}
Things that beed to exist beforehand: a table that has a body with id of 'bodyId'. $body is a global variable (or the function has a closure on it), and there is a bit of jquery in there too, because IE does not evalute scripts that are inserted into the html on the fly.

I had the same problem (as do lots of other people) and after a lot of playing around here's what I got to work.
You have to make a tr via document.createelement ('tr') then make a td, the same way.
appendchild the td to the tr, appendchild the tr to tbody (not table) THEN you can innerhtml the td you created and it will work.
This was ie8 I was using. Basically the table structure has to be made with createelement but the rest of it can be innerHTMLed. I was doing this watching in the IE8 debugger and it would say it would add it (if I did tr.innerhtml="blah") and give no error, but it wouldn't display, and the html dom view showed a very broken table (no td ever showed up, but the /td did)
So when finally I did the tr AND td by createelement calls, it created a correct looking dom and drew the page correctly.