jquery-iframe-transport icon indicating copy to clipboard operation
jquery-iframe-transport copied to clipboard

Populate responseText when empty for jQuery 1.10

Open JangoSteve opened this issue 11 years ago • 0 comments

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:

  1. Using this iframe-transport.
  2. Using jQuery 1.10.x.
  3. 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.

JangoSteve avatar Jul 06 '13 15:07 JangoSteve