Those. gets the same ajax answer

Question

I have an ajax search that filters as I type. It works great in chrome and firefox. However, no matter what data you send, IE always returns the same response. Why is this? Below is the code:

var cardSearch = $('<div>').addClass('card_search').appendTo($('body')).hide().css({'position': 'absolute', 'width': '350px', 'height': '300px', 'background': '#D5D5D5', 'padding': '10px'}).append( $('<div>').css({'background': 'whiteSmoke', 'padding': '5px', 'height': '290px', 'position': 'relative'}).append( $('<input>').css('width', '250px').bind('keyup', function(e){ $.post('http://api.redemptionconnect.com/cards/find/?a=' + Math.random(), {data: {title: $(this).val(), limit: 10, page: 1}}, function(r){ $('ul', cardSearch).empty(); for( var i = 0; i < r.data[0].length; i++ ) $('ul', cardSearch).append( $('<li>').append( $('<a>').attr('href', 'javascript:void(0)').html(r.data[0][i].Card.title + ' (' + r.data[0][i].CardSet.abbreviation + ')').attr('card_id', r.data[0][i].Card.id).mouseover(function(){showCardTooltip(this);}) ).css({'padding': '5px', 'border-bottom': '1px solid #ccc'}) ); }, 'json'); }), $('<button>').html('Search').css({'width': '70px', 'margin-left': '10px'}), $('<hr>').css('margin-bottom', 0), $('<ul>').css({ 'list-style-type': 'none', 'margin': 0, 'padding': 0, 'width': '100%' }) ) ); 

In chrome and firefox, the output is correct. In IE, the output is always the same, no matter what you type. I'm not sure what else to include. You can see how it works at http://redforum.blackfireweb.com and click on the "Search Maps" menu button.

Answer 1

IE can be quite heavy when it comes to caching AJAX requests. If you set the cache: false in a jQuery.ajax object, it will add its own cache request line to the URL:

 $.ajax({ cache: false }) 

Add this above your $ .post () and leave your own, see if that has changed.

Answer 2

Try using timestamp-ticks code instead of random :

 $.post('http://api.redemptionconnect.com/cards/find/?a=' + new Date().getTime(), 

You can do this even shorter by replacing new Date().getTime() with +new Date

 $.post('http://api.redemptionconnect.com/cards/find/?a=' + (+new Date)... 

---

Suggestion: $.ajax({ cache: false }) equals mine, but verbose, read the docs :

cacheBoolean :

Default: true, false for dataType 'script' and 'jsonp' If set to false, this will cause the requested pages not to be cached by the browser.
Setting the cache to false also adds the query string parameter, "_ = [TIMESTAMP]", to the URL.