views:

34

answers:

1

There are 2 radio buttons. Depending on which one you click, the drop down box will load that set of data. Depending on the first one I click, that one will take about 1-2 secs to load, while the other loads instantly. Even click back and forth. I was wondering why, and how I might be able to have it stop loading instantly (weird, I know).

$('#rblGenre').change( function() {
    $('#ddlSpecificGenre').attr('disabled','disabled').html( '<option>Loading...</option>' )
    var genre = $(this + ':checked').val();

    $.ajax({
        type: 'GET',
        url: '../bookGenres.xml',
        dataType: 'xml',
        success: function( xml ) {
            var xmlGenre = $(xml).find( genre );
            $('#ddlSpecificGenre').removeAttr('disabled').children().remove();
            xmlGenre.children().each( function() {
                $('#ddlSpecificGenre').append( '<option>' + $(this).text() + '</option>' );
            });
        }
    });
});

<asp:RadioButtonList ID='rblGenre' runat='server'>
    <asp:ListItem Text='Fiction' Value='Fiction'></asp:ListItem>
    <asp:ListItem Text='Non-Fiction' Value='Non-Fiction'></asp:ListItem>
</asp:RadioButtonList>

<asp:DropDownList ID='ddlSpecificGenre' runat='server' Enabled='false'>
    <asp:ListItem Text='Choose a Genre' Selected='True'></asp:ListItem>
</asp:DropDownList>
A: 

Sounds to me like your response is getting cached. If you want to turn off caching using jQuery, add "cache: false" to your list of settings in your "ajax" call.

So your function call would become:

$.ajax({
    type: 'GET',
    url: '../bookGenres.xml',
    dataType: 'xml',
    cache: false,
    success: function( xml ) {
        var xmlGenre = $(xml).find( genre );
        $('#ddlSpecificGenre').removeAttr('disabled').children().remove();
        xmlGenre.children().each( function() {
            $('#ddlSpecificGenre').append( '<option>' + $(this).text() + '</option>' );
        });
    }
});
InvisibleBacon
Adding that doesn't seem to change the behavior.
Justen