2009-11-05 99 views
0

我有一个页面,我需要为某些元素添加拖放功能。当drop事件发生时,它会对ajax调用一个php函数,然后刷新div的内容。我使用jQuery和jQueryUI进行拖放操作,并将CakePHP作为PHP框架使用(不确定这是否相关)。Opera和Google Chrome中的jquery ajax问题

在Firefox,Safari甚至IE浏览器中,一切正常,但在Opera或Chrome中,div的内容没有刷新(尽管PHP函数的执行被执行)。

所以,这里是代码:

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);} 
          }); 
         } 
       }); 
    }); 

基本上没有执行成功的功能,但如果我尝试看看errorThrown(在错误事件),它是“不确定”

+0

你可以发布URL到这个页面或演示?这里没有足够的证据来解释为什么会发生这种情况。 – hallvors

回答

1

我知道我已经发布了这个问题已经很长时间了,但这里是我发现的解决方案,以防别人需要它:问题不在于javascript,而在于CakePHP:html成功时添加了一个ajax表单(使用$ ajax-> form()呈现)。 $ ajax-> form()需要控制器中的$ data变量是一个数组,但由于某种原因,它并没有打破窗体的渲染,而Opera和Chrome并不喜欢这样。所以解决的办法是简单地添加到我的控制器中的itemToList()函数

$this->data = array(); 

0

我在代码中看不到会导致跨浏览器问题的任何内容。我的感觉是,这是一个问题,根本不在于代码,而是在Chrome和Opera中渲染div和/或其内容(即CSS问题或沿着这些行的东西,其中div的innerHTML是更新,但由于造型或定位,你没有得到你期待的视觉效果)。

您是否使用Dragonfly或其他开发人员工具检查过目标元素的内容实际上是否在请求成功后保持不变?沿着这些路线,您是否尝试在问题浏览器中逐步完成代码执行?您也可以尝试在JQuery.ajax选项中添加一个error处理程序,以查看请求本身是否存在问题,但我不相信问题出在哪里。

编辑:我没有看到代码块下面的最后一位。所以你已经验证了成功处理程序没有被执行。你说你确实尝试过为请求实现一个错误处理程序,并得到了一些未定义的结果,但我没有在代码中看到它。您可以发布错误处理程序的代码并描述错误中的内容未定义吗?

+0

我试过使用蜻蜓,并且div的内容保持不变。当我尝试查看请求的状态时,它在Opera中为0,在Chrome中为500. –

0

我认为他的意思是,alert(errorThrown)显示'undefined'。

1

尝试这样:

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); 
    } 
}); 

它会告诉你什么是HTTP响应你得到了你的要求。前段时间我也有同样的问题。我的脚本在Firefox和Chrome中运行良好,但在Opera和IE中没有任何功能。我检查了它,问题是,PHP后端正在返回404(我仍然不知道它是如何在Chrome和FF下工作的)。

+0

感谢您的回答,并且对于迟到的回复感到抱歉。这不是404错误,我尝试了你所说的,状态为0,Opera中的responseText为空。在Chrome中,状态是500,responseText也是空的。我不知道可能是什么原因造成的。 真奇怪的部分:这段代码基本上将项目从一个列表移动到另一个列表。有两种不同的方法可以做到这一点:拖放或从选择列表中选择目标列表。第二个选项工作得很好,虽然它调用了相同的动作,但更新了同一个div。 –