[jQuery] IE Issues with onChange on form select and radio

[jQuery] IE Issues with onChange on form select and radio


Hello. I'm having a few issues, and I was hoping someone might be able
to give me some perspective. I've been searching for an answer for a
couple of weeks now, and I'm at the end of my rope.
I have a form with a two select boxes (one for a country selection,
the other for a language selection), and a set of radio buttons that
define a filter.
If a user selects a country, two events fire:
1) The first gets an HTML list of relevant state/provs and load()s
them into an empty div right below the countries.
2) The second event does the same as above, but load()s a refined
list of languages into place
If the user changes the radio button filter, then two events fire:
1) gets and loads a new country list
2) gets and loads a new language list too
It's a little more complex than that, as the country list is also
narrowed when the language is changed.
The issue is that in Both IE 6 & 7:
1) country select onchange fires the event and loads new
languages , but not states; it looks like it might try to load the
states, but nothing but a blank space appears below the countries.
2) radion onchange event fires, but only after you click somewhere
In IE 6 the issue is exacerbated by a warning on every page load:
- Error
A runtime error has occurred
Do you wish to debug?
Line 2
Object does not support this property or method
In Firefox 2 & 3 and Safari 3+, this all works exactly like it should.
This is the dev URL: http://csdir.iteratemedia.com/
Following are two code snippets as inline examples. You'll see that
I'm apply the onchange function directly to the ID (or class) of the
form element being affected. I have a feeling that this is where my
issue lay, but any amount of tweaking (applying the change the
containing div for example) either makes no difference or breaks it in
FF et al.
    <script type="text/javascript">
    $(document).ready(function() {
    $("select#country").change( function() {
        var filter = $('#filterList').attr('class');
        var language = $('#languageList').attr('class');
        $('#countryList').removeClass().addClass(this.value);
        var updateState = encodeURI('/?action=loadStates&filter=' + filter +
'&country=' + this.value);
        var languageLoad = encodeURI('/?action=loadLanguages&filter=' +
filter + '&country=' + this.value);
        $('#cityList').removeClass().addClass('all').empty();
        $('#stateList').load(updateState, function() { $
('#state').Shake(2);    });
        if(language == "all"){
            $('#languageList').load(languageLoad, function() { $
('#language').Shake(2);    });
        }
        return false;
    });
    });
    </script>
            <select name="country" id="country">
                <option value="all">Select a Country</option>
<?php
//loop through countries retrieved from DB
foreach($countries as $country){
    echo "<option";
    if($userCountry == $country->country) echo "
selected";
    echo ">" . $country->country . "</option>\n";
}
?>
            </select>
And a snippet for the filter change:
    <script type="text/javascript">
    $(document).ready(function() {
    $(".filter").change( function() {
        var country = $('#countryList').attr('class');
        var state = $('#stateList').attr('class');
        $('#filterList').removeClass().addClass(this.value);
        $('#stateList').removeClass().empty();
        $('#cityList').removeClass().empty();
        var countryURL = '/?action=loadCountries&filter='+this.value;
        var languageURL = '/?action=loadLanguages&filter='+this.value;
        $('#countryList').load(countryURL, function() { $
('#country').Shake(2);    });
        $('#languageList').load(languageURL, function() { $
('#language').Shake(2);    });
        return false;
    });
    });
    </script>
    <fieldset id="filterList" class="<?= $classFilter ?>">
    <legend>Filter</legend>
        <div>
            <input type="radio" name="filter" class="filter" value="none"
id="all" <?php if(!$userFilter || $userFilter == "none") echo
"checked"; ?> /> <label for="all">All Practitioners</label><br/>
            <input type="radio" name="filter" class="filter" value="CSB"
id="teach" <?php if($userFilter == "CSB") echo "checked"; ?> /> <label
for="teach">Teachers (CSB) Only</label><br/>
            <input type="radio" name="filter" class="filter" value="Nurse"
id="nurse" <?php if($userFilter == "Nurse") echo "checked"; ?>/><label
for="nurse"> Nurses Only</label>
        </div>
    </fieldset>
I'll buy a beer for someone who can point me in the right
direction :-)
Much Appreciated.