By Dreamonde Limited / Alfred Tang on Tuesday, 08 April 2014
Posted in Technical Issues
Replies 9
Likes 0
Views 854
Votes 0
Hi Team,

I am not sure if this is pure EasySocial issue (guess some JS conflict with T3 + J3.2.3). Actually I have a similar issue previously while upgrading from Joomla 3.2.2 to 3.2.3, in Hikashop, and even Jomsocial. (I will migrate my site from Jomsocial to EasySocial, very soon)

Issue with EasySocial (with J3.2.3 + T3 template framework) :
- a strange empty dropdown box under all dropdown menu
- when click, it expands but it never disappear again once the selection is made or click outside the dropdown menu
- I guess it's JS conflict somehow
- a similar issue happened before with Jomsocial (for duplicate menu - one default menu, another one T3-design-menu) I've managed to get rid of the issue by turning off CSS/JS Compression and JS minify.

However, this time with EasySocial, the last solution doesn't work.

FYI, I got below error message in Chrome inspector:
>> Failed to load resource: the server responded with a status of 404 (Not Found) https://192.168.0.112/main/media/foundry/4.0/chosen/chosen-sprite.png

I still manage to get it working by adding below CSS to control determine mouse action, but when a selection is made, user needs to click elsewhere to get the menu disappear (CSS behavior)
body div#fd.es .chzn-container .chzn-drop {
display: none;
}
body div#fd.es .chzn-container-active .chzn-drop {
display:block
}


Not sure if you have any test environment that similar to me :
- Joomla 3.2.3
- T3 framework

I am still testing the ES in my offline UAT environment and still don't have any production environment for your investigation. Or you may show me some lights to check what's go wrong? Thanks a lot.

p.s. attach is the picture without my CSS fixes.

Best regards,
Alfred/ Dreamonde
Hello Alfred,

Hm, this is actually the first time that I have seen such issues. Which particular page are you hitting this? Perhaps I can try this on my end with T3 but it would be best if you could upload this temporarily to an online location so that we can run some tests on the site since we need to reproduce your environment and some time it's hard to reproduce the same exact issue
·
Tuesday, 08 April 2014 23:17
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks, let me arrange.... or maybe I can upgrade our production site for your testing since this is not a major issue that will hit our production environment at the moment. We are still running tests internally and will give you news when it is online. Thanks for your help ahead.

FYI, all front-end pages with drop-down menu will have this issue. Especially "edit profile".

Cheers.
·
Wednesday, 09 April 2014 00:28
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello,

Thanks, it would be easier for us to test this on the dev site because I could get our designers to look into this since they are more efficient in this area
·
Wednesday, 09 April 2014 13:06
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Mark,

May I know what .js actually controlling the dropdown menu behavior? (ES- privacy setting) since I found this only affect default-pulldown menus from my site; and also the display and hide of the "custom privacy" icon. And now affecting the "Custom Privacy" never work since the "icon" cannot be unhide while choosing "Custom" for privacy.

or, anywhere I should check for normal operation of the .js that controlling the menu.

May I know what JQUERY and JQUERY UI version you are recommended to load? (I am using jQuery Easy to deal with JQuery conflicts) Disabling JQuery doesn't help with the situation, but... disabling T3 framework will solved the problem (mean use Joomla default template)
·
Wednesday, 09 April 2014 18:01
·
0 Likes
·
0 Votes
·
0 Comments
·
FYI, I've been searching the internet for the issue. Please have a look to this post, i am having the EXACT problem which specially in Joomla 3.2.3:

http://www.fox.ra.it/forum/5-support/10481-dropdown-video-issue-in-chrome-and-firefox.html

I also test our some other templates; guess it's also some conflict with JQuery Chosen library with the new J3.2.3; from the post it says the CSS behavior was changed in J3.2.3; If ES 1.2.7 using a same CSS for J3.2.2, this issue may occur in T3 framework that using chosen library (my guess). Further, I also tested with GavickPro template's (backend using T3) also have same problem, more badly, themes from RocketTheme using Gantry also have similar problem.

Not sure if you have resources to test this out, just install J3.2.3 using any above template / framework (most of them have free template for test) then you will see the issue I guess.

If you have time please also have a detail look to the link I just shared. Thanks
·
Wednesday, 09 April 2014 23:28
·
0 Likes
·
0 Votes
·
0 Comments
·
I got the problem fixed by switching JQuery library from using 1.8.x to 2.1... Gotta do some intensive test to confirm the result. will share with you soon.
·
Wednesday, 09 April 2014 23:31
·
0 Likes
·
0 Votes
·
0 Comments
·
Hm, thanks for sharing this. I didn't know jQuery would cause this because EasySocial runs on it's own namespaced jQuery and it shouldn't conflict with other jQuery library "unless" T3's compression goes and exclude other jQuery.
·
Wednesday, 09 April 2014 23:39
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Team,

I finally dig out the conflict that cause malfunction of the chosen.js , it's a long message that I would like to share with all of you and see how Offlajn deal with this.

[QUOTE]
Hi Team (Offlajn),

I would like to report this issue to your team as I've spent a very long time to tweak configuration of my site to dig this issue out.

Let me explain my environment:

- Joomla 3.2.3
After upgrade from 3.2.2, the JQuery Chosen library breaks somehow, and caused all dropdown menu malfunction (show blank item and incorrect size); I can barely fix it with some CSS tweaking however the fundamental problem still there, some .js cannot be executed or be replaced.

- T3 framework (or other templates using JQuery Chosen library, like Rocktheme - Gantry framework)
Also break down after upgrade to J3.2.3, all dropdown menu become malfunctioning. Switching back to default Joomla template will fix the issue, since no Jquery will be loaded via template.

- Easy JQuery
I tried loading this plugin to deal with the conflict issue; I can get the .js chosen library back to work via overriding the JQuery version to 2.x+, however, most of my JQuery components/modules break down after this setting

- Easy Social / Jomsocial
Jomsocial is the first component having the drop-down menu issue. I can get it fixed by overriding special CSS to control menu display / hidden. However, I have no luck with Easy Social since some of their page using JQuery Chosen library to control drop-down menu. I can get it fixed only by using a default template (not T3/ templates with Chosen.js), or simply switch to override using JQuery 2.0. Both are not my options...and the CSS override cannot help anymore.

** Since I can see the dropmenu was switched back from chosen style (beautiful) to generic Joomla style of dropdown menu - during the page load, I guess there are at least 1 component breaking down the chosen.js.

I start trying to disable modules one by one, and I found all the caused of chosen.js conflict is Offlajn Improved AJAX Login.

I have disable loading JQuery from the module but it doesn't help. Anyway you can fix this?

[END QUOTE]
·
Thursday, 10 April 2014 00:31
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello,

Thanks for sharing, let us know what's the outcome Though, I still think replacing all dropdowns to chosen on the front end is a pretty risky thing to do
·
Friday, 11 April 2014 01:46
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post