JQuery Conflict – Forcing Buddypress Compatibility on WordPress Plugin

After several hours of research of trying to dig to the root of this conflict, I’m caving – time to let the army at SO work some magic. I’m having trouble resolving whatever jquery/ajax conflict that’s preventing a registration form I have from showing Ajax-driven file upload buttons. The form is driven by a plugin called ‘User Meta’, which basically manages extra fields and forms for users via the wp_usermeta table).

You can see the problem form here (note ‘Business Logo’ and ‘Avatar’ don’t have upload buttons): http://dev.buildersinaugusta.com/members/rrawls/ However,in addition, I can also show you the same form that shows the file upload buttons working, on this page: http://dev.buildersinaugusta.com/member-profile/
The difference? The non-working form sits on buddypress, while the working form sits on a standard wordpress page. So the issue is definately rooted somehow with the buddypress templates I’ve setup, for which I have a modified template using the buddypress template pack plugin.

Read More

More Background: If helpful info, my theme is a Gantry powered Rocket Theme.

Knowing that most wordpress plugins are not compatible with Buddypress, it wasn’t a big surprise to see that more than half the JS and CSS plugin elements were not being loaded, but some were, which retains all major functionality, only the ajax file uploads are being problematic. The plugin does load it’s own jquery / jquery ui libraries, and they clearly play nice with one another on standard wordpress pages, but not on the buddypress pages.

My main stab at fixing this (which worked to manually force compatibility for other plugins, though they were much more lightweight) is, using firebug, determine all missing elements and manually enqueue them into functions.php, which you see the result of right now at the bottom of the page. In this case a bulky fix (if it even did work) to be sure, and one I’d want to streamline later, but the quickest way to troubleshoot that I know of.

Obviously, the load order of these elements is probably a problem – half loading in the head, and my manual enqueue’ed loading in the bottom of the body. But that’s as far as I’ve gotten. I just can’t seem to wrap my head what to look for next.

If needed, I can paste full source code on both pages here, but I thought that a link to the pages in this case would be more appropriate. Any help would be greatly appreciated.

Related posts

Leave a Reply