Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts

    IE won't recognize css "selected" attribute?

    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:
    PHP Code:
    <!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>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,662
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    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.

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    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?

  • #4
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    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.
    Last edited by 12 Pack Mack; 07-16-2009 at 10:58 PM.

  • #5
    New Coder
    Join Date
    Jul 2008
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by 12 Pack Mack View Post
    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?

  • #6
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    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.

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

  • Users who have thanked 12 Pack Mack for this post:

    Moswell (07-17-2009)

  • #7
    New Coder
    Join Date
    Jul 2008
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by 12 Pack Mack View Post
    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.

    Code:
    <!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!

  • #8
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    Michelle:

    Did you receive the .zip file?

  • #9
    New Coder
    Join Date
    Jul 2008
    Posts
    29
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by 12 Pack Mack View Post
    Michelle:

    Did you receive the .zip file?
    Yep - email sent in response. Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •