Ajax post getting "cancelled"

Question

I have an ajax post, but it's getting cancelled. I just made a test.php file which is just supposed to echo 'test'; value.

This is how my ajax script looks like:

function loadAd(date) {
    var ajax_url = '<?=URL?>components/ajax/grab_ads.php';
    $.ajax({
        type: 'POST',
        url: ajax_url,
        dataType: 'html',
        data: ({
            date : date
        }),
        cache: false,
        success: function(data) {
            if(data > 0) {
                $('.advert').fadeIn("fast");
            }       
        },
        error: function(xhr, textStatus, errorThrown) {
            //alert('Nastala chyba. ' + errorThrown);
        }
    });
}

The function is called, I tried console logging it. The variable is passed okay as well. This is what I'm getting in chrome network tab. screenshot

Other than that I am quite helpless.

Edit: I call the function like this:

$datum = Date("d-m-Y H:i:s");

$adl .= '<script type="text/javascript">
              loadAd(\''.$datum.'\');
         </script>';

Can you expand the entry in the network tab to see what the returned headers are? — michael, May 16 '13 at 10:39
@michael sure, here you go [link](http://i40.tinypic.com/2wp8c9i.png) — InsaneSVK, May 16 '13 at 10:43
So when you call the Request Url manually in browser the test value is returned all right? Just checking. Anything in the Response Tab (probably not)? — bouscher, May 16 '13 at 10:52
i think the url might be wrong or your grab_ads.php script returns an error. thats why the success function wont be called — Joel Harkes, May 16 '13 at 10:53
Well I don't think it's about the loadAd() function since the request is actually triggered, it is just not answered. — bouscher, May 16 '13 at 10:57
@bouscher yes, I am on the same domain. Nothing in the response tab, and yes, the php file works when checked manually — InsaneSVK, May 16 '13 at 11:02
@bouscher I know, I tried '=URL?>' + 'components/ajax/grab_ads.php'; already — InsaneSVK, May 16 '13 at 11:15
You still didn't answer what happens, when you actually call the Request URL manually in the browser. — bouscher, May 16 '13 at 11:18
Try to leave the common brackets () away around the data, just {date:date} — bouscher, May 16 '13 at 11:32
@bouscher no problem buddy, I tried removing the brackets, did not help unfortunately — InsaneSVK, May 16 '13 at 11:34
@bouscher - in reference to your earlier comment, it _could_ have been about how `loadAd()` is called, because if it is called from e.g., a submit or anchor click handler then the event's default behaviour could interfere with the ajax submit. — nnnnnn, May 16 '13 at 11:43
@nnnnnn You are right of course. I said "I don't think", which doesn't mean "It is not". It acually seems that it is about the way he calls the function judging from what I see after the dit. I though it was called after jQuery(document).ready(function(){ — bouscher, May 16 '13 at 11:53
@bouscher - Yes, I know you didn't say "it is not", no problem there. I was just explaining why I asked to see the function call. — nnnnnn, May 16 '13 at 11:58
possible duplicate of [jQuery Ajax requests are getting cancelled without being sent](http://stackoverflow.com/questions/7577275/jquery-ajax-requests-are-getting-cancelled-without-being-sent) — Michael Stalker, May 28 '15 at 18:20
Try solution mentioned at https://stackoverflow.com/a/54289161/784542 — AnkitK, Jan 21 '19 at 11:40

Shijin TR · Accepted Answer · 2013-05-16T10:52:08.167

14

we were making the ajax request from a link, and not preventing the link from being followed. So if you are doing this in an onclick attribute, make sure to return false; as well

 function loadAd(date) {
  var ajax_url = '<?=URL?>components/ajax/grab_ads.php';
  $.ajax({
    type: 'POST',
    url: ajax_url,
    dataType: 'html',
    data: ({
        date : date
    }),
    cache: false,
    success: function(data) {
        if(data > 0) {
            $('.advert').fadeIn("fast");
        }       
    },
    error: function(xhr, textStatus, errorThrown) {
        //alert('Nastala chyba. ' + errorThrown);
    }
 });
 return false;
 }

edited May 16 '13 at 10:52

answered May 16 '13 at 10:45

Shijin TR

7,516
10
55
122

4

or use `preventDefault();` at the start of function. – nilobarp May 16 '13 at 10:46
@NilotpalBarpujari,Ya,I think preventDefault() is the best method,Thanks – Shijin TR May 16 '13 at 10:48
@shin how do I call the prevent default? Is it bound to an object? because the return false didn't help. – InsaneSVK May 16 '13 at 10:49
@InsaneSVK,If you call function onclick ,return false; only works,I think – Shijin TR May 16 '13 at 10:53
@shin my function is called by refreshing the page, not onclick though :( – InsaneSVK May 16 '13 at 10:53
@shin I've edited the first post so you can see how exactly I'm calling the function. This piece of code is referenced in my header.tpl file, right after begins. – InsaneSVK May 16 '13 at 11:01
2

try putting in async:false in your ajax request. This may break sth else, but try this if you want this to be the default action. The ajax requests are usually canceled when the browser starts navigating away from the page you are on. – theshadowmonkey May 16 '13 at 11:07
@theshadowmonkey the async made it go from cancelled to pending, the pending is endless it seems – InsaneSVK May 16 '13 at 11:12

score 0 · Answer 2 · edited Aug 20 '18 at 15:47

Check for the HTML element by whose event the AJAX call is getting triggered.

If it's an input button, ensure it should be of type button' <input type="button" /> and use return statement.

If it's an anchor tag, try using return statement: return either true or false.

Ensure page doesn't get refreshed on completion of the AJAX call. If you use input field of type submit, it will submit the form and lead to page refreshed, and the request gets canceled.

Ajax post getting "cancelled"

2 Answers2

Linked