我怎样才能修复这个javascript冲突混乱(jquery + prototype + google visual + PRADO php)?

时间:2011-09-23 20:37:48

标签: javascript conflict google-visualization prado

我在Prado 2.1RC1上运行了一个相对较旧的webapp,我试图通过添加一些不错的google visualizations charts来增强它。

问题出现在整合google jsapi(取决于jquery)和prado2.1使用的旧库的时刻。

Prado使用一些内置库(其中一些是 base.js dom.js ajax.js 等) + 原型1.4

在我尝试集成tutorial example的第一时间,我在chrome javascript控制台中记录了两个错误。

  

未捕获RangeError: base.js上的数组长度无效:524

     

未捕获的TypeError:undefined不是函数

看着 base.js 我发现那些由shift函数中的原型错误引起的错误(我认为)因为shift是这样实现的:

shift function() {
    var result = this[0];
    for (var i = 0; i < this.length - 1; i++)
      this[i] = this[i + 1];
    this.length--;
    return result;
  }

但是当this.length == 0时,this.length--会爆炸。

因此,在修复此错误之后,我希望google nice图表能够显示出来......但是没有。在javascript控制台中没有引发任何错误,但我在div中使用红色背景渲染了这个文本,其中应该附加谷歌图表:

  

号码不是函数

我对这个错误一无所知。我怀疑webapp所需的大量javascript库存在一些混乱。

我知道考虑到我使用旧的,已弃用的,不支持的Prado和Prototype版本,情况并不是很好。但我非常n00b与PHP和这个框架。我真的不知道要花多少时间迁移到新的Prado版本来更新javascript库,我甚至知道我是否能够这样做。也许你们中的一些人有更多的经验可以告诉我在这种情况下最好的事情是什么,或者我该如何继续......

谢谢!如果您需要更多详细信息,请告诉我。

4 个答案:

答案 0 :(得分:2)

我不确定这是不是您的问题,但据我所知,当您尝试将jquery / google jsapi集成到您的项目中时,您似乎注意到了问题。

您不需要jquery,并且可以直接加载jsapi(和必要的可视化包)。这些应该是命名空间(如google.x.y),而不是干扰你的其他代码 - 尽管我可能会误解这可能会搞砸了。

以下是如何在没有jquery的情况下加载jsapi:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['table']});
</script>

这是问题吗?

答案 1 :(得分:0)

由于Prado使用的是Prototype,并且Prototype和jQuery都使用了“$”,因此请确保显式编写(jQuery)(#selector)而不是$(#selector)。这可能是您问题的根本原因。

答案 2 :(得分:0)

我有一个由jQuery驱动的模板,我将它用作我项目的布局(母版页)。

当我用$("selector")替换所有jQuery("selector")时,我避免了原型和jQuery之间的冲突。

答案 3 :(得分:0)

我相信最好不要使用google api的jquery包装器。这是因为使用$时jQuery和prototype之间存在冲突。如果你仍然必须使用jQuery,你需要调用jQuery.noConflict()来告诉jQuery不要将$指定为jquery的全局指针

包含prototype.js后,你需要包含jquery并调用noConflict()。

<script src="jquery.js"></script>
<script>
 jQuery.noConflict();
 </script>

应该放在com:TForm之后。因为TForm将prototype.js链接添加到页面。然后包含google jquery包装器。

现在“$”指向原型,“jQuery”指向jQuery

在JQuery网站here

上进行了解释