I add content of table in Javascript like this
function (data) {
$("#forum-content").html(data);
}
data is a string with table content("<tr>...</tr><tr>...</tr>...") and I want to add that content to my table.
<table id="forum-content"></table>
In majority browsers it's look fine, but in IE 7 after adding content I don't see table anyway... I check that problem is that IE 7 is calculating size of my table 0(width=0,height=0) after adding content.
How can I solve this issue?
You should avoid writing a table body like that. In IE tables have been traditionally very fragile when using innerHTML (which jQuery's html() method basically is).
Try building the whole table instead:
function (data) {
$("#forum-content").html("<table>" + data + "</table>");
}
with
<div id="forum-content"></div>
In my test, I saw nothing wrong. Do you check whether the content was added to the table? Is there any error thrown.
<table id="forum-content">
</table>
<script>
$(function() {
function addContent(data) {
$("#forum-content").html(data);
}
addContent('<tr><th>Title</th><td>Content</td></tr>');
});
</script>
</body>
Related
My problem has left me trying many solutions and stumped for a while now. My problem is exactly this:
There's a HTML table and a button on a page. Upon pressing the button, a script will run, copying the contents of the cells in the table into a text box. Here is the code for the table:
<table>
<tr><th></th><th>Category1</th></tr>
<tr><td>1.</td><td class="rule">Rule1</td></tr>
<tr><td>2.</td><td class="rule">Rule2</td></tr>
<tr><th></th><th>Category2</th></tr>
<tr><td>3.</td><td class="rule">Rule3</td></tr>
<tr><td>4.</td><td class="rule">Rule4</td></tr>
<tr><th></th><th>Category3</th></tr>
<tr><td>5.</td><td class="rule">Rule5 </td></tr>
<tr><td>6.</td><td class="rule">Rule6</td></tr>
<tr><td>7.</td><td class="rule">Rule7</td></tr>
<tr><th></th><th>Category4</th></tr>
<tr><td>8.</td><td class="rule">Rule8</td></tr>
</table>
My first thoughts were to write a script that iterated through the table and copied the contents of each cell (and creating a new line after every 2 cells). I realized very quickly, that I had no idea how to do that. After some searching I was able to come up with a script that clones the table, and it actually works quite well. This code is here:
$("button").click(function () {
$("table").clone().appendTo(".copy");
});
There are two problems that arise from using this method, however. I want plaintext, not a carbon copy of the table. The other problem is that this method only works when I clone the table into a div, it will not work when I try to clone it to a text box.
I've searched for a while for something similar to this and can only find solutions to copying single rows or cells. I had originally started there but couldn't figure out a way to write a loop that started at the beginning of the table and iterated through the entire thing, copying the contents as it iterated row by row (and creating a new line with each new row that it encountered). The loop would obviously end when there were no more rows to iterate through... This all sounds so simple to do, I know there must be a way.
Please Note: This script will be applied to a Site.Master Page so the script must be able to run for a plethora of tables. All of the tables follow the same structure shown above, but some will have more rows than others.
Any ideas? Any help is greatly appreciated.
You could use the .each() JQuery Method:
JS
function cloneTableContents()
{
$("table tr").each(function()
{
$(this).children().each(function()
{
$(".copy").append($(this).text());
});
});
}
JS For All Tables On Page In Order
function cloneTableContents()
{
$("table").each(function()
{
$(this).find("tr").each(function()
{
$(this).children().each(function()
{
$(".copy").append($(this).text()+" ");
});
});
});
}
HTML
<table id="mine">
<tr><th></th>
<th>Category1</th>
</tr>
<tr><td>1.</td><td class="rule">Rule1</td></tr>
<tr><td>2.</td><td class="rule">Rule2</td></tr>
<tr>
<th></th>
<th>Category2</th>
</tr>
<tr><td>3.</td><td class="rule">Rule3</td></tr>
<tr><td>4.</td><td class="rule">Rule4</td></tr>
<tr>
<th></th><th>Category3</th>
</tr>
<tr><td>5.</td><td class="rule">Rule5 </td></tr>
<tr><td>6.</td><td class="rule">Rule6</td></tr>
<tr><td>7.</td><td class="rule">Rule7</td></tr>
<tr>
<th></th><th>Category4</th>
</tr>
<tr><td>8.</td><td class="rule">Rule8</td></tr>
</table>
<textarea class="copy"></textarea>
<button onclick="cloneTableContents('mine','.copy');">Copy</button>
Working Example:
http://casewarecomputers.com:8088/soHelp.html
I have loaded a html file and "placed" it inside a div:
document.getElementById('my_div').innerHTML='<object type="text/html" data="table.html" ></object>';
Works fine, but when I try to get an element by it's ID in the table (from table.html) I get null/undefined.
var table = document.getElementById('my_table'); /* Nope! */
I guess I am doing it at the wrong time or place somehow. Can you help me please?
Best Regards
I would do this with jQuery's built-in AJAX method, .load(). Like so:
$(document).ready(function(){
$('#my_div_id').load('/filepath/table.html');
var table = $('#my_table');
// Other code, presumably :)
});
Hi all I've an IE8 issure, here's the code:
Html code:
<table id=\"myTable\" border="1">
javascript function:
function loadTableContent() {
$.ajax({
type : 'GET',
url : '/sohara/viewResults.do',
contentType : 'application/json; charset=utf-8',
success : function(response) {
result = response;
var html_Table = '';
html_Table += '<tr><th bgcolor="silver">Type</th>
<th bgcolor="silver">Quantity A</th>
<th bgcolor="silver">Quantity B</th></tr>';
for ( var i = 0; i < result.length; i++) {
html_Table += '<tr>';
html_Table += '<td>'+result[i].description+'</td>';
html_Table += '<td>'+result[i].quantityA+'</td>';
html_Table += '<td>'+result[i].quantityB+'</td>';
html_Table += '</tr>';
}
html_Table += '</table>';
$("#myTable").append(html_Table);
},
error : function(response) {
alert("Error");
}
});
}
Always is perfect in Firefox, Chrome and Opera but in IE8 nothing is displayed in the table. How can I manage that?
I not 100% what is going on but some possibilities:
Your <table> element is incomplete, as it doesn't have an ending tag. I originally assumed that this was just because you were being concise and didn't include it in your example, but then I noticed you included </table> inside your JavaScript. You need to terminate the tag normally in HTML, like so:
<table id=\"myTable\" border="1"></table>
And then work with it in JavaScript (and remove the ending tag in you're appending from JS)
Furthermore, I think the HTML spec says that that table header rows (such as yours with the TH tag) should be wrapped in a <thead> element (e.g. <table><thead><tr><th>Header</th></tr></thead></table>, while body elements are then wrapped in a <tbody> element. Most browsers seem pretty good about parsing tables even without these, but I point it out as a possible source of your problem.
One last potential problem is that IE all the way up to IE9 cannot set innerHTML on tables. See IE9 createElement and setting innerHTML dropping tags on a set operation? and can't innerHTML on tbody in IE for more information. I don't know how JQuery updates table data. I think if they relied on this method we would see more questions here on SO about it, but who knows.
Working solution:
According to Matt first I declare the table this way:
<table id=\"myTable\" border="1"></table> // FULL working method
In fact IE8 automatically closes the html tag this way if I don't close it, causing several issues in appending new html code:
<table id=\"myTable\" border="1"></> // NOT working method
Then instead of using:
$("#myTable).append(html_Table);
I use:
$("#myTable).html(html_Table);
Obviously I have to remove from ajax:
html_Table += '</table>';
Full Working :)
I have a php site that works fine in FireFox and Chrome, but breaks completly in IE.
Here is just one of the scripts that is throwing an error...
SCRIPT600: Invalid target element for this operation.
function loadDeals() {
$.get("modules/recommendations/viewrecommendations.php",{},function(response){
document.getElementById("dealdata").innerHTML = response;
});
}
It throws the error on the line that sets the innerHTML...Any ideas why this is happening?
IE has a problem replacing TBODY contents with innerHTML. The jQuery given above works; if you are not using jQuery, another solution is to have a <div id='helper' style='visibility:hidden'/> somewhere in the page - when the response arrives, put the value with a surrounding <table> tag into the hidden div, then use the DOM to remove the old contents from your visible tag and insert the elements from the hidden tag 1 by 1:
var a=document.getElementById("dealdata");
while(a.firstChild!=null)
a.removeChild(a.firstChild);
var b=document.getElementById("helper");
b.innerHTML="<table>"+this.responseText+"</table>";
while(b.tagName!="TR") {
if(b.tagName==null)
b=b.nextSibling;
else
b=b.firstChild;
}
for(;b!=null;b=b.nextSibling)
a.appendChild(b);
Try this: are you using jquery?
also looks like you have an extra set of brackets in there (i think between ,{},)
function loadDeals() {
$.get("modules/recommendations/viewrecommendations.php",function(response){
$("#dealdata").html(response);
});
}
I want to update the contents of a TBODY (not the entire TABLE, because there's much more semi-meta data (LOL) in that). I get >= 0 TR's from the server (XHR) and I want to plump those in the existing table. The fresh TR's must overwrite the existing TBODY contents.
I've made a very simple, static example on jsFiddle that works in Chrome and probably all the rest, except for IE (I only use Chrome and test in IE8).
In Chrome, the very first attempt works: plump the TR's in the TBODY. No problem!
In IE it doesn't... I've included a not working example of what I had in mind to get it working.
I'm sure this problem isn't new: how would I insert a string with TR's in an existing TBODY?
PS. jQuery doesn't have a problem with this!? It's used here on SO. jQuery does something to the HTML and then inserts it as HTML nodes..? Or something? I can't read that crazy lib. It happens in this file (look for "html: function(". That's where the magic starts.
Anybody have a function or idea for this to work without JS library?
Here is a good resource about the problems of innerHTML and IE.
The bottom line is that on tbody the innerHTML property is readonly.
Here is a solution presented in one of the comments:
var innerHTML = "<tr><td>Hello world!</td></tr>";
var div = document.createElement("DIV");
div.innerHTML = "<table>" + innerHTML + "</table>";
// Get the tr from the table in the div
var trElem = div.getElementsByTagName("TR")[0];
Regarding the jQuery part of the question:
//inside the html() function:
// If using innerHTML throws an exception, use the fallback method
} catch(e) {
this.empty().append( value );
}
//inside the empty() function (basically removes all child nodes of the td):
while ( elem.firstChild ) {
elem.removeChild( elem.firstChild );
}
//append calls domManip applying this to all table rows:
if ( this.nodeType === 1 ) {
this.appendChild( elem );
}
//domManip as far as I can tell creates a fragment if possible and calls the three lines above with this=each row in turn, elem=the tbody(created if missing)
Using plain JavaScript, you can set the innerHTML property of the relevant element. The text that you set can contain a mix of HTML and text. It will be parsed and added to the DOM.