2

I have a dropdown that shows countries. When the user selects United States or Canada, then another drop drop will appear. Everything works with Firefox, but not with Internet Explorer.

$(document).ready(function() {
    $('.CountriesDropDown').change(changeAddressOptions);
   // alert('loaded');
    // call change event in case value was cached from reset
});

function changeAddressOptions(){
    // this is drop down
    var jsThis = $(this);
    var selectedVal = jsThis.val();

    var targetElementWrapper = jsThis.parents('li:first').siblings('.addressContentsWrapper');
    var elementToPopulate = targetElementWrapper.children('.addressContents');

    if (selectedVal == null || selectedVal == '') {
        targetElementWrapper.fadeOut();
        elementToPopulate.empty();
    }
    else {
        var loadingImage = jsThis.siblings('.loadingImage');
        loadingImage.show();
        var bindingPrefix = extractBindingPrefix(jsThis);
        if (selectedVal == 'US') {
            var elementUrl = '/AddressInfo.aspx/UsAddressInfo/?bindingPrefix=' + bindingPrefix;
        }
        else if (selectedVal == 'CA') {
        var elementUrl = '/AddressInfo.aspx/CanadaAddressInfo/?bindingPrefix=' + bindingPrefix;
        }
        else {
            var elementUrl = '/AddressInfo.aspx/InternationalAddressInfo/?bindingPrefix=' + bindingPrefix;
        }
        targetElementWrapper.hide();
        elementToPopulate.empty();
        $(elementToPopulate).load(elementUrl, countryLoadComplete);
    }
}

function countryLoadComplete() {
    var wrapper = $(this).parents('.addressContentsWrapper:first');
    $(wrapper).fadeIn('fast', hideLoadingImage);
}

function hideLoadingImage() {
    var loadingImage = $(this).siblings().find('.loadingImage');
    loadingImage.hide();
}

function extractBindingPrefix(element) {
    // hack - grab binding prefix from neighboring labe, since lastIndexOf never works;
    var bindingPrefixHolder;
    var bindingPrefix;
    bindingPrefixHolder = $(element).siblings('.bindingPrefix');
  ///  var lastPeriod = elementName.indexOf('.', 0);
   // if (lastPeriod = -1)
   //     bindingPrefix = '';
    //else {
    //    bindingPrefix = elementName.substring(0, lastPeriod);
   // }

    bindingPrefix = bindingPrefixHolder.html();
    return bindingPrefix;
}
p.campbell
  • 98,673
  • 67
  • 256
  • 322
user450950
  • 21
  • 1
  • Which version(s) of IE have you tried? Compatibility mode on/off? – p.campbell Sep 17 '10 at 18:38
  • Press F12 to launch Developer Tools in IE8, then debug you script. For earlier IE versions you can install the tools separately, as far as I remember. – queen3 Sep 17 '10 at 19:07
  • Also, Visual Studio can debug javascript code, when it runs webapp in IE. – queen3 Sep 17 '10 at 19:12
  • I am running IE 8, 6 and 7. All the all dont work. – user450950 Sep 17 '10 at 20:22
  • Where abouts is it not working? Is it loading the data, adding the elements or even the animation (could be something screws up and it doesn't show the fields)? – Chao Sep 20 '10 at 13:05

1 Answers1

-1

You have to wrap you jQuery objects in $() everytime you use a jQuery function:

var jsThis = $(this);
var selectedVal = jsThis.val();

Should be

var jsThis = $(this);
var selectedVal = $(jsThis).val();

This needs to be fixed in numerous places in your script.

Steven Striga
  • 1,371
  • 2
  • 10
  • 17
  • It is still not working. This what I have now. I have made the change as you have sugested. Please keep in mind that I am new to jquery. Thanks – user450950 Sep 17 '10 at 19:21
  • I am also thinking that it has something do with the timingout. there is a disscustion... http://stackoverflow.com/questions/459224/jquery-animate-and-browser-performance – user450950 Oct 06 '10 at 16:48
  • I am just not that familiar with jquery. – user450950 Oct 06 '10 at 16:49