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>