.innerHTML not working or am I using it wrong? - javascript

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.

Related

Can't select element on a webpage even though it is present

I am trying to select an element on a table which is on a webpage. The inner text which is on the table is a name of a professor. I am using this line of code to grab the elements.
var tableElementNode = document.querySelectorAll(".section-detail-grid.table-bordered-wrap>tbody>tr>td>div");
And yes it works with the tables on the main webpage and grabs the elements I need. However when i try going on a different course page to grab the elements of another table it does not work even though all the tables have the same format. Its as if the tables are invisible to the code and only grabs the ones on the main webpage.
However every so know and then it grabs all the elements I need on a different course page but on very rare occasions.
The last line on the code below is the element I am trying to grab.
<table class="section-detail-grid table-bordered-wrap">
<thead>
</thead>
<tbody>
<tr data-id="80886" data-index="0" class="section-item section
first linked-section">
<td class="persist row-label">
COP
</td>
<td class=" row-label">
3514
</td>
<td class="persist row-label">
001
</td>
<td class="persist row-label">
Class Lecture
</td>
<td class=" row-label">
<div>Wang, Jing</div>
Someone mentioned that it may be an ajax driven site and thats why its not grabbing all the elements all the time. Ive even tried getting the xpath of that element but it is still not being found. Why is this element invisible to my code?

jQuery.after won't accept </tr> to end an element after starting one

I have a table that is generated by some other software, each row contains 50 columns and I'm trying to break the columns by adding a </tr><tr> to the end of a <td> element.
This is the code that is generated on the fly:
<tbody>
<tr>
<td class="col1" scope="col">08/22/2014</td>
<td class="col2" scope="col">Share</td>
<td class="col3" scope="col">Success</td>
<td class="col4" scope="col">Some notes</td>
<td class="col5" scope="col">8/23/2014</td>
...etc
<td class="col51" scope="col">End column</td>
If I use this Jquery:
$( ".col4").after('</tr><tr><td> </td>');
It appends but doesn't respect the </tr>....it ignores it and adds the <tr> on, resulting this code.
<td class="col3" scope="col">Success</td>
<td class="col4" scope="col">Some notes</td>
<tr>
<td> </td>
</tr>
<td class="col5" scope="col">etc...</td>
Wonder what the best way to get JQUERY to append that <TR> for me? When I modify the code in Firebug, breaking the rows gives me the desired output, just not sure how to get JQUERY to give me the </tr>.
jsFiddle Example
Detach the last 2 cells, append them to tbody and wrap them with tr
$('.col4').nextAll().detach().appendTo('tbody').wrapAll('<tr />')
You cannot insert tags separately using JQuery. For instance, take the following code, which inserts a <p> element into the body:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
$("body").append("<p>");
</script>
</body>
</html>
Using the Firefox inspector, this is what the DOM looks like:
Thus, $("...").append("<p>"), $("...").append("</p>"), $("...").append("<p></p>") all modify the DOM in the same way.
You cannot handle incomplete or illegally formatted HTML as DOM elements. You want to gather up the correctly formatted children before that column and stuff them into a new complete <tr>.
If you want to handle HTML as text, you need to turn it into text with html() and paste it together into actual, correctly closed HTML, and then convert it back.

Getting the content of a table td in console

This is proving surprisingly tricky. Attached is a screen of what I want from the DOM:
I want the innerHTML (Or at least I thought I did) of the td with class product-price.
Here's another screen of all the stuff I've tried and the output:
How do I get the console to return $59.99? Important it comes from the first element not the second where 59.99 also exists
Following a comment, here is the broader html:
<table cellspacing="1" class="store_location_list">
<tr>
<th class="item-type">Item<br />Type</th>
<th class="item-desc">Item<br />Description</th>
<th class="total-qty">Total<br />Quantity</th>
<th class="product-price">Product<br/>Price</th>
<th class="total-price">Total<br/>Price</th>
<th class="removeItemLink"> </th>
</tr>
<tr>
<td class="item-type">Metal Wall Art</td>
<td class="product-description-long">Metal Wall Art</td>
<td class="total-qty">1</td>
<!-- ************************************** -->
<td class="product-price">$59.99</td>
<td class="total-price">$59.99</td>
<td class="removeItemLink">Remove</td>
</tr>
</table>
document.querySelector('td.product-price').innerHTML
Use:
document.querySelectorAll('.product-price')[1].innerHTML
jsFiddle example
querySelector only returns the first match, while querySelectorAll returns all of them (hence the [1]) notation to get the second element. You can also use textContent
in place of innerHTML as it works a little faster, but you won't notice much of a difference in your case.
document.querySelectorAll('.product-price')
will return an array of elements with the given class.
document.querySelectorAll('.product-price')[n]
will give you (n+1)th element with the class
.innerHTML : will give you html content inside it, i.e. even the tags.
.textContent : will give you only text, no html tags.
What you want are the properties: innerText and innerHTML.
But you are selecting the correct item. You select all elements that have the product-price class, and the title of the table has that class.
I recommend you first to ensure you select the correct item.

Javascript Manipulation on included DOM element

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

How do I disable the onclick event

How do I disable the onclick event?
I've tried onclick="this.disabled=true;", but it doesn't work.
Here is an HTML table:
<table>
<tr>
<td onclick="parent.location='home.php'">Available</td>
<td onclick="parent.location='home.php'">Available</td>
</tr>
<tr>
<td onclick="parent.location='home.php'"><div onclick="this.disabled=true;">Booked</div></td>
<td onclick="parent.location='home.php'">Available</td>
</tr>
</table>
Using the above code it is still going to home.php, even if i click on the table cell marked `Booked'.
You need to prevent the event from bubbling upwards.. most simple way:
<div onclick="event.cancelBubble = true;">Booked</div>
Tested successfully for IE8, Chrome and Firefox.
you should overwrite the onclick with a function that returns false (as in: "the click is consumed"). So you'd do something like
onclick="return false;"
wait. i meant false :)
Personally, I think you would be best served to take the 'onclick' off of the TD and place it on the div within it(similar to how you have booked). Then you can decide in your PHP logic whether to put an 'onclick' on the div or leave it off(you wouldn't need to try to override it then).

Categories

Resources