Basically what I am doing is dynamically loading external HTML files depending on a drop-down selection in classic ASP. It's an old system for someone I work for, so there's not really many choices I have except to figure this out. The included HTML is only a table of data such as this;
<table cellspacing="0" cellpadding="0" style="vertical-align:top; width:100%; ">
<tr style="line-height:14px;" >
<td width="150"><b style="color:#888888;">Symbol<b></td>
<td ><b style="color:#888888;">Security</b></td>
<td width="150" style="text-align:right;"><b style="color:#888888;">Amount</b></td>
<td width="150" style="text-align:right;"><b style="color:#888888;">Mkt Value</b> </td>
<td width="150" style="text-align:right;"><b style="color:#888888;">Est.Next Date</b></td>
</tr>
<tr style="line-height:14px; background-color: #f0f0e8;">
<td>QPRMQ</td>
<td>BANK DEPOSIT SWEEP PRGRAM FDIC ELIGIBLE</td>
<td style="text-align:right;">100.00%</td>
<td style="text-align:right;">$191.77</td>
<td style="text-align:right;" id="NextSWPDate">11/15/2010</td>
</tr>
</table>
I want to run a function on the TD element with the ID of "NextSWPDate", but since this is "included" html I just receive the error of;
Unable to set value of the property 'innerHTML': object is null or undefined
My function is just generic right now trying to do any manipulation on the object I can, after I get that set, I can write the real logic quickly and easily.
function SetNextSWPDate(){
document.getElementById("NextSWPDate").innerHTML = "this is a test";
}
Thank you,
NickG
Your tag mentioned jQuery, so I hope a jQuery solution is acceptable. A standard $("#NextSWPDate").text("whatever"); worked just fine for me. http://jsfiddle.net/pCx9K/
In case of included HTML or generated HTML, you might want to wait with executing javascript until the DOM is fully loaded.
To do so, try using the window.onload of javascript or the $(document).ready function of jQuery.
The property is read/write for all objects except the following, for
which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE,
TABLE, TBODY, TFOOT, THEAD, TITLE, TR.
Colin's work-around (setting innerText on the td instead of innerHTML on the tr)
is a good one in your case. If your needs become more complex, you'll have to
resort to The Table Object Model.
Source from Why is document.getElementById('tableId').innerHTML not working in IE8?
Refer http://msdn.microsoft.com/en-us/library/ms533899%28v=vs.85%29.aspx
Ok, so you must implement a callback function to your jQuery.load function : $("#yourDiv").load("youExternalFile",function(){//your stuff here ... }); see api.jquery.com/load/#callback-function – mguimard 3 hours ago
Related
I'm trying to write a regular express that will capture an HTML table (and all it table data) that has a particular class.
For example, the table has a recapLinks class, its comprised of numerous table rows and table data and then terminated with . See below:
<table width="100%" class="recapLinks" cellspacing="0">
[numerous table rows and data in the table.]
</td></tr></tbody></table>
I'm using javascript.
The regex to capture this is pretty simple, if you can guarantee that there are never nested tables. Nested tabled become much trickier to deal with.
/<table[^>]*class=("|')?.*?\bCLASSNAMEHERE\b.*?\1[^>]*>([\s\S]*?)</table>/im
For instance, if an attribute before class had a closing > in it, which isn't likely, but possible, the regex would fall flat on it's face. Complex reges can try to prepare for that, but it's really not worth the effort.
However, jQuery all by itself can make this a breeze, if these elements are within the DOM. Regex can be easily fooled or tripped, deliberately or accidentally but that's why we have parsers. JQuery doesn't care what's nested or not within the element. It doesn't care about quote style, multiline, any of that.
$(document).ready(function () {
console.log($("table.myClassHere").prop("outerHTML"))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="myClassHere">
<tr>
<td>Book Series</td>
</tr>
<tr>
<td>Pern</td>
</tr>
<tr>
<td>Hobbit</td>
</tr>
</table>
<table class="otherClassHere">
<tr>
<td>Movies</td>
</tr>
<tr>
<td>Avengers</td>
</tr>
<tr>
<td>Matrix</td>
</tr>
</table>
On my website I have a schedule optimization for semester, classes, times, and locations. After optimization is run, several tables of choices show up. I want to show an empty semester in the table. here is an example of what I mean:
I know my table looks ugly, but I can't put blanks in the table to make the columns / side complete because i'm running complex calculations on the data in the table that would get disrupted if I were to put blanks in (it would try to do look-ups on blanks). I can't tell it to ignore the box if it's a blank either (Just go with me here). So, is there a way to add a note in that area that says "No classes for this semester" programmatically? The results are often different sizes so I can't like hardcode in a location on my website for the note. I need it to just know where to go. I didn't think this was possible but wanted to pose the idea to you guys. Ideas?
This would be the end goal:
--tons of results in form of tables ---
one example result:
IF it is even possible to close in the table so it's a complete box that would be great. ****I NEED A JAVASCRIPT / JQUERY SOLUTION
UPDATED: Based on the replies so far, I tried this:
if(classes.length === 0){
var $noClasses = $('<td></td>').html('No Classes available');
$noClasses.colSpan = "3";
$table.append($noClasses);
}
and this gave me
Use rowspan and colspan to accommodate the 'awkwardness' of your table structure. The table structure is still standard, you're just wanting to span your cells across rows and/or columns:
HTML
<!DOCTYPE html />
<html>
<head>
<style>
td,th{
border-style: groove;
}
</style>
<title></title>
</head>
<body>
<table>
<tr>
<th>Title1</th>
<th>Title2</th>
<th>Title3</th>
<th>Title4</th>
</tr>
<tr>
<td rowspan="3">Semester1</td>
<td>Class1</td>
<td>Time1</td>
<td>Loc1</td>
</tr>
<tr>
<td>Class2</td>
<td>Time2</td>
<td>Loc2</td>
</tr>
<tr>
<td>Class3</td>
<td>Time3</td>
<td>Loc3</td>
</tr>
<tr>
<td>Semester2</td>
<td colspan="3">No Classes available</td>
</tr>
<tr>
<td>Semester3</td>
<td>Class1</td>
<td>Time1</td>
<td>Loc1</td>
</tr>
</table>
</body>
</html>
Result
So here is the code that ended up working:
if(classes.length === 0){
var $noClasses = $('<td colspan="3"></td>').addClass('noClass').html("No Classes ");
}
but I had to take out some of the html/css from the javascript because it was getting too confusing to implement this part. I made a template with icanhaz and converted some of the code and then this worked.
I ended up reporting this issue as a bug. Seems to affect webkit browsers. https://code.google.com/p/chromium/issues/detail?id=233677
Original question below.
I'm using jQuery 1.8.1 with Christian Bach's tablesorter 2 plugin and running into a peculiar problem. (Same problem with jQuery 1.7.1 and tablesorter 1.)
I have a table with hundreds of rows and it sorts in about 1 second.
When I wrap the table in an HTML <form> element the tablesorter plugin becomes very slow. A table with ~500 rows takes upwards of 8 seconds to sort.
I'm only calling $("#table").tablesorter() with no extra parameters, and just plain HTML with no other JavaScript or CSS.
The HTML for this table is around 1.2mb and each <td> contains additional HTML elements such as <button>, <div>, <span>, <a>, ...
Any ideas what the <form> element may be interfering with? Thanks, /w
Edit: Here's an example with only 10 rows. Scale to 500 for realistic times, and wrap the table in <form></form> to see how that slows the sorting. http://pastebin.com/95KAAb88
I discovered this issue is not unique to tablesorter or datatables. Possibly something with the JavaScript engine in my version of Chrome (23).
I created a simple jsfiddle. Firefox 20.0 doesn't seem to have this issue.
http://jsfiddle.net/wsams/yGpdv/27/
If you open a web developer console and run this script, note the Appending child time. This is the time it takes to append a row to the table.
After a couple passes, simply wrap the table in <form> like this,
<form>
<table>
<thead>
<tr>
<th>count</th>
<th>link</th>
<th>input</th>
<th>button</th>
<th>count</th>
<th>link</th>
<th>input</th>
<th>button</th>
</tr>
</thead>
<tbody>
<tr id="tr1">
<td>item 1</td><td>a big link</td><td><input type="text" value="something" /></td><td><button type="submit" name="test" value="why">why this</button></td><td>item 1</td><td>a big link</td><td><input type="text" value="something" /></td><td><button type="submit" name="test" value="why">why this</button></td>
</tr>
</tbody>
</table>
</form>
Now run the script again and note the Appending child times. I'm seeing it going from about 0.040ms per append to ~8ms. It also seems somewhat exponential as you add more rows.
To me it has to be an issue with the native JavaScript DOM functions, but I'm not an expert in this area.
My question is! I am copying content from one table to another table and when I am doing this I need the function name to change to talentselect instead of driverselect which is attached to each table row. I still need to keep the variable values to parse. Just wondering if anyone can help me with this. I know that I should be binding the events to the elements with Jquery and not using OnClick but for now I need a solution to achieve this with the OnClicks.
Many Thanks!
The copying of the table
<table id="driverselectiontable" cellspacing="0">
<tr class="chosen" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
<tr class="odd" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
<tr class="even" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
<tr class="chosen" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
<tr class="even" onclick="return driverselect(this, value, value);">
<td>driver</td></tr>
</table>
<table id="talentselectiontable" cellspacing="0">
</table>
$("#talentselectiontable").html($("#driverselectiontable .chosen").clone(true).attr("class","odd"));
So basically I am copying all of the table rows that have the class named "chosen" but upon doing so I need to change the function call name to "talentselect". But each row in the table has different parameters being parsed which is allocated with PHP.
I have tried this piece of code but it is not working still
$("#talentselectiontable tr").attr("onclick").replace("driverselect", "talentselect");
I can't see the actual HTML of your table, so this may be slightly incorrect, but should get you started.
$("#talentselectiontable tr").attr("onclick", "return talentselect(this, value, value);");
This whole problem would actually be a lot easier if you used event handlers rather than inline onclick attributes. You could then use the jQuery live() function (see http://api.jquery.com/live/) that would mean that JQuery would take care of changing the function for you. Your solution would look something like this:
$("#driverselectiontable tr").live('click', driverselect);
$("#talentselectiontable tr").live('click', talentselect);
And then whatever code to ensure that your cloning code gets called.
Edit: In response to the comment, it looks like this is what you're after:
var clickval = $("#talentselectiontable tr").attr("onclick");
$("#talentselectiontable tr").attr("onclick", clickval.replace('driverselect', 'talentselect'));
That should get you going.
With a view to better JavaScript practice however, I would recommend another approach entirely. Rather than storing your parameter values in the 'onclick' attribute, store them in a data attribute. So your HTML would look something like this:
<table id="driverselectiontable" cellspacing="0">
<tr class="chosen" data-myparam1="value" data-myparam2="value"><td>driver</td></tr>
And so on. You can then use JQuery to parse the values:
function driverselect() {
var row = $(this),
param1 = row.attr('data-myparam1'),
param2 = row.attr('data-myparam2');
// rest of the code goes here
}
Your markup will be cleaner, and you can use the live() jQuery functionality as described above.
If I understand right, .innerHTML should overwrite whatever was in a certain div or span.
For example:
<table width="90%" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td colspan="2" align="left">Via Email:</td>
<td width="1070" align="right"></td>
</tr>
<script>
$('#addEmail').click(function() {
document.getElementById('emailList').innerHTML = "12345";
});
</script>
<span id="emailList">
<tr>
<td width="27" align="left"><img src="icon_mail.png" width="24" height="24"></td>
<td width="228" align="left">123obama#whitehouse.com</td>
<td align="right"><span class="ui-icon ui-icon-close"></span>remove</td>
</tr>
</span>
<tr>
<td colspan="3" align="left"><br>
<input name="input4" type="text" value="vova#kremlin.ru" size="20">
<span class="ui-icon ui-icon-mail-closed"></span>Add Email</td>
</tr>
</table>
Therefor upon click of #addEmail button, everything inside would be removed and replaced by "12345".
Yet in reality it doesn't do anything to that span, but just prints out 12345 in the place, where the script is.
Any ideas what could be wrong?
The HTML is invalid — you can't wrap a <tr> in a <span>. The browser is performing error recovery on your code and producing a DOM that isn't what you expect it to be. When you try to edit the content of the span, the span probably isn't where you think it is.
… you can't put a script between table rows either.
… and you are trying to bind an event handler to a link before the link exists in the document. You either need to move the script so it appears after the link, or move the code that does the work into an event handler that runs after the link exists (such as the ready event).
It's actually your span that's wrong. A span can't ... span (I know, I know) over table rows, so it gets opened and closed somewhere between the rows (or outside the table on some browsers), so when you're overwriting it's html, it ends up somewhere else.
You should name the tr instead and overwrite its html, that should work.
You can't put a <tr> inside a <span> like that. Anyway if you're using jQuery, you should probably use its API around ".innerHTML"
$('#emailList').html("hello world");
That will do some important cleanup work for you. It's not absolutely required, but unless you know for sure what you're doing it's probably a safer option.
You are wrapping a <tr> in a span. That is going to lead to unpredictable results. Especially if you then remove the table row.