Question

I have some ajax requests associated with several elements on my page – when a user clicks ‘Attach’ or ‘Detach’, it sends an ajax request to initiate said request.

If the user clicks each item right after another before the previous ‘click’s AJAX response is received, the following error is received for the requests after the first one:

Uncaught SyntaxError: Unexpected token d

Upon inspection, this occurs at the following:

Uncaught SyntaxError: Unexpected token d
  $.ajax.success                            addassets.js:217
  f.Callbacks.n                             jquery.js:2
  f.Callbacks.o.fireWith                    jquery.js:2
  w                                         jquery.js:4
  f.support.ajax.f.ajaxTransport.send.d     jquery.js:4

Has anyone seen this error/managed to come up with a workaround?

UPDATE:

I re-ran the code, and it appears that it is scrapping the responses to all requests EXCEPT the last one that was submitted. So if a user clicks 1, 2, 3 – the errors will be received for 1 and 2, and the response for 3 will be received as expected.

Here is my ajax code:

    $.ajax({
        url: '/editor/disconnectattachment',
        cache: false,
        data: datastring,
        type: 'POST',
        success: function( data ) {
            console.log( 'received disconnect' );
            var newData = JSON.parse( data );

            if ( newData.Message.code != 200 ) {

                var newbutton = '<input type="button" value="Detach File" class="classic detach-attachment" docid="' + docid + '" rel="' + relid + '" />';
                $scope.empty().html(newbutton).find('input').uniform();;

            } else {

                var newbutton = '<input type="button" value="Attach File" class="attach-attachment" docid="' + docid + '" rel="' + relid + '" />';
                $scope.empty().html(newbutton).find('input').uniform();;

            }

        }
    });

});

Answer 1

If multiple asynchronous requests are allowed and you need to wait for a successful response of all of them try wrapping them up in a auto-executable function:

    function abc(param1, param2)
    {

(function(param1,param2){
    $.ajax({
            url: '/editor/disconnectattachment',
            cache: false,
            data: datastring,
            type: 'POST',
            success: function( data ) {
                console.log( 'received disconnect' );
                var newData = JSON.parse( data );

                if ( newData.Message.code != 200 ) {

                    var newbutton = '<input type="button" value="Detach File" class="classic detach-attachment" docid="' + docid + '" rel="' + relid + '" />';
                    $scope.empty().html(newbutton).find('input').uniform();;

                } else {

                    var newbutton = '<input type="button" value="Attach File" class="attach-attachment" docid="' + docid + '" rel="' + relid + '" />';
                    $scope.empty().html(newbutton).find('input').uniform();;

                }

            }
        });


    }
}(param1,param2);

The above code is not a solution, but at least it will let you receive multiple success responses for multiple ajax request calls.

And you need to use the params inside where you have the data: datastring etc.

I hope it helps you someway!