CODEWITHSUNDEEP
jquery
LordZardeck
LordZardeck

Reputation: 8283

ie receives same ajax response

I have a ajax search that filters as you type. It works fine in chrome and firefox. However, no matter what data you send, IE always returns the same response. Why is that? 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 it working at http://redforum.blackfireweb.com and click the "Search Cards" menu button.

Upvotes: 4

Views: 317

Answers (2)

gdoron
gdoron

Reputation: 150253

Try your code with timestamp-ticks instead of random:

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

You can make it even shorter with replacing new Date().getTime() with +new Date 

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

The suggestion: $.ajax({ cache: false }) equals to mine but verbose, read the docs of it:

cacheBoolean:

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

Upvotes: 1

Tjkoopa
Tjkoopa

Reputation: 2378

IE can be quite heavy-handed when it comes to AJAX request caching. If you set cache: false in jQuery's .ajax object it will append its own cache-busting query string to the url:

$.ajax({ cache: false })

Add this above your $.post() and drop your own one, see if that makes a difference.

Upvotes: 4

Related Questions