YUI + Yahoo Maps Ajax JS dont get along
If you're using yahoo's ajax api you include a js file at the top of your page that loads much of the JS needed. This code conflicts with parts of YUI.
I use ColdFusion which includes YUI in some of its UI controls. Two things I have found thus far that don't work.
CFLayout collapse - The collapse option simply doesn't work. NO JS errors.
CFInput: Autocomplete - Throws the error yahoo.utils.dom.inDocument is not a function or something very similar. Perhaps a similarly named var is within the maps js file?
I am just finishing the cf.objective conf, and have limited bandwidth / focus atm so not much more testing to be done. My best guess: ColdFusion includes all its UI js files before any others. So the yahoo ajax api will overwrite its functions and thus it isn't likely to work. I will file an error report to yahoo, as its their two js files that are conflicting ironically.
Time to play with jquery clearly. :-)
Update: minutes after posting I found this post that confirms the issue an a workaround. Perhaps I can find a newer version of the maps api?
Like this entry? Subscribe to my blog.
Comments (3) - 570 views
Comments (moderation on)
1) You always want to move the Yahoo Maps JS file to the bottom of the page. This allows the page to load much faster, because of the parallel download issues with JS files and CSS files (but not their images). Also, The Yahoo maps images are expensive and heavy, so I always want them last. I highly suggest calling the loading of the Yahoo maps with setTimeOut() in JS (wrapping it in a function), so you can spare users the wait and the toll on the OS stack that accompanies the JS initialization.
You'll reduce your download times as well, by including whatever JS files you can in the page, rather than externalizing them. Caching them is worthwhile..if they are enormous libraries, otherwise, you can wait an 500MS for a 4KB JS file.
The CFLayout tags are dated already, and I, personally, want more granular control over my frameworks. I suggest using Spry, EXTJS, YUI, etc, but with the custom files instead of the standard CF Files. This way, you can easily control the load order. For example, MooTools does not get along with EXTJS, unless you change the order (so MooTools loads last). Spry 1.6 is unobtrusive to some degree, but the older Spry versions are not, and this will slow you down in development. CF8 uses an older version of Spry. MooTools and Prototype don't get along well, and EXTJS, combined with Prototype requires you load each in a specific order. And even then, you can run into a race conditions because of the parallel download stream issue with JS files.
If you're really haunted by the Maps code for Yahoo, you can use the Flash Maps from Yahoo which can reduce CPU burden and would have no interference with the Ajax frameworks.
Thanks so much for the detailed comment. I do use YUI now in other projects, but am new to yahoo maps ajax api. Its working pretty well save the issue above, but I will review everything you mention and continue to refine.
Sorry this is still a problem. If you follow the link above, I've tried to articulate the solution -- this solution is still current for the latest version of YUI (2.5.2) and the latest version of the Yahoo Maps Ajax API.