Question

With the following code:

            $('#langHref').html("Translating...").css("color","#FF9933");

            jQuery.ajax({
                type: "post"
                 , url: someUrl
                 , data: { "text": $('body').html() }
                 , async: false 
                 , success: function (data, status) {  
                     $('body').html(data);                      
                 },
                error: function () {
                    alert('We are sorry, there was an error in the translation service.');
                    //console.log("ERROR", arguments);
                }
            });

            $('#langHref').html("Select Language").css("color","");
        }

I have a <a> tag with the id of “langHref”, the idea here is that just before the ajax is called the link text is set to “Translating…” and its color changed to orange. After ajax completes the link text changes back to the standard “Select Language”.

This works well in FF but fails in IE and Chrome. I’ve tried all the beforeSend jQuery options and ajaxSend events to try to set it before the ajax goes out but to no avail.

If I turn off async: false then obviously it’s changeing the text back to “Select a language” immediately and you don’t see it work. I also tried async: true and put the “Translating….” call in beforeSend, which doesn’t work in any browser I tried.

Thoughts?

Answer 1

I think you want to add beforeSend to your ajax request and do this there like so:

beforeSend: function ( xhr ) {
    $('#langHref').html("Translating...").css("color","#FF9933");
 }

and a complete method too:

complete : function(jqXHR, textStatus) {
            $('#langHref').html("Select Language").css("color","");
},