Javascript Manipulation on included DOM element

Question

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

Do you call the function after the html file is loaded ? How do you load this external html file ? — mguimard, Jun 10 '13 at 15:46
I call the external function in the document.ready(){} function after everything is loaded. The external HTML file is loaded through the .load() function in the document.ready() as well, but prior to my SetNextSWPDate() function. the .load() is used on a
in the page. — Nick G, Jun 10 '13 at 15:59
Ok, so you must implement a callback function to your jQuery.load function : $("#yourDiv").load("youExternalFile",function(){//your stuff here ... }); see http://api.jquery.com/load/#callback-function — mguimard, Jun 10 '13 at 16:01
i'm still not able to get it to work, here is my .load() call inside the document.ready() function $("document").ready( function(){ $("#PipData").load('/backoffice/Prospects/App360/pageFragments/pipswp/218145_pip.html'); $("#SwpData").load('/backoffice/Prospects/App360/pageFragments/pipswp/218145_swp.html',function(){ $("#NextSWPDate").innerHTML = "this is a test"; }); }); — Nick G, Jun 10 '13 at 16:37
I figured it out, thank you for your help, don't know how to mark yours as the answer — Nick G, Jun 10 '13 at 16:44

score 0 · Answer 1 · answered Jun 10 '13 at 15:46

0

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/

answered Jun 10 '13 at 15:46

Tim Wasson

3,606
16
16

Hey Tim, you're correct I can use a JQuery solution and yours works correctly when everything is in the same file, but using the .load() function to load external HTML into one of my
elements makes it so that doesn't work correctly for me.
– Nick G Jun 10 '13 at 16:01

score 0 · Answer 2 · answered Jun 10 '13 at 15:48

0

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.

answered Jun 10 '13 at 15:48

Egari

523
3
9

I'm currently calling the function in the document.ready() of the page after the external HTML is loaded using the .load() function on a
in my main page.
– Nick G Jun 10 '13 at 16:00
1

I see, the document.ready function is fired on the first time the document loads. So before the .load function is actually executed. You should add the function call to the callback of the .load function as mguimard describes in the comment on your question. – Egari Jun 10 '13 at 16:11

score 0 · Answer 3 · edited May 23 '17 at 11:49

 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

score 0 · Answer 4 · answered Jun 10 '13 at 19:35

0

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

answered Jun 10 '13 at 19:35

Nick G

1,209
8
34
58

Javascript Manipulation on included DOM element

4 Answers4