Problem with jquery ajax in Opera and Google Chrome

Question

I have a page where I need to add a drag and drop functionality to certain elements. When the drop event occurs, it makes an ajax call to a php function and then refreshes the contents of a div. I'm using jQuery with jQueryUI for the drag and drop, and CakePHP as a PHP framework (not sure if this is relevant).

Everything is working just fine in Firefox, Safari and even IE, but in Opera or Chrome the contents of the div isn't refreshed (although the action from the PHP function is executed).

So, here is the code:

jQuery('#lists div').
    filter(function() {return this.id.match(/item[\d]+_[\d]+/);}).
    each(function() { jQuery(this).draggable( {axis: 'y'}); });

jQuery('#lists div').
    filter(function() {
        return this.id.match(/list[\d]+/);}).
               each(function() { 
                   jQuery(this).droppable({
                      drop: function(event, ui) {
                            dropID = jQuery(event.target).attr('id');
                            dragID = jQuery(ui.draggable).attr('id');

                            itemID = dragID.substr(dragID.lastIndexOf('_') + 1);
                            oldListID = dragID.substr(4).replace(/_[\d]+/g, '');
                            newListID = drop.substr(4);

                            jQuery.ajax({
                                url:  "/lists/itemToList/"+itemID+"/"+oldListID+
                                      "/"+newListID,
                                type: "POST",
                                success: function (data) {
                                     jQuery('#lists').html(data);}
                            });
                         }
                 });
    });

Basically, the success function isn't executed, but if I try to see the errorThrown (on the error event) it is "undefined"

Answer 1

I don't see anything in the code that would cause a cross browser issue. My feeling is that it's a problem doesn't lie in the code at all, but in the rendering of the div and/or its contents in Chrome and Opera (i.e. a CSS problem or something along those lines where the innerHTML of the div is updated, but because of styling or positioning you don't get the visual result you were looking for).

Have you checked using Dragonfly or some other developer tool to verify that the contents of the target element are in fact unchanged after a successful request? Along those lines have you tried stepping through the code execution in the problem browsers? You could also try adding a error handler to the JQuery.ajax options to see if there is some problem with the request itself, although I don't believe that is where the problem lies.

EDIT: I didn't see that last bit below the code block. So you have verified that the success handler isn't being executed. You said that you did try and implement an error handler for the request and got some undefined result, but I don't see it in the code. Could you post the code for the error handler and describe what in the error is undefined?

Answer 2

I think he means, that alert(errorThrown) is showing 'undefined'.

Answer 3

Try something like this:

jQuery.ajax({
   url:  "/lists/itemToList/"+itemID+"/"+oldListID+
      "/"+newListID,
   type: "POST",
   success: function (data) {
      jQuery('#lists').html(data);
   }
   error: function (XMLHttpRequest, textStatus, errorThrown) {
      alert(XMLHttpRequest.status);
      alert(XMLHttpRequest.responseText);
   }
});

It will show you what http response are you getting for your request. I had the same problem some time ago. My script worked great in Firefox and Chrome, but it didn't do anything in Opera and IE. I checked it and the problem was, that the php backend was returning 404 (I still don't know how did it work under Chrome and FF).