My favorites | Sign in
Project Home Downloads Wiki Issues Source
New issue   Search
  Advanced search   Search tips   Subscriptions
Issue 375: Problem with using svgweb and jquery together
14 people starred this issue and may be notified of changes. Back to list
Status:  Fixed
Closed:  Apr 2010

Sign in to add a comment
Reported by thomaskelder, Nov 2, 2009
Svgweb and jquery seem to conflict. In the attached example script, I try to insert an svg document, while 
jquery is also loaded. When the flash renderer is forced, firebug shows several errors (see attached screenshot) 
and doesn't display the svg.

To reproduce the problem:
1. Copy test-jquery.html and test.svg to a directory on your webserver
2. Download jquery-1.3.2 from and place it in the same directory as test-jquery.html
3. Place the svgweb files in the same directory as test-jquery.html (or change the path in the file)
4. Load the page in firefox

Note that if I don't force the flash renderer, the svg displays fine. I still get the message "Error while 
firing onload: event is undefined".

While googling for this problem, I found this blog post, which looks like a similar problem:
4.1 KB   View   Download
67.5 KB   View   Download
814 bytes   View   Download
Nov 3, 2009
jQuery registers events using window.addEventListener, which is redefined by svgweb.
I modified _interceptOnloadListeners() to ovverride window.addEventListener
intercepting two new events, "svgload" and "onsvgload", that aren't used by jQuery,
and any other JS framework either. 

Obviously, I had to modify every call that registers a "load" or "onload" event,
changing them according with the two new events. It seems to be working perfectly
now. I'm attaching the modified svg-uncompressed.js. 
281 KB   View   Download
Nov 3, 2009
Project Member #2
Interesting fix; can you actually generate a patch file with the differences and
attach it to this bug? Were you able to QA it on Internet Explorer and FF/Safari?

BTW, in your original page, did you have svg.js as the first script file loaded? That
is required for SVG Web; perhaps that would have made it work with JQuery.

Can you create a reduced test case using JQuery and SVG Web and attach it to this
bug? That will help me address this quicker.
Owner: bradneuberg
Nov 3, 2009
Yes I can generate a patch, but I'm trying to make it works in IE too first. It works
nice in FF and Safari, but not in IE, and I'm working on it. 

The svg.js is the first script loaded, anyways, and it generated errors with jQuery
before my patch.

I'll attach the recuced test case when I get IE works too ;)
Nov 4, 2009
Well, I worked a lot trying to understand why IE gives me errors sometimes, but I
still can't figure out what is the problem. 

I'm attaching the patch, anyway, and a modified helloworld.html. Use it instead of
the helloworld.html which comes with the svgweb release. When you open with FF,
firebug gives you an error while firing the load event. Using my patch the error
doesn't happen. This test-case works fine in FF, Safari and IE.

Unfortunately, using the patch in other sample-pages, it gives you other errors,
sometimes in FF and sometimes in IE. I noticed that this happens when in the page
there is a redefinition of window.onload. I'm pretty sure that jQuery (and maybe
every other JS framework) define some events on window.onload, so it could be a
problem to redefine that while using jQuery.

Since the modified helloworld.html that I'm attaching still works fine even
redefining window.onload, it could be some piece of code in other pages that gives
some problems. I'll keep studing it, anyway.
4.6 KB   View   Download
5.4 KB   View   Download
Nov 4, 2009
#5 thomaskelder
Thanks for the patch! I can confirm it works on your helloworld example in firefox. However, when I try it in 
my own example, firebug shows me this error and the image doesn't show:

uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c 
(NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "JS frame :: 
http://localhost/wikipathways/wpi/extensions/PathwayViewer/lib/svgweb/svg-uncompressed.js :: anonymous :: line 
2415" data: no]

This also happens when I run the demo page distributed with svgweb. Both have in common that they dynamically 
add the <object> element by a javascript. In helloworld.html, the <object> element is already present in the 
html. Perhaps the problem lies in that part.

In the meantime, I found another workaround to solve the jQuery conflict by setting the jQuery.event.triggered 
to true. This prevents jQuery from messing with the event that is triggered by svgweb. See the attached patch 
for the changes. I realize that this not the most elegant solution, but it might be useful until a more 
general solution is found.
729 bytes   View   Download
Nov 4, 2009
Thanks Thomas for the patch and for the advices, they gave me an hint on what I have
to look for. I'm pretty sure that svgweb redefine something that will be redefined
also by jQuery, so it would be better to find a way to redefine stuffs without
messing up with js frameworks in general.
Nov 5, 2009
I found the problem, finally. Now I get svgweb working together with jQuery without
any error in FF, Safari and IE. I'm attaching the new (second) patch, apply it after
the first. Brad, please let me know if you prefere a unique patch.

Also, it would be better to test svgweb with other frameworks, such as mootools,
prototypejs, ext.js, dojo... They should already work fine with my patch, but the
tests would tell us it. Brad, is it ok to attach here the tests for the others
frameworks, or is it better to open a new issue for each of them?
888 bytes   View   Download
Nov 5, 2009
#8 thomaskelder
I can confirm it works after applying your two patches (tested in FF and IE). Thank 
you very much for fixing this!
Nov 5, 2009
Project Member #9
Thanks for doing this!

Can you consolidate the patch into a single patch I can apply?

Also, I think its better to open new issues for other individual toolkits we might
have issues with, such as "Make sure SVG Web and Dojo work together" for example,
perhaps with a reference to  Issue 375 .
Nov 6, 2009
Here is the single patch.

I'll open new issues as soon as possible and attach test-cases for the other most
used toolkits.
4.3 KB   View   Download
Nov 6, 2009
Project Member #11
Thanks Gregorio!
Nov 19, 2009
Project Member #12
(No comment was entered for this change.)
Labels: Patch
Nov 20, 2009
Project Member #13
(No comment was entered for this change.)
Status: Started
Labels: -Priority-Medium Priority-Critical
Dec 21, 2009
based on Gregorio's Nov 06, I created a new patch against r1036. See attached.
2.4 KB   View   Download
Dec 22, 2009
Project Member #15
Thanks for the patch. The root of the problem is that patch takes away being able to
subscribe to the onload event and introduces a new event, SVGLoad. I'm not against
doing this, I've just been mulling over whether it makes sense to break backwards
compatibility here and have a new event; whether to just go back to the (much older)
svgweb.addOnLoad() system; or whether to figure out whether there is a way to keep
the window.onload abstraction and magic without breaking JQuery and other libraries.
I'm not sure yet what I'm going to do.
Jan 7, 2010
I hate to ask but could you possibly give a rough estimate/forecast of how long you reckon this issue might 
take to end up resolved? Is it something very complex? 

I don't want to sound demanding and I really appreciate the work, but I need to make a decision about 
whether to use SVG in an upcoming project and really love to use svgweb - but jQuery compatibility is a 
necessity. So just trying to kind of get an idea of what the options are. Obviously the idea of being able to 
reliably use SVG on IE is very compelling.

Thanks and sorry to be "that guy" ....
Jan 20, 2010
I've been watching this issue since it was posted as it is an absolute showstopper
which prevents us from switching some graphics to svg. I've got a seperate branch on
my main project with a 'mostly working' svg implementation waiting to go -- provided
svgweb and jquery play nice. With this issue outstanding, developers have to make the
choice between svgweb and jquery, and I'm afraid svgweb will lose in my case (and
probably most projects already invested in the awesomeness that is jquery).

I also don't want to join Sho in being 'that guy' but..

Jan 22, 2010
#18 thomaskelder
@sho.fukamachi & ivar: In practice, the patch attached to this issue seems to works 
fine, so maybe it's an idea to use the patched version of svgweb for your project until 
this issue has been fixed in a better way? Just apply the patch to the latest release. 
So far, I haven't experienced any problems with this approach in my project that uses 
Jan 22, 2010
Thanks for that information Thomas. Great to hear confirmation that someone's using it without issues. Will give 
it a shot!

For people's convenience I attach the patched svg.js file.
319 KB   View   Download
Feb 5, 2010
Project Member #20
Hi everyone, sorry for the delay. I haven't had as much time to work on SVG Web lately. 
This is an important bug that I want to get to but there might be some more delay since 
I'm gearing up in a new position at work. 

In terms of the patches, I'll probably go this route and get rid of the window.onload 
magic I have now. This will be a breaking change but its probably safer in general to do.
Feb 6, 2010
Hi everyone, I tried to analyze the thoughts of Brad, and made a new patch based on
his considerations.
Brad, probably you'll modify something to make it better, but the logic behind the
patch is pretty simple. Let me know if it is ok with this new approch.
3.1 KB   View   Download
Feb 13, 2010
I have no idea how to install a patch. For now, IE can just display a PNG file.
Feb 16, 2010
Project Member #23
Hi everyone, thanks for all your work and sorry for my tardiness on this. 

Reviewing Greg's patch, I'm fine with his approach. If you also submit a patch that 
does the following it will make it easier for me to apply:

* Update the Quick Start and User Manual to remove the old way of registering onload 
listeners and indicate how to do it this way.
* Create a simple test case in tests/browser-tests/issue-tests/ issue375  that shows 
SVG Web and JQuery working together. Create a README.txt file that indicates the 
version of JQuery, it's license, and a bit of info on the test.
* Update the tests in tests/browser-tests/test_js1.html and test_js2.html to make 
sure they test the new functionality.
* Ensure this works with both embedded SVG right in the HTML and on an onload 
listener in an SVG file -- what happens for onload listeners inside SVG files? Does 
that stay the same?
* Create some simple "Porting Guide" text that I can put in the release notes on how 
this change affects anyone who used to use SVG Web since it is a breaking change.
* Update all the demos in samples/javascript-samples to use the new syntax.

These are all the things I have to do on my side which is why I've been a bit slow 
since my plate is full right now. If you submit a patch that does all these things I can 
apply it easier and then push out a new release sooner! Thanks everyone!
Feb 17, 2010
Hi everyone.

Sure Brad, I can do all the stuffs you need. Hopefully I'll have enough time to do
them within this week.

Apr 6, 2010
Project Member #25
I added a test case for this issue under tests/browser-tests/issue-tests and checked
them in:

 issue375 -jquery-1.4.2.min.js
 issue375 .html
 issue375 .svg

Apr 6, 2010
Project Member #26
This issue was closed by revision r1070.
Status: Fixed
Apr 7, 2010
Project Member #27
Documentation on updating your code that uses SVG Web with this fix here:
Apr 7, 2010
Project Member #28
 Issue 402  has been merged into this issue.
Apr 7, 2010
Project Member #29
 Issue 403  has been merged into this issue.
Apr 7, 2010
Project Member #30
 Issue 404  has been merged into this issue.
Sign in to add a comment

Powered by Google Project Hosting