homepage Welcome to WebmasterWorld Guest from 54.226.192.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
checking if a html element has been set/ exists
dmmh

5+ Year Member



 
Msg#: 5455 posted 3:48 pm on May 19, 2006 (gmt 0)

I need to check if a certain HTML element exists (dynamically added via javascript to a container) and if so, remove the child and rewrite new HTML, but it dont work

<!--
function removeElement(divName){
var d = document.getElementById('search_container');
var d_nested = document.getElementById(divName);
if (d.d_nested) { d.removeChild(d_nested)};
}
-->

this is what I have sofar...but it just doesnt work....any help please? :)

 

jshanman

5+ Year Member



 
Msg#: 5455 posted 3:53 pm on May 19, 2006 (gmt 0)

Try:

function removeElement(divName){
var d = document.getElementById('search_container');
var d_nested = document.getElementById(divName);
if (d_nested.parentNode == d) { d.removeChild(d_nested)};
}

- JS

dmmh

5+ Year Member



 
Msg#: 5455 posted 4:02 pm on May 19, 2006 (gmt 0)

mmm, getting closer...d_nested returns NULL...how can this be?
divName is properly passed to the function (checked via a alert(divName))

jshanman

5+ Year Member



 
Msg#: 5455 posted 4:08 pm on May 19, 2006 (gmt 0)

if d_nested is null, then the element was not properly added to the DOM with the id you are sending to the function.

with an parent of: <div id="parentDiv"></div>

var x = document.createElement("div");
x.id="childDiv";
var p = document.getElementById("parentDiv");
p.appendChild(x);

removeElement("childDiv");

This will add, then remove the element.

- JS

dmmh

5+ Year Member



 
Msg#: 5455 posted 4:21 pm on May 19, 2006 (gmt 0)

mmmm, I understand what you mean and what most likely goes wrong, I just cant get it to fit in the script

my script works via a HTML select onchange which calls one of the four functions DVDSearch(), PricewatchSearch(), MovieSearch() or ForumSearch()
Basically, the user can search for 4 items, when the page is first rendered, there is just a simple HTML form textfield in which the user can specify keywords, then he/she selects one of the 4 items on the site and the rest is displayed dynamically....the selectors which are written to the page via innerhtml are populated by MySQL queries via PHP dynamically.
This works fine. If the user decides to switch to another searchable item, the new search criteria are drawn..also works fine. However, if he changes back to say movie search, the old HTML selects/ menus are still there and a new one is added, which is not what I want to happen :)
Which is why I added a call to remove the other divs, which you can see, but it just doesnt work :S

the javascript (you will see some calls to PHP functions, but they parse 100% ok):

<? include ('include.php');?>
<!--
function removeElement(divName){
var d = document.getElementById('search_container');
var d_nested = document.getElementById(divName);
alert(d_nested);
if (d_nested.parentNode == d) { d.removeChild(d_nested)};
}
-->
<!--
var ForumInnerWrite = "";
function ForumSearch(){
removeElement('movies');
removeElement('dvds');
removeElement('pricewatch');
ForumInnerWrite+='<div id=\"forums\"';
ForumInnerWrite+='<table width=\"100%\" border=\"0\" class=\"avatarcell\">';
ForumInnerWrite+='<tr>';
ForumInnerWrite+='<td colspan=\"3\" class=\"indexheadinfo\"><div align=\"center\"><strong>Search the forums</strong></div></td>';
ForumInnerWrite+='</tr>';
ForumInnerWrite+='<tr>';
ForumInnerWrite+='<td width=\"15%\" class=\"col2\"><strong>Search in</strong></td>';
ForumInnerWrite+='<td width=\"70%\" class=\"col2\"><select name=\"select3\">';
ForumInnerWrite+='<option value=\"1\" selected>topic subject and message</option>';
ForumInnerWrite+='<option value=\"2\">topic only</option>';
ForumInnerWrite+='<option value=\"3\">message only</option>';
ForumInnerWrite+='</select></td>';
ForumInnerWrite+='<td width=\"15%\" class=\"col2\">&nbsp;</td>';
ForumInnerWrite+='</tr>';
ForumInnerWrite+='<tr>';
ForumInnerWrite+='<td class=\"col2\"><strong>Posted by</strong></td>';
ForumInnerWrite+='<td class=\"col2\"><? echo func_bulletin_board_member_selector_java(NULL);?></td>';
ForumInnerWrite+='<td class=\"col2\">&nbsp;</td>';
ForumInnerWrite+='</tr>';
ForumInnerWrite+='<tr>';
ForumInnerWrite+='<td class=\"col2\"><strong>In category </strong></td>';
ForumInnerWrite+='<td class=\"col2\"><? echo func_bulletin_board_category_selector_java(NULL);?></td>';
ForumInnerWrite+='<td class=\"col2\">&nbsp;</td>';
ForumInnerWrite+='</tr>';
ForumInnerWrite+='<tr>';
ForumInnerWrite+='<td class=\"col2\"><strong>In forum</strong></td>';
ForumInnerWrite+='<td class=\"col2\"><? echo func_bulletin_board_forum_selector_java(NULL);?></td>';
ForumInnerWrite+='<td class=\"col2\">&nbsp;</td>';
ForumInnerWrite+='</tr>';
ForumInnerWrite+='</table>';
ForumInnerWrite+='</div>';
document.getElementById('search_container').innerHTML = ForumInnerWrite;
}
-->
<!--
var MovieInnerWrite = "";
function MovieSearch(){
removeElement('forums');
removeElement('dvds');
removeElement('pricewatch');
MovieInnerWrite+='<div id=\"movies\">';
MovieInnerWrite+='<table width=\"100%\" border=\"0\" class=\"avatarcell\">';
MovieInnerWrite+='<tr>';
MovieInnerWrite+='<td colspan=\"3\" class=\"indexheadinfo\"><div align=\"center\"><strong>Search the movies</strong></div></td>';
MovieInnerWrite+='</tr>';
MovieInnerWrite+='<tr>';
MovieInnerWrite+='<td width=\"15%\" class=\"col2\"><strong>From</strong></td>';
MovieInnerWrite+='<td width=\"70%\" class=\"col2\"><? echo func_movie_country_selector_java(NULL);?></td>';
MovieInnerWrite+='<td width=\"15%\" class=\"col2\">&nbsp;</td>';
MovieInnerWrite+='</tr>';
MovieInnerWrite+='<tr>';
MovieInnerWrite+='<td class=\"col2\"><strong>Director</strong></td>';
MovieInnerWrite+='<td class=\"col2\"><? echo func_movie_director_selector_java(NULL);?></td>';
MovieInnerWrite+='<td class=\"col2\">&nbsp;</td>';
MovieInnerWrite+='</tr>';
MovieInnerWrite+='<tr>';
MovieInnerWrite+='<td class=\"col2\"><strong>With actor</strong></td>';
MovieInnerWrite+='<td class=\"col2\"><select name="select6">';
MovieInnerWrite+='<option selected>all actors</option>';
MovieInnerWrite+='</select></td>';
MovieInnerWrite+='<td class=\"col2\">&nbsp;</td>';
MovieInnerWrite+='</tr>';
MovieInnerWrite+='</table>';
MovieInnerWrite+='</div>';
document.getElementById('search_container').innerHTML = MovieInnerWrite;
}
-->
<!--
var DVDSInnerWrite = "";
function DVDSearch(){
removeElement('forums');
removeElement('movies');
removeElement('pricewatch');
DVDSInnerWrite+='<div id=\"dvds\">';
DVDSInnerWrite+='<table width=\"100%\" border=\"0\" class=\"avatarcell\">';
DVDSInnerWrite+='<tr>';
DVDSInnerWrite+='<td colspan=\"3\" class=\"indexheadinfo\"><div align=\"center\"><strong>Search the DVDs</strong></div></td>';
DVDSInnerWrite+='</tr>';
DVDSInnerWrite+='<tr>';
DVDSInnerWrite+='<td class=\"col2\"><strong>From country</strong></td>';
DVDSInnerWrite+='<td class=\"col2\"><? echo func_movie_country_selector_java(NULL);?></td>';
DVDSInnerWrite+='<td class=\"col2\">&nbsp;</td>';
DVDSInnerWrite+='</tr>';
DVDSInnerWrite+='<tr>';
DVDSInnerWrite+='<td class=\"col2\"><strong>From director</strong></td>';
DVDSInnerWrite+='<td class=\"col2\"><? echo func_movie_director_selector_java(NULL);?></td>';
DVDSInnerWrite+='<td class=\"col2\">&nbsp;</td>';
DVDSInnerWrite+='</tr>';
DVDSInnerWrite+='<tr>';
DVDSInnerWrite+='<td class=\"col2\"><strong>With actor</strong></td>';
DVDSInnerWrite+='<td class=\"col2\"><? echo //func_movie_actor_selector_java($empty_var);?></td>';
DVDSInnerWrite+='<td class=\"col2\">&nbsp;</td>';
DVDSInnerWrite+='</tr>';
DVDSInnerWrite+='<tr>';
DVDSInnerWrite+='<td class=\"col2\">&nbsp;</td>';
DVDSInnerWrite+='<td class=\"col2\">&nbsp;</td>';
DVDSInnerWrite+='<td class=\"col2\">&nbsp;</td>';
DVDSInnerWrite+='</tr>';
DVDSInnerWrite+='</table>';
DVDSInnerWrite+='</div>';
document.getElementById('search_container').innerHTML = DVDSInnerWrite;
}
-->
<!--
var PricewatchInnerWrite = "";
function PricewatchSearch(){
removeElement('forums');
removeElement('movies');
removeElement('dvds');
PricewatchInnerWrite+='<div id=\"pricewatch\">';
PricewatchInnerWrite+='<table width=\"100%\" border=\"0\" class=\"avatarcell\">';
PricewatchInnerWrite+='<tr>';
PricewatchInnerWrite+='<td colspan=\"3\" class=\"indexheadinfo\"><div align=\"center\"><strong>Search the pricewatch</strong></div></td>';
PricewatchInnerWrite+='</tr>';
PricewatchInnerWrite+='<tr>';
PricewatchInnerWrite+='<td width=\"15%\" class=\"col2\"><strong>From</strong></td>';
PricewatchInnerWrite+='<td width=\"70%\" class=\"col2\"><? //echo func_movie_country_selector($empty_var);?></td>';
PricewatchInnerWrite+='<td width=\"15%\" class=\"col2\">&nbsp;</td>';
PricewatchInnerWrite+='</tr>';
PricewatchInnerWrite+='<tr>';
PricewatchInnerWrite+='<td class=\"col2\"><strong>Price max \</strong></td>';
PricewatchInnerWrite+='<td class=\"col2\"><select name=\"select5\">';
PricewatchInnerWrite+='<option selected>no maximum</option>';
PricewatchInnerWrite+='</select>';
PricewatchInnerWrite+='</td>';
PricewatchInnerWrite+='<td class=\"col2\">&nbsp;</td>';
PricewatchInnerWrite+='</tr>';
PricewatchInnerWrite+='<tr>';
PricewatchInnerWrite+='<td class=\"col2\"><strong>Currency \</strong></td>';
PricewatchInnerWrite+='<td class=\"col2\"><select name=\"select7\">';
PricewatchInnerWrite+='<option selected>all currencies</option>';
PricewatchInnerWrite+='</select></td>';
PricewatchInnerWrite+='<td class=\"col2\">&nbsp;</td>';
PricewatchInnerWrite+='</tr>';
PricewatchInnerWrite+='<tr>';
PricewatchInnerWrite+='<td class=\"col2\"><strong>Released</strong></td>';
PricewatchInnerWrite+='<td class=\"col2\"><select name=\"select6\">';
PricewatchInnerWrite+='<option selected>all years</option>';
PricewatchInnerWrite+='</select></td>';
PricewatchInnerWrite+='<td class=\"col2\">&nbsp;</td>';
PricewatchInnerWrite+='</tr>';
PricewatchInnerWrite+='</table>';
PricewatchInnerWrite+='</div>';
document.getElementById('search_container').innerHTML = PricewatchInnerWrite;
}
-->

jshanman

5+ Year Member



 
Msg#: 5455 posted 4:39 pm on May 19, 2006 (gmt 0)

You don't need the removeElement function at all...

as soon as this is run:

document.getElementById('search_container').innerHTML = HTMLForASearchForm;

it removes all HTML(all children) that was there before and replaces it with the value of HTMLForASearchForm. You don't even need the containing Divs, just the table tags that contain the search form.

Another alternative is instead of overwriting the innerHTML everytime, just have all DIVs exists inside 'search_container' and set style.display = 'none' to the ones you don't want displayed, and style.display = 'block' for the one you want to show. This will probably be faster as well.

function removeElement(divName){
document.getElementById(divName).style.display = 'none';
}

function showElement(divName){
document.getElementById(divName).style.display = 'block';
}
- JS

dmmh

5+ Year Member



 
Msg#: 5455 posted 4:53 pm on May 19, 2006 (gmt 0)

ok, I will try that, but trust me, its not overwritten.

action 1: user wants to search movies...so selects movies
result 1: the html for the movie selectors is drawn perfectly
action 2: the user decides he wants to search a dvd instead
result 2: the html for the dvd selectors is drawn perfectly and indeed the html for the movie search is overwritten
action 3: the user just doesnt know what he wants and decides to switch back to action 1
result 3: another instance of the same html which was already drawn is added to the div, so we now have double selectors...if I repeat this process it will just keep adding menus/ selects

:)

Firefox btw :)

jshanman

5+ Year Member



 
Msg#: 5455 posted 5:03 pm on May 19, 2006 (gmt 0)

result 3: another instance of the same html which was already drawn is added to the div, so we now have double selectors...if I repeat this process it will just keep adding menus/ selects

Thats because your

var DVDSInnerWrite = "";

is outside your function. Your right, it just keeps adding to those variables, but the innerHTML is overwritten every time.

just put each of the var ...InnerWrite = ""; as the first line in your functions, and it will work without the need for removeElement... however, it would still be faster to just have all the HTML hardcoded inside the "search_containter", then the only thing javascript has to do is show/hide the divs, depending on the users selection. If the forms were huge, I'd recommend aggainst this (because it has to render all 4 on page load, even if it's only showing 1), but your forms are fairly small.

- JS

dmmh

5+ Year Member



 
Msg#: 5455 posted 5:20 pm on May 19, 2006 (gmt 0)

works a treat, how silly of me :D

thanks for your time man!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved