Search jQuery

jQuery Forum

jQuery calls error callback on successful ajax request (status 200)

in Using jQuery • 12 years ago

Why, oh why does jquery think my header only response is an error?
I am using jQuery to submit a form via ajax in my ruby on rails application. The server responds with a header with status 200. (I don't need to send anything else to the page, just an 'ok') But jquery seems to think this is erroneous.

jQuery 1.4
Ruby On Rails 2.3.8

Thanks,
Nik

Replies(11)

Kevin B

Re: jQuery calls error callback on successful ajax request (status 200)

12 years ago

can we see some code? just because the status was 200 doesn't mean an error hasn't happened somewhere else, such as when jquery parsed the return data. try using the error callback of the .ajax() method to get more information as to what the error is.

-- Kevin

------------------------------------------------
http://www.tentonaxe.com - jQuery Snippets and Tutorials

demersus

Re: Re: jQuery calls error callback on successful ajax request (status 200)

12 years ago

Ok, this is a bit involved....
Basically what I have is a Ruby on Rails entity called 'Job'
Here is the Action that receives my Ajax POST request:

def update
        @job = Job.find params[:id]
        if @job.update_attributes params[:job]
            respond_to do |format|
                format.html do
                    flash[:notice] = "Job updated successfully. (ID: #{@job.id})"
                    smart_redirect @job
                end
                format.json {head :ok}
            end
        else
            respond_to do |format|
                format.html do
                    flash.now[:warning] = AppConfig.messages['submission_invalid']
                    render :edit
                end
                format.json {render :json => @job.errors, :status => :unprocessable_entity}
            end
        end
    end

So what this does is tries to update the job from the submitted data, if it can, it responds by either redirecting to the job detail page, or if the requested content-type is json (AKA my Ajax request), it sends a header with status 200. No response text. By sending http status code of 200, I am expecting jQuery to treat this as a successful request.

Here is my jquery:

jtable = $('section.jobs.open-with-budget table');
    jtable.find('td.target-completion-date').each(function(){
    $(this).append('<button title="edit" class="action edit">edit</button>');
    });
    jtable.find('button.edit').click(function(){
    tr = $(this).closest('tr');
    job_id = tr.attr('data-record-id');
    form = $('<form class="formtastic"></form>');
    form.append('<fieldset><ol><li>\n\
        <label for="job[TargetCompletionDate]">Target Completion Date</label>\n\
        <input type="datepicker date" name="job[TargetCompletionDate]" value="' +
        $(this).siblings('span.value').text() + '" />\n\
    <span class="hint">mm/dd/yyyy</span></li></ol></fieldset>\n\
    <input name="_method" type="hidden" value="put" />\n\
    <input name="authenticity_token" type="hidden" value="' +
        $('#authenticity-token').attr('content') + '" />');
    form.appendTo('jtable');
    form.dialog({
        title: tr.find('td.address').text(),
        modal: true,
        buttons: {
        Ok: function(){
            $.loadingBlocksUI = true;
            $.ajax({
            type: 'POST',
            url: '<%= jobs_path %>/' + job_id ,
            dataType: 'json',
            data: form.serialize(),
            success: function(data) {
                spn = tr.find('span.value');
                spn.text(form.find('input[name*=TargetCompletionDate]').val());
                spn.siblings('span.error.flag').remove();
                $(this).remove();
            },
            error: function(xhr) {
                if(xhr.status == 422) {
                alertValidationErrors(parseErrors(xhr));
                } else {
                alert('An error occurred while processing the request.');
                }
                $(this).remove();
            }
            });
            $(this).dialog('close');
        },
        Cancel: function(){$(this).dialog('close');}
        }
    });
    return false;
    });

So to explain:

jtable is the table of data I am working with

I want to update one attribute called 'TargetCompletionDate'
So, I find the cell, inject an edit button.
When the edit button is clicked, it opens a ui dialog box with a form inside.
This form only contains one field to update, (TargetCompletionDate)
-- ANYWAY -- All of this works as described.
When the user clicks the 'Ok' button, it serializes the form and sends it to the above action.
If their are validation errors, the action renders those to json, and returns http status 422 (unprocessable_entity)
if the post action is successful, it simply returns a header response with status 200.

So, what I am assuming is that jquery would call my success callback because of the status code of 200.
but it is not. It calls my error callback. The error callback checks for http code 422. If 422, it will render the validation errors. If anything else, it will alert ''An error occurred while processing the request."

With firebug i have inspected the xhr object inside the error callback and it reports status of 200, thus calling the alert.

I hope this makes sense....

Kevin B

Re: jQuery calls error callback on successful ajax request (status 200)

12 years ago

hmm... i wonder if jquery would throw an error if it is expecting json (dataType: "json") and doesn't get any return data. not in a place where i can test that atm.

I would assume it would just return undefined as the data parameter to the success method, however, if there are any extra characters being returned, it may be throwing an error when it tries to parse those characters as json.

Edit: at this point i'm just assuming the issue is only the ajax request and the data returned from the request, whether it being 200 or 402.

However, you could use the complete callback instead of success and error and examine the request headers. if the status code is 200, call success method, otherwise call the error method. take the success and error methods out of the equation if you are positive that status code of 200 will always mean success and not an error page incorrectly returning a status code of 200

-- Kevin

------------------------------------------------
http://www.tentonaxe.com - jQuery Snippets and Tutorials

demersus

Re: Re: jQuery calls error callback on successful ajax request (status 200)

12 years ago

That is what I was thinking, so what I did to remedy the situation is to return just a json boolean true. As the response text.

format.json {render :json => true}

That way there is actually a responseText in the xhr object. jQuery happily accepts this and I am on my way. But, I wonder if jQuery should care. I would think that any of the http 200 codes would be sufficient for a successful ajax request.

It seems more correct in my particular application for the server to just respond 'Ok' (status 200). Because the view does not need anything else. It just needs to know if the server accepted the changes, or if it rejects them because of validation failure.

EDIT: In response to your edit: I could do what you suggested with a complete callback, but I don't understand why jquery would call error on status 200. Firebug does not show any javascript errors. The only thing that I can see causing the behavior is the fact that there is no response text. Just a header response. Which I would think to be a valid response. I wonder if a POST request according to HTTP guidelines is required to return a responseText??

Kevin B

Re: jQuery calls error callback on successful ajax request (status 200)

12 years ago

here's the issue. jquery expects json, so it tries to parse the response text as json. that parser is what throws the error, if you examine the textstatus of the error callback you will see "parseerror" as the reason. the ajax call was successful, but there was an error parsing the response.

Look at it this way. if you are expecting json, and you get html, you dont want the success callback to happen, there was an error in one way or another.

-- Kevin

------------------------------------------------
http://www.tentonaxe.com - jQuery Snippets and Tutorials

demersus

Re: jQuery calls error callback on successful ajax request (status 200)

12 years ago

That makes sense.

I have to set my contentType to json because if there are validation errors, they are returned in the specified format. So maybe the best route is to return some kind of json whether it is an empty object, or a boolean true, so that jquery gets what it wants. Its not the end of the world for me to modify my code to return 'true' in json. That is what I ended up doing anyway.

Thank you very much for your time.

Identifier

Re: jQuery calls error callback on successful ajax request (status 200)

9 years ago

This bug still exists in jQuery 1.9.1. If the server returns any 200 status except 204 then jQuery assumes there is data in the response, even if response == "". Search for the comment "// If we have data, let's convert it" in jquery-1.9.1.js to see exactly where this is happening. As part of ajaxConvert it will eventually call parseJSON, which may call window.JSON.parse which throws a "Syntax error" exception when data == "".

Identifier

Re: jQuery calls error callback on successful ajax request (status 200)

9 years ago

Ahh, I see this was introduced in 1.9 and mentioned in the upgrade notes: http://jquery.com/upgrade-guide/1.9/#jquery-ajax-returning-a-json-result-of-an-empty-string

jQuery.ajax returning a JSON result of an empty string

Prior to 1.9, an ajax call that expected a return data type of JSON or JSONP would consider a return value of an empty string to be a success case, but return a null to the success handler or promise. As of 1.9, an empty string returned for JSON data is considered to be malformed JSON (because it is); this will now throw an error. Use the error handler to catch such cases.

phabtar

Re: jQuery calls error callback on successful ajax request (status 200)

9 years ago

I have a similar problem. Instead of posting in a separate thread I'll just post here.

$.ajax({
                    url: siteToanalyze,
                    type : 'GET',
                    dataType : 'html',
                    success: function (result) {
                        alert(result)
                        content = result;
                        analyzeCode(content, siteToanalyze, pages, null)
                    },
                    error: function (jqxhr, status, errorThrown) {
                        alert("Failure, Unable to recieve content")
                        alert(jqxhr.responseText);
                    }
                });
Here also , the browser shows that it's a successful Get (with code 200). But the error method is called.
My ajax call doesn't have dataType as json, so when the server returns a html page it should be a successful call right? I also tried giving dataType as 'html' explicitly. In my case also, it seems to be a 'parseerror' .
The strange thing is when running the server on localhost and the url I give to analyze is also from a localhost web site, this is not a problem, it works fine. But when the server is running on test server, and I give the localhost url to analyze, the above problem happens. The ajax call is successful to the given localhost url, but the error method is called.
Basically what needs to happen is, when I give the url to analyze, via the ajax call I get the html code of the page in the url, and send that code to the server to analyze.
Thanks for any help.