Conflicts between jQuery and other javascript libraries

[GoogleCodeExporter]

_Steps to reproduce the problem_
1. Create a GWT project that uses prototype.js
2. Add gflot (version <= 2.4.0) and show a chart
3. Try to use Prototype (dollar sign)

_Output_
I expect to be able to continue using the Prototype Framework. Instead, the 
jQuery library loaded by gflot overrides it, making it unusable.

_Additional information_
From the Flot's FAQ:
 Q: Can I use Flot with libraries like Mootools or Prototype?
 A: Yes, Flot supports it out of the box and it's easy! Just use jQuery
instead of $, e.g. call jQuery.plot instead of $.plot and use
jQuery(something) instead of $(something). As a convenience, you can
put in a DOM element for the graph placeholder where the examples and
the API documentation are using jQuery objects.
    Depending on how you include jQuery, you may have to add one line of
code to prevent jQuery from overwriting functions from the other
libraries, see the documentation in jQuery ("Using jQuery with other
libraries") for details.

Original issue reported on code.google.com by Diego.N...@gmail.com on 11 Apr 2012 at 3:47

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Could you try adding the following line in your script :
jQuery.noConflict();

GFlot is using "jQuery" and not "$" to call flot. If I understand correctly the 
jQuery documentation, that should be enough 
(http://docs.jquery.com/Using_jQuery_with_Other_Libraries#Overriding_the_.24-fun
ction).

Original comment by nmr.morel on 11 Apr 2012 at 9:22

[GoogleCodeExporter]

Ah nevermind, the jquery lib isn't directly loaded so the call to noConflict() 
should have no effect. For now, you can load yourself the library and call 
noConflict() after.  See the usage wiki page for that. I'll see to add 
something to automatically do it.

Original comment by nmr.morel on 11 Apr 2012 at 9:27

[GoogleCodeExporter]

I decided to do just that for now, thanks for the quick response.

Original comment by Diego.N...@gmail.com on 12 Apr 2012 at 2:53

[GoogleCodeExporter]

I did a few tests. Here is the simplest solution with current gflot version.
Add those lines to your *.gwt.xml :
  <replace-with class="ca.nanometrics.gflot.client.resources.ExternalLoader">
    <when-type-is class="ca.nanometrics.gflot.client.resources.JQueryLoader" />
  </replace-with>

Then on your html page, add jquery js + noConflict like explained on jQuery api 
:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>

I added a *.gwt.xml file doing all this. With next version, you will just have 
to add
<inherits name="ca.nanometrics.gflot.GFlotJQueryNoConflict" /> 
instead of
<inherits name="ca.nanometrics.gflot.GFlot" />  

Original comment by nmr.morel on 15 Apr 2012 at 4:10

• Changed state: FixedNotReleased

[GoogleCodeExporter]

Original comment by nmr.morel on 22 Apr 2012 at 7:19

• Added labels: Milestone-Release2.4.1

[GoogleCodeExporter]

Original comment by nmr.morel on 22 Apr 2012 at 7:19

• Changed state: Fixed

[GoogleCodeExporter]

Original comment by nmr.morel on 16 Jun 2012 at 4:32

• Added labels: Milestone-2.4.1
• Removed labels: Milestone-Release2.4.1