Ajax- XHR failed loading with internal server error 500

Question

I have a method delete ajax call to remove a field from table, but on click my console shows this error

and i get same error for my another post method ajax. And both works perfectly on my localhost and not on server. this is my ajax code,

    function delSubTask(sid,id){
    var place = 'sub-'+sid;
    var badge = 'badge-'+id;
    var count = document.getElementById(badge).innerHTML;
    count--;
    $.ajax({
        type: "DELETE",
        url: "/myurl/"+sid,
        data: {id:id},
        success: function(data) {
            console.log(data);
            var e = document.getElementById(place);
            $(e).fadeOut( "slow", function() {
                // After animation completed:
                $(e).remove();
            });
            document.getElementById(badge).innerHTML=count;
        },
        error: function(){
            alert('Failed to delete #errsub25');
            $('input:checkbox').removeAttr('checked');
        }
    });
}

Answer 1

It is hard to say because there are many reasons to cause HTTP 500 internal error. Mostly, it about your service on the server.

In my experience, it might because of CORS (more explanation here https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS ) because moving from localhost to actual server usually has this problem.

Or you might give more information about what is the response (or debug by yourself).