CODEWITHSUNDEEP
phpjavascriptjqueryajaxjson
Skylineman
Skylineman

Reputation: 576

jQuery AJAX calling twice

I've posted a question about it already, but I've figured out what is the exact problem. Now, I need a solution for that :)

Here's my code:

$('input[type="text"][name="appLink"]').unbind('keyup').unbind('ajax').keyup(function() {

    var iTunesURL = $(this).val();
    var iTunesAppID = $('input[name="iTunesAppID"]').val();

    $.ajax({
        type: 'POST',
        url: jsonURL,
        dataType: 'json',
        cache: false,
        timeout: 20000,
        data: { a: 'checkiTunesURL', iTunesURL: iTunesURL, iTunesAppID: iTunesAppID },
        success: function(data) {
            if (!data.error) {
                $('section.submit').fadeOut('slow');
                //Modifying Submit Page
                setTimeout(function() {
                    $('input[name="appLink"]').val(data.trackViewUrl);
                    $('div.appimage > img').attr('src', data.artworkUrl512).attr('alt', data.trackName);
                    $('div.title > p:nth-child(1)').html(data.trackName);
                    $('div.title > p:nth-child(2)').html('by '+data.sellerName);
                    $('span.mod-category').html(data.primaryGenreName);
                    $('span.mod-size').html(data.fileSizeBytes);
                    $('span.mod-update').html(data.lastUpdate);
                    $('select[name="version"]').html(data.verSelect);
                    $('input[name="iTunesAppID"]').attr('value', data.trackId);
                }, 600);
                //Showing Submit Page
                $('section.submit').delay('600').fadeIn('slow');
            } else {
                $('.json-response').html(data.message).fadeIn('slow');
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            //$('.json-response').html('Probléma történt! Kérlek próbáld újra később! (HTTP Error: '+errorThrown+' | Error Message: '+textStatus+')').fadeIn('slow');
            $('.json-response').html('Something went wrong! Please check your network connection!').fadeIn('slow');
        }
    });
});

The Problem and Explanation:

Every time a key is triggered up it loads this ajax. If my JSON file finds a keyword it returns with error = false flag. You see, if it happens, it loads the effects, changing, etc...

The problem is that when you start to type, for example asdasdasd and just after that I paste / write the keyword there'll be some ajax queries which ones are still processing. These ones are modifying and loading the fadeOut-In effects X times.

So I'd need a solution to stop the processing ajax requests, while an other key is pressed!

Thanks in advance, Marcell

Upvotes: 1

Views: 796

Answers (2)

Khalid
Khalid

Reputation: 190

try adding the option async: false to your ajax this will prevent any other calls until the current one is finished.

Upvotes: 1

Popnoodles
Popnoodles

Reputation: 28409

Personally I would have the script wait so it didn't fire on each keyup. Actually I would probably use http://jqueryui.com/autocomplete/

But you can just abort the ajax before trying again.

...
var iTunesAppID = $('input[name="iTunesAppID"]').val();

if (typeof req!='undefined' && req!=null) req.abort();
req = $.ajax({
...

Upvotes: 1

Related Questions