.innerHTML , <a href> and IE

BenthamLtd
BenthamLtd used Ask the Experts™
on
Getting more stumped and hating IE every second to the degree I want to punch their lead developer in the face!

IT WORKS IN FIREFOX.... ARRRGGHHHH!


Basically I have a drop-down menu that changes a <a href> link within a <span>. Users click the drop-down menu option and it populates a <th> with the new value and link. It works flawlessly in FF, but (no surprise here), not IE.

I also know why it's doing it; basically you cannot have open <a>'s when manipulating stuff with .InnerHTML .... in IE anyway.

I've attached the code below and would really appreciate any other options. At the moment I've tried tricking it with a long PHP echo, abusing document.write, changed <span> to <div>....all return "Unknown runtime error" on IE. Slowly running out of ideas!

Or if someone would be kind enough to point in the right direction using AJAX, I'll happily take that as an option!

Many thanks as always.
<html>  <!-- this is just so Experts Exchange can try syntax highlighting -->


<!-- this is the select object with onchange .innerHTML event -->

<select name="searchclassic_col1" id="searchclassic_col1" style="font-size:9px;" onchange="document.getElementById('searchclassic_col1_span').innerHTML='<a href=db.php?cmd=search_classic&sort='+this[this.selectedIndex].value+'>'+this[this.selectedIndex].text+'</a>'; createCookie('searchclassic_col1_value', this[this.selectedIndex].value, 7); createCookie('searchclassic_col1_text', this[this.selectedIndex].text, 7); location.reload(true);">

<option value="" selected="selected">select from list....</option>
            <option value="" disabled="disabled">&nbsp;</option>
			<?php foreach ($searchclassic_columns_array as $name => $db_field) { ?>
        	<option value="<?php echo $db_field; ?>"><?php echo $name; ?></option><?php } ?></select>&nbsp;  <!-- drop-down options acquired from PHP array -->

<!-- turned column names into PHP sessions so it remembers what users selected -->

<?php 
// FUNCTION TO PARSE COLUMN NAME INTO DYNAMIC HYPERLINK. MUST BE DEFINED AFTER DECLARING JAVASCRIPT COOKES TO PHP SESSIONS (SEE ABOVE).
// THIS ALSO PARSES STORED SESSION VARIABLE INTO ROW NAME FOR DISPLAYING RESULTS.
function cookie_crumbler($column,$default_value) {
	if (!$_SESSION[$column] || $_SESSION[$column] == "null") { return $default_value; } else { return $_SESSION[$column]; }	
}

?>


<!-- this is one of the table rows with the <span> -->
 <th><a href="db.php?cmd=search_classic&sort=<?php echo cookie_crumbler("searchclassic_col1_value","Status"); ?><?php if (!$_GET['dir']) { echo "&dir=DESC"; }?>">
        <span id="searchclassic_col1_span"><?php echo cookie_crumbler("searchclassic_col1_text","Status"); ?></span>
		
		<?php if ($_GET['sort'] == cookie_crumbler("searchclassic_col1_value","Status") && $_GET['dir'] == "") { ?><img src="img/inbox/up-arrow.gif" border="none" /><?php } else if ($_GET['sort'] == cookie_crumbler("searchclassic_col1_value","Status") && $dir = "ASC") { ?><img src="img/inbox/down-arrow.gif" border="none" /><?php } else echo ""; ?></a></th>

<!-- notice the <span> in the middle of the <a href> tag. This is what is causing the problem...in IE... -->


</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Looking at the code, it looks like your placing a new <a> within a <span> which is within a <a>...

Rather than selecting the <span> should you not select the outside anchor? or place another span outside that and select that?

I would also suggest pulling it all out into a function for clarity

Easynow
Something like this:
<html> 
<head>
<script>
function replace(x,y)
{
document.getElementById('searchclassic_col1_span').innerHTML='<a href=db.php?cmd=search_classic&sort='+x+'>'+y+'</a>'; 
createCookie('searchclassic_col1_value', x, 7); 
createCookie('searchclassic_col1_text', y, 7); 
location.reload(true);
}
</script>
</head>
<body>
<select name="searchclassic_col1" id="searchclassic_col1" style="font-size:9px;" onchange="replace(this[this.selectedIndex].value,this[this.selectedIndex].text);">

<option value="" selected="selected">select from list....</option>
        <option value="" disabled="disabled">&nbsp;</option>
        <option value="a">a</option>
        <option value="b">b</option>
</select>
</body>

<table border="1" width="100px" height="50px">
<th>
    <span id="searchclassic_col1_span">
	<a href="db.php?cmd=search_classic&sort=">Old link</a>
</span>
</th>
</table>
</html>

Open in new window

Author

Commented:
Ok thanks muchly Easynow. I'll give it a go this afternoon. In theory, points should be sailing your way shortly.

But, seriously, IE is nasty software isn't it.  :)

Author

Commented:
That works brilliantly, thank you ever so much Easynow. I was *that* close to throwing my toys out the pram!
And yes, you are right, I should have put it in a function to begin with for purposes of clarity.

500 points well deserved.

Thank you!
Haha, thanks for the points mate, glad to help.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial