...

View Full Version : IE won't recognize css "selected" attribute?



Moswell
07-16-2009, 10:23 PM
I've got a cascading drop down with three levels: composers > books > songs. The user picks a composer, which populates the next fields with correlating data. That data is made via some php functions. If the user selects a composer, say, Thomas Campion, then a book, say, the The Third and Fourth Booke, and then a song from that book, say, Now let her change, and then hits the get value button, what should happen is the form posts back on itself, retaining the values the user previously chose via a selected="selected" attribute. This works in Firefox; in IE the composer the user chose is retained, but the book and song are not.

Here's the url: http://www.moswell.people.haverford.edu/multiselect.php

I've determined (with the help of some people on the html board) that this is happening because of the javascript that's running on the page by removing all the javascript and just running the php/html. Can someone figure out how IE is running this differently from Firefox and maybe (please?) how to fix it?

Thanks.

Here's the code for the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php
require_once ('../mysql_connect_lutesongs.php'); // Connect to the database.

function composer_select() {
$optionone = $_POST['composers'];
echo $optionone;
$query="SELECT Comp_Name, Comp_ID, Comp_LName FROM Composer ORDER BY Comp_LName";
$result=mysql_query($query);
echo "<select name=\"composers\" id=\"composers\">
<option class=\"none\" value=\"none\">Select a Composer</option>\n";
while ($row=mysql_fetch_array($result)){
$compid = $row['Comp_ID'];
echo "<option value=\"$compid\"";
if ($compid == $optionone) {
echo ' selected="selected"';
}
echo ">$row[Comp_Name]</option>\n";
}
echo "</select>";
}

function book_select() {
$optiontwo = $_POST['sources'];
echo $optiontwo;
$query="SELECT Source.Source_ID, Book_Title, Composer.Comp_ID, Comp_Name FROM Source, Composer JOIN Writes ON Source.Source_ID = Writes.Source_ID AND Composer.Comp_ID = Writes.Comp_ID";
$result=mysql_query($query);
echo "<select name=\"sources\" id=\"sources\">
<option class=\"none\" value=\"none\">Select a Book</option>\n";
while ($row=mysql_fetch_array($result)) {
$sourceid = $row['Source_ID'];
echo "<option class=\"sub_$row[Comp_ID]\" value=\"$sourceid\"";
if ($sourceid == $optiontwo) {
echo ' selected="selected"';
}
echo ">$row[Book_Title]</option>\n";
}
echo "</select>";
}

function song_select() {
$optionthree = $_POST['songs'];
echo $optionthree;
$query="SELECT Song.Song_Title, Song.Song_ID, Song.Source_ID, Composer.Comp_ID FROM Song, Composer JOIN Source ON Song.Source_ID = Source.Source_ID JOIN Writes on Song.Source_ID = Writes.Source_ID AND Composer.Comp_ID = Writes.Comp_ID";
$result=mysql_query($query);
echo "<select name=\"songs\" id=\"songs\">
<option class=\"none\" value=\"none\">Select a Song</option>\n";
while ($row=mysql_fetch_array($result)) {
$songid = $row['Song_ID'];
echo "<option class=\"sub_$row[Source_ID]\" value=\"$songid\"";
if ($songid == $optionthree) {
echo ' selected="selected"';
}
echo ">$row[Song_Title]</option>\n";
}
echo "</select>";
}
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script type="text/javascript" language="javascript">
function makeSublist(parent,child)//isSubselectOptional,childVal
{
$("body").append("<select style='display:none' id='"+parent+child+"'></select>");
$('#'+parent+child).html($("#"+child+" option"));

var parentValue = $('#'+parent).attr('value');
$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());

//childVal = (typeof childVal == "undefined")? "" : childVal ;
//$("#"+child+' option[@value="'+ childVal +'"]').attr('selected','selected');

$('#'+parent).change(
function()
{
var parentValue = $('#'+parent).attr('value');
$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
//if(isSubselectOptional) $('#'+child).prepend("<option value='none'> -- Select -- </option>");
$('#'+child).trigger("change");
$('#'+child).focus();
}
);
}

$(document).ready(function()
{
makeSublist('sources','songs'); //, false, ''
makeSublist('composers','sources'); //, false, ''
});
</script>
</head>
<body>
<form action="multiselect.php" method="post">
<?php composer_select();
echo "<br />";
book_select();
echo "<br />";
song_select();
echo "<br />";
?>
<input type="submit" name="refinesearch" value="Get value" />
</form>
</body>
</html>

VIPStephan
07-16-2009, 10:30 PM
Please donít cross-post. This post seems to be 100% related to the one you made in the HTML/CSS forum so please ask a moderator to move that thread here if this is applicable. With cross-posting youíre just wasting the time of people that might wanna help and then see that the issue is being worked on already in another thread.

Moswell
07-16-2009, 10:34 PM
Please don’t cross-post. This post seems to be 100% related to the one you made in the HTML/CSS forum so please ask a moderator to move that thread here if this is applicable. With cross-posting you’re just wasting the time of people that might wanna help and then see that the issue is being worked on already in another thread.

OKay, I'll do that. It seemed to me that this was a new issue since it's not HTML related but javascript related. Sorry - could a moderator remove this please?

12 Pack Mack
07-16-2009, 10:52 PM
Moswell:

No need to delete this thread. I see you are frustrated.

Shouldn't this be a job for AJAX?

I don't believe that hiding and un-hiding select list options as a way to make "cascading" or "dependent" lists is an efficient approach. It requires you to build each list with every possible choice, instead of just those that should be available based upon the selection of the previous list.

FF retains posted form values, IE doesn't. selected=selected is meaningless.

You can delete that and FF will still "work."

<option value="nothing selected>Hello</option>

or

<option value="nothing" selected=true>Hello</option>

is the way "selected" is used.

Email me. I'll give you a complete AJAX/PHP dynamic dependent select list demo. You can then "scale" it for two dependent lists, and you can insert one JavaScript line to "reset" the third list if a new selection is made from the first list.

Moswell
07-16-2009, 11:06 PM
Moswell:

No need to delete this thread. I see you are frustrated.

Shouldn't this be a job for AJAX?

I don't believe that hiding and un-hiding select list options as a way to make "cascading" or "dependent" lists is an efficient approach. It requires you to build each list with every possible choice, instead of just those that should be available based upon the selection of the previous list.

FF retains posted form values, IE doesn't. selected=selected is meaningless.

You can delete that and FF will still "work."

<option value="nothing selected>Hello</option>

or

<option value="nothing" selected=true>Hello</option>

is the way "selected" is used.

Email me. I'll give you a complete AJAX/PHP dynamic dependent select list demo. You can then "scale" it for two dependent lists, and you can insert one JavaScript line to "reset" the third list if a new selection is made from the first list.

That would be great. Php and I get along fine, but I'm just beginning to dip my toes into javascript, and this is way beyond me at this point. And unfortunately I need to get the blasted thing working!

A point about the <option value="nothing" selected=true>Hello</option> - that's new to me. I thought that xhtml insisted on the code the way I'd written it?

12 Pack Mack
07-16-2009, 11:36 PM
Michelle:

You know, I believe that XHTML has fallen, or is falling out of favor.

If you aren't actually using any XHTML attributes or properties in your mark-up, then just use HTML 4.01 strict.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Moswell
07-16-2009, 11:37 PM
Michelle:

You know, I believe that XHTML has fallen, or is falling out of favor.

If you aren't actually using any XHTML attributes or properties in your mark-up, then just use HTML 4.01 strict.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Interesting, I think I'll read up about that!

12 Pack Mack
07-16-2009, 11:50 PM
Michelle:

Did you receive the .zip file?

Moswell
07-17-2009, 12:27 AM
Michelle:

Did you receive the .zip file?

Yep - email sent in response. Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum