conflicts with jQuery

[m3avrck]

Right now you cannot run the Address Book widget if you have already included jQuery (http://jquery.com) on the page. It appears to be some namespace conflicts.

Would be nice if they two could live together in harmony :-)

[kas]

Thanks for the heads up on this. I've sent it to engineering.

[kas]

Hey m3avrck,

It would help engineering out if they could see the page where this is happening so they can see the conflict... possible to post a URL here or send me a private message with a link?

Thanks,

Kathy

[zeepoll]

I'm having the same issue.

It looks like abc_launcher.js conflicts with jquery.js

I get the following error message in firebug...

str has no properties
http://www.plaxo.com/css/m/js/abc_launcher.js
Line 1

[zeepoll]

got it. i had the same issue.

the problem is related to jquery overriding the $- function

see http://docs.jquery.com/Using_jQuery_with_Other_Libraries

[kas]

Thanks for the debug help, zeepoll!

I've filed your comments with engineering.

Kathy

[eventualbuddha]

I ran into this same problem with Prototype (http://www.prototypejs.org/), since it also declares and uses the dollar function ($). To my knowledge, Prototype, jQuery, Mootools, Microsoft Atlas, and possibly others declare their own dollar functions.

Plaxo's implementation is similar enough to the above to make it work in some circumstances and fail in others, making it difficult to debug. I propose that Plaxo either choose a different, unique name ($pel, perhaps) OR defer to an existing dollar function if it exists, since the other implementations will work for Plaxo, but not the other way around.

This is a pretty trivial fix, and the fact that it has gotten so little attention since Nov '05 is a little disturbing. Please spend the 30 minutes necessary to address this issue.

For others encountering this problem, be sure to include your library of choice after the Plaxo js files.

[kas]

Thanks for the additional info, eventualbuddah!

Just one point to clarify, the first post on this problem was
December 29th, 2006 and not Nov 2005 (maybe poster's join date?). The widget was first released Jan 29, 2006.

So maybe it's less disturbing once you know that we've got a couple of big projects going on, and that 30 minutes has been hard to find in the last 3 months (and when we add up fix, build, qa it's a little more than 30 minutes.) If it had been over 2 years, yeah, I'd agree with you - that would be disturbing.

Our goal was to make the widget simple to implement and use, and we don't like to keep you guys waiting for fixes!

In any case, a big thank you to you and zeepoll for providing more insight into the issue. That should make it easier to fix!

Kathy

[taekk]

Any idea when this would be fixed? I'm getting the same "str has no properties" error. I tried removing all other scripts on the page to no avail.

[eventualbuddha]

My apologies, I misread the date of the original post. I realize that with QA etc it's more than 30 minutes, but it seriously is a quick fix - the problem is, of course, testing it in all the environments that the widget is supposed to work in.

Again, sorry for being disproportionately blunt about it. I look forward to it being fixed and appreciate that you guys have made this available.

[kas]

No worries, eventualbuddah. Blunt is ok. At least then I have the opportunity to address the concern, so I thank you for raising it.

Taekk, I'm sorry, I don't have a definitive date for it yet.

[kas]

Ok, engineering says they need a page that has this problem so they can see it and then check their fix against it. Anybody want to volunteer their site/page/code? You can send it to me in a private message.

Kathy

[sloppyjoe]

Hello Friendly Plaxo Engineers!

I would like to add my voice for an URGENT fix to your scripts to not take over $() and Class

There is hardly a serious web application out there today that is not using one of the good libraries out there. jQuery is very popular as are others. For a public access Widget - there is really no good excuse for taking over these functions - particularly $().

A workaround for jQuery folks... which i'm afraid to say is a little ugly. Is to NOT ADD THE PLAXO javascript via <script> tags in your document. Instead - when you get to where you need the Plaxo AB Widget call the jQuery functions:

$.getScript("http://www.plaxo.com/css/m/js/util.js");
$.getScript("http://www.plaxo.com/css/m/js/basic.js");
$.getScript("http://www.plaxo.com/css/m/js/abc_launcher.js");

This will load the necessary scripts. Your user can click the blue button and get their addresses. Then when you are done. You can Re-Map the jQuery object to $() with the following line of code:

$ = jQuery;

This is nasty - because it requires you to design your UI - such that no other user action is possible (that you want to use jQuery for) - while the Plaxo Widget is visible. If your UI does not support that you are in tough shape.

My solution was to put the Plaxo widget in a modal dialog -- actually a Lightbox (jqModal) - so the user options are limited. Then on the "Close" button for the dialog - i "re-bind" $ to jQuery.

Note also - if you have another button to add the addresses in your text area to your App - you can't use any jQuery functions on it - or if you do - you have to re-bind the calls to get the Plaxo Scripts.

Plaxo engineers - PLEASE PLEASE PLEASE fix this. It is now April - and this is TRULY a trivial fix on your end - that will save alot of people alot of hassels and make your widget more popular with developers.

In fact - try looking into jQuery.js for your own work... it is excellent & will save you alot of time & energy.

Thanks!
JoeM

[sloppyjoe]

Note - on the post above saying:

"Engineering needs a page showing this conflict to check their fix"

That is unlikely.

Please ask Engineering to:

1. go to www.jquery.com
2. download latest jquery.js
3. create a trivial HTML page as below:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript">
$(init);
function init(){
$('#button1').click(function(){alert("hello plaxo")});
}
</script>
<input type=button id=button1 value="click this please plaxo">
</body>
</html>

On this page clicking the button will give the alert.

Then add:

<script type="text/javascript" src="http://www.plaxo.com/css/m/js/util.js"></script>
<script type="text/javascript" src="http://www.plaxo.com/css/m/js/basic.js"></script>
<script type="text/javascript" src="http://www.plaxo.com/css/m/js/abc_launcher.js"></script>
<script type="text/javascript"><!--
function onABCommComplete() {
// OPTIONAL: do something here after the new data has been populated in your text area
}
//--></script>

to the document - does not matter where...

and the script will break on the page. will get error on load

Same will be true of many major libraries like prototype.js


If engineering has a fix ready to go - then this should be enough to test it against!

Thanks!!!! We know you are busy but this will be REALLY GREAT TO GET FIXED :)


Joe M

[kas]

Thank you, Joe M, for the simple page and instructions on reproducing the problem.

I'll get it over to engineering today!

Best,

kathy

[kas]

Hi Joe M and all,

Thanks for the page sample. Engineering has made a fix for this (conflicts with jquery). It's now live, so give it a go.

However!! We think this is unlikely, but if there were some developers assuming that $ and Class worked as before (prototype, widely used JavaScript lib), their implementation may now be broken. If we get reports on that, we'll have to figure something else out.

Let me know if the fix doesn't work for you.

Kathy

[sloppyjoe]

Looks Good - I tried it out - and after import of the updated Plaxo js files, jQuery now working fine with no conflicts.

Have not tried it out yet with prototype.js.

Thanks for the fixes friendly Plaxo folks!!!
Joe M

[kas]

Great to hear it's working for one of you... others?

Kathy

[thinq4yourself]

Hello Friendly Plaxo Engineers!

I would like to add my voice for an URGENT fix to your scripts to not take over $() and Class

There is hardly a serious web application out there today that is not using one of the good libraries out there. jQuery is very popular as are others. For a public access Widget - there is really no good excuse for taking over these functions - particularly $().

A workaround for jQuery folks... which i'm afraid to say is a little ugly. Is to NOT ADD THE PLAXO javascript via <script> tags in your document. Instead - when you get to where you need the Plaxo AB Widget call the jQuery functions:

$.getScript("http://www.plaxo.com/css/m/js/util.js");
$.getScript("http://www.plaxo.com/css/m/js/basic.js");
$.getScript("http://www.plaxo.com/css/m/js/abc_launcher.js");

This will load the necessary scripts. Your user can click the blue button and get their addresses. Then when you are done. You can Re-Map the jQuery object to $() with the following line of code:

$ = jQuery;

This is nasty - because it requires you to design your UI - such that no other user action is possible (that you want to use jQuery for) - while the Plaxo Widget is visible. If your UI does not support that you are in tough shape.

My solution was to put the Plaxo widget in a modal dialog -- actually a Lightbox (jqModal) - so the user options are limited. Then on the "Close" button for the dialog - i "re-bind" $ to jQuery.

Note also - if you have another button to add the addresses in your text area to your App - you can't use any jQuery functions on it - or if you do - you have to re-bind the calls to get the Plaxo Scripts.

Plaxo engineers - PLEASE PLEASE PLEASE fix this. It is now April - and this is TRULY a trivial fix on your end - that will save alot of people alot of hassels and make your widget more popular with developers.

In fact - try looking into jQuery.js for your own work... it is excellent & will save you alot of time & energy.

Thanks!
JoeM

sloppyjoe or someone else...

you mentioned that you put the address book widget in a modal box (jqModal), which I have also been trying to do. But the problem I keep getting is that when I load plaxo in the modal, it redirects the parent page (so I lose the modal). Is there any quick answers or help someone could lend...or do I need to start digging into the core a bit more of each set of javascript code to customize it to work?

Your help is appreciated!

[thinq4yourself]

...bump...