jquery-iframe-transport
jquery-iframe-transport copied to clipboard
Populate responseText when empty for jQuery 1.10
For some reason, when I updated to jQuery 1.10, the jqXHR.responseText
stopped being populated with the text response value from the ajax request. I have no idea why this is, and I've verified that it only happens with jQuery 1.10.0 through 1.10.2.
Basically I have a request being submitted with iframe: true
, and I have a success callback attached, which looks like this:
function(evt, data, status, xhr) { console.log('success!', xhr); $('#comments').after(xhr.responseText); });
So, it's logging the xhr
object to the console and then appending the responseText
value to the DOM (I'm dealing with dataType: 'html'
here). With jQuery 1.8 or 1.9, it works as expected, and you get this in the console:
success!
Object {readyState: 4, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}
abort: function ( statusText ) {
always: function () {
complete: function () {
done: function () {
error: function () {
fail: function () {
getAllResponseHeaders: function () {
getResponseHeader: function ( key ) {
overrideMimeType: function ( type ) {
pipe: function ( /* fnDone, fnFail, fnProgress */ ) {
progress: function () {
promise: function ( obj ) {
readyState: 4
responseText: "<span>↵HTML response:↵</span>↵↵<table>↵<tr class='comment' id='comment-365'>↵ <td>asdf</td>↵ <td>asdf</td>↵ <td><a href="/system/attachments/365/original/humans.txt?1373052896">humans.txt</a></td>↵ <td></td>↵ <td><a href="/comments/365">Show</a></td>↵ <td><a href="/comments/365/edit">Edit</a></td>↵ <td><a href="/comments/365" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow">Destroy</a></td>↵</tr>↵↵</table>↵"
setRequestHeader: function ( name, value ) {
state: function () {
status: "200"
statusCode: function ( map ) {
statusText: "OK"
success: function () {
then: function ( /* fnDone, fnFail, fnProgress */ ) {
__proto__: Object
Notice the responseText
populated above. When updating to jQuery 1.10.x, nothing gets appended to the DOM, due to the fact that responseText
is blank. And you get this in the console:
success!
Object {readyState: 4, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}
abort: function ( statusText ) {
always: function () {
complete: function () {
done: function () {
error: function () {
fail: function () {
getAllResponseHeaders: function () {
getResponseHeader: function ( key ) {
overrideMimeType: function ( type ) {
pipe: function ( /* fnDone, fnFail, fnProgress */ ) {
progress: function () {
promise: function ( obj ) {
readyState: 4
setRequestHeader: function ( name, value ) {
state: function () {
status: "200"
statusCode: function ( map ) {
statusText: "OK"
success: function () {
then: function ( /* fnDone, fnFail, fnProgress */ ) {
__proto__: Object
Notice that responseText
is missing. I did some debugging, originally thinking maybe jQuery changed the order of events firing and that the success callback was getting called before jQuery populated it, but that wouldn't make much sense considering the status
, statusCode
, and statusText
are already populated. After further debugging it seems jQuery just never populates it when using the transport when a non-standard dataType
is specified.
So, to summarize, this only happens when all three of the following conditions are true:
- Using this iframe-transport.
- Using jQuery 1.10.x.
- The
dataType
is specified (if it's blank, and the defaults are used, it works fine).
Adding this to iframe-transport fixed it and seems to be backwards compatible with jQuery 1.9, etc. as well.