代码之家  ›  专栏  ›  技术社区  ›  A. M.

Opera和Google Chrome中的jQuery Ajax问题

  •  0
  • A. M.  · 技术社区  · 15 年前

    我有一个页面需要在其中向某些元素添加拖放功能。当Drop事件发生时,它对一个php函数进行Ajax调用,然后刷新一个Div的内容。我使用jquery和jqueryui进行拖放,并将cakephp作为一个php框架(不确定这是否相关)。

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

    基本上,没有执行success函数,但是如果我试图看到抛出的错误(在错误事件上),它是“未定义的”

    4 回复  |  直到 14 年前
        1
  •  1
  •   Krzysiek Dróżdż    15 年前

    尝试如下操作:

    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下是如何工作的)。

        2
  •  1
  •   A. M.    14 年前

    我知道我发布这个问题已经有很长时间了,但这里是我发现的解决方案,以防其他人需要它:问题不是在javascript中而是在cakephp中:成功添加的HTML包含一个Ajax表单(使用$ajax->form()呈现)。$ajax->form()需要控制器中的$data变量作为数组,但由于某种原因,它不是数组,这破坏了表单的呈现,而opera和chrome不喜欢这样。所以解决方案是简单地添加

    $this->data = array();
    

    到我的控制器中的itemtolist()函数。

        3
  •  0
  •   Ryan Lynch    15 年前

    我在代码中没有看到任何可能导致跨浏览器问题的内容。我的感觉是,问题不在于代码,而在于在chrome和opera中呈现DIV和/或其内容(即CSS问题或沿着这些行的某些内容,其中 innerHTML DIV的更新,但由于样式或位置的原因,您无法获得所需的视觉效果)。

    您是否使用dragonfly或其他开发人员工具进行了检查,以验证成功请求后目标元素的内容实际上是不变的?沿着这些线,您是否尝试过在有问题的浏览器中单步执行代码?您也可以尝试添加 error 处理程序到 JQuery.ajax 查看请求本身是否存在问题的选项,尽管我不认为这就是问题所在。

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

        4
  •  0
  •   Krzysiek Dróżdż    15 年前

    我想他是说,警报(出错)显示“未定义”。