How can I fix this javascript conflict mess (jquery + prototype + google visualization + PRADO php)?

I have a webapp relatively old running on Prado 2.1RC1 and I am trying to enhance it by adding some nice google visualizations charts.

The problem arose at the moment of integrating google jsapi (that depends on jquery) and the old libraries used by prado2.1.

Prado use some built-in libraries (some of them are base.js, dom.js, ajax.js, etc) + prototype 1.4.

In a first moment when I tried to integrate the tutorial example I got two errors logged in the chrome javascript console.

Uncaught RangeError: Invalid array length on base.js:524

Uncaught TypeError: undefined is not a function

Looking at base.js I found out that 开发者_运维知识库those errores where caused by a prototype bug in shift function (I think) because shift is implemented like this:

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

But when this.length==0, this.length-- explodes.

So after fixing this bug I had the hope that google nice charts will show up... But no. No error was thrown in javascript console but I got this text rendered with red background in the div where google chart should be appended:

number is not a function

I have no clue on this error. I suspect that there is some mess with the great quantity of javascript libraries required by the webapp.

I know that the situation is not really good considering I am using a old, deprecated, non-supported version of Prado and Prototype. But I am very n00b with php and with this framework. I don't really know how much time would take to me to migrate to a new Prado version of to update the javascript libraries and I even know if I am able to do this. Maybe some of you with more experience could tell me what are the best things to do in this situation or how should I proceed...

Thanks!! And let me know if you need more details in the problem.

I'm not sure if this is exactly your problem, but from what I understand, it seems that you noticed issues when you tried to integrate jquery/google jsapi into your project.

You shouldn't need jquery to this, and can load the jsapi (and necessary visualization packages) directly. These should be namespaced (like google.x.y) and not interfering with your other code - though I may be mistaken about how this may mess things up.

Here's how you can load the jsapi without jquery:

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

Is that the issue?

Since Prado is using Prototype and the "$" is used by both Prototype and jQuery make sure you explicitly write (jQuery)(#selector) instead of $(#selector). It might be the root cause of your problem.

I beleive that it maybe better to not use the jquery wrapper of the google api. This is because there is a conflict between jQuery and prototype both using $. If you still must use jQuery you need to call jQuery.noConflict() to tell jQuery to not assign $ as the global pointer to jquery

After the prototype.js is included u need to include jquery and call noConflict().

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

It should be put after com:TForm. because TForm adds the prototype.js link to the page. Then include the google jquery wrapper.

now "$" points to prototype and "jQuery" points to jQuery

Explained on the JQuery site here

I had a template powered by jQuery and I used it as Layout ( Master page ) for my project.

I avoided conflicts between prototype and jQuery when I replaced all $("selector") with jQuery("selector").