Changing Classes

[proofke]

hey,

i use Ruby on rails and AJAX (assyn. javascript and xml).
my site has links and when u click on it, a popup appears with ajax. and u can close the popup by clicking on close :p

the same is with a search form, that the use can fold open en close again.
the effects works in fireworks but not IE

in Firefox this works fine but in IE it doesnt

the search is like this:

<div id="search_area">
<div id="search_area_title">
<ul>
<li id="search_area_search">Search</li>
<li id="search_area_url">
<a href="#" class="show_link" onClick="show_search_area();" id="search_area_open_url" >Open</a>
<a href="#" class="noshow_link" onClick="hide_search_area();" id="search_area_close_url" >Close</a>
</li>
</ul>
</div>
<div id="search_area_table" class="noshow_link">
<form action="/employees/list" method="POST"">
<table class="tabel complete">
<tr>
<td>Last name</td>
<td><input id="employee_last_name" name="employee[last_name]" size="30" type="text" value="<%= @last_name %>" /></td>
</tr>
<tr>
<td>First name</td>
<td><input id="employee_first_name" name="employee[first_name]" size="30" type="text" value="<%= @first_name %>" /></td>
</tr>
<tr>
<td colspan="2" class="right"><input type="submit" value="Search" /></td>
</tr>
</table>
</form>
</div>
</div>

.show_link {
visibility: visible;
}
.noshow_link {
visibility: hidden;
display: none;
}

function show_search_area() {
changeSty('search_area_table','show_link');
changeSty('search_area_open_url','noshow_link');
/*new Effect.SlideDown('search_area_table'); */
changeSty('search_area_close_url','show_link');
}

function hide_search_area() {
changeSty('search_area_table','noshow_link');
changeSty('search_area_close_url','noshow_link');
/*new Effect.SlideUp('search_area_table'); */
changeSty('search_area_open_url','show_link');
}

function changeSty(id, newClass){
item=document.getElementById(id);
item.className=newClass;
}

anyone can help me?

[jscheuer1]

I'm going to have to think about why this is a problem in IE but, it probably has to do with the undeclared variable 'item' being interpreted as an object via the implied document.all prefix. In other words, without declaring the variable, IE (probably) sees this line:


item=document.getElementById(id);

as:


document.all.item=document.getElementById(id);

Assuming a piece of a script to be a variable without declaring it is bad form anyway and since, this fixes it:


var item=document.getElementById(id);

I'd go with good form here. That is all that is required to get this code to work in IE. While we are at it, it is also good form to add 'return false;' to the onclick events of anchor tags when the href attribute is set and the action of loading it is not required. So, these two lines would benefit from this:


<a href="#" class="show_link" onClick="show_search_area();return false;" id="search_area_open_url" >Open</a>
<a href="#" class="noshow_link" onClick="hide_search_area();return false;" id="search_area_close_url" >Close</a>

[proofke]

thx
it worked :D