• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

document.getElementbyId not working inside table

 
Greenhorn
Posts: 22
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I am trying to perform the following line of AJAX: document.getElementById('urlContent1').innerHTML = http.responseText;

The tag to be identified in the HTML form is a DIV tag with id="urlContent1". When the DIV tag is inside my table it does not work (Error in FF is getElementById('urlContent1') is null). When I move the div tag outside the table it works fine. Any ideas?

Thanks
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Sounds like you have invalid markup.

What do you mean you have a div tag inside a table? SHow us a basic example what the mark-up looks like.

Eric
 
Tony Moses
Greenhorn
Posts: 22
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Ok, here is the javascript (paraphrased to shorten response):
function makeGetRequest(url, params){
...
http = new XMLHttpRequest();
...
http.onreadystatechange = processStateChange;
http.open('GET', url + params, true);
http.send(null);
}

function processStateChange() {
if (http.readyState == 4) { // Complete
if (http.status == 200) { // OK response
document.getElementById('urlContent1').innerHTML = http.responseText;
}
}
}

HTML (inside jsp):
<html ...>
<form ...>
NOTE: IF I PUT THE DIV TAG HERE getElementById('urlContent1') FINDS THE TAG AND PLACES THE DATA THAT IS RETURNED FROM MY ACTION CLASS THROUGH THE AJAX CALL
<table class="bluetable">
...
<tr>
<td ...>
<select name="inputContType">
<option value="" width="150" >- Select -</option>
<div id='urlContent1'></div> //THIS IS WHERE MY AJAX CALL SHOULD INSERT THE JAVA BUILT HTML THE DROP DOWN WITH CONTENT FROM THE DB, BUT getElementById is null
...


Could it be the CSS class="bluetable" in the table tag that is preventing the div with id='urlContent1' from being found? Your help is greatly appreciated. (Note: I only showed the FF javascript, I have a block to handle IE also in the javascript).
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Please be sure to use code tags when posting code to the forums. Unformatted or unindented code is extremely hard to read and many people that might be able to help you will just move along to posts that are easier to read. Please click this link ⇒ UseCodeTags ⇐ for more information.

Properly indented and formatted code greatly increases the probability that your question will get quicker, better answers.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
If your markup is valid, and the id is unique on the page, there is nothing that will prevent document.getElementById() from working.
 
Tony Moses
Greenhorn
Posts: 22
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks for the advice Bear. I am still confused as when I simply move the div tag outside the table the getElementById works great. Anyways, here is the code using the code tags so maybe somebody can see the error of my ways. I hope this helps. Thanks all:

 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Because a div is not valid inside a select.

run it through a validator.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
A couple of things. Your code shows the JSP markup. That's not useful because we have no idea what that evaluates to. It's the HTML that's sent to the browser that's interesting. (And please, update your JSP knowledge -- scriptlets are 8 years out of date!)

Also you have invalid attributes on some of your elements. I would't think that would affect anything, but it pays to clean out the trash to ensure that it's not causing the problems. The value and width attributes on <select> are invalid, as is width on <option>.

But what it comes down to is invalid structure. A <div> in a <select>? Is that valid?

[Dang! Eric beat me to it!]
 
I AM MIGHTY! Especially when I hold this tiny ad:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic