Topic-icon Jquery and bootstrap conflict

Active Subscriptions:

None
10 years 7 months ago - 10 years 7 months ago #35710 by fei
my current virtuemart template doesn't allow me to use JQuery. It loads Jquery somewhere by itself.
I found:
If I use Modal Popup feature and Load JQuery is load (yes), some of features in my template disappeared .I guess it was because of that claimed conflict.
Only in the following cases, they are back to work.

Modal type -- set to ALways Visible.
Or
Load JQuery -- Set it to No.

any suggestion to me ? I want it popped up if possible without a conflict to my current template which doesn;t allow for JQuery loading.
Last edit: 10 years 7 months ago by fei.
The topic has been locked.
Support Specialist
10 years 7 months ago #35717 by alzander
Disable the Load jQuery setting but enable the Load Bootstrap setting. That should hopefully make everything play well together.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
10 years 7 months ago #35739 by fei
Replied by fei on topic Jquery and bootstrap conflict
thanks for your reply!
If I disabled Load JQuery and keep Bootstrap on, the login pop up will appear but disappeared automatically in 0.1 second .
as long as Load Jquery is off, I always got such a result. My observation was it has nothing to do with Bootstrap setting.
I am using Joomla 2.5 and Virtuemart 2.0
so I now had to made the SClogin not as pop up which is disappointing to me.( I wanted popop style)
The topic has been locked.
Support Specialist
10 years 7 months ago #35752 by alzander
Fei,
Both your template and a module are still loading jQuery. My guess is that that is the cause. I'm seeing the following files being loaded on your site:

www.idream.com.au/qcs/templates/vp_super...te.min.js.php?v=1.4a
www.idream.com.au/qcs/modules/mod_vp_cam...le.customized.min.js

I'd suggest trying the modal on a page that isn'g loading the mod_vp_camera_slider (to eliminate that) and see if it makes things work for you. That will help narrow down the issue.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
10 years 7 months ago #35758 by fei
Replied by fei on topic Jquery and bootstrap conflict
thanks alex.
I asked the same question the template develper. He answered as follows. His main idea is: there was bootstrap naming conflict about modal between his tempalte and -- lots of modules uses. He provided a minor change of standard naming for modal as alternative solution. the following is what he said. Especially pls read the last section I copied at the bottom:
If what he is right, I think your new update should address use kind of naming conflits too. I will do the change he suggested and see how it goes.
here I suggest you to revisit my site www.idream.com.au and click on login to see its current issue. it will automatically disppeared .( the current sclogin module is all default ones, except no Load JQuery).

>>>>>>>>>>>>>>>>>>>>>>>>
jQuery is already loaded in your site by the template therefore the module should work fine without loading jQuery again in your site. If it is not working then the problem is somewhere else. Disable jQuery loading in the module and post the link of the page where you are facing the problem.

jQuery is already loaded in the template that is why you do not need to load the same library again in your site. Loading jQUery twice in any site will always lead to problem. It has nothing to do with VP SuperMart or any Joomla Template. This is a standard jQuery requirement. Read this to learn more: forum.jquery.com/topic/jquery-how-to-pre...loading-jquery-twice or forum.jquery.com/topic/load-loading-twic...-in-a-different-spto Any extension which require jQuery library works fine even without loading the library again in your site. Even VirtueMart itself needs jQuery and when you use our templates jQuery is disabled in VM Settings. But you can watch it working perfectly. Apart from VM even K2, Zoo, Wideget Kit, JoomSocial etc all standard Joomla Extensions which need JQuery works fine with our templates without loading them separately again.

There are other such modules already working with VP SuperMart. Example:
BT Login : extensions.joomla.org/extensions/access-...authentication/19024

However this module scripts conflicts with Bootstrap Framework therefore you will need to get it compatible by changing its scripts as mentioned here: www.virtueplanet.com/forum/vp-megamart-j...amart/index.php#4832

Alex,
---- the last link can not be opened without registration, so I copied its main answer as follows:

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
BT Login module uses a SimpleModal jQuery Plugin (simplemodal.com). SimpleModal and Bootstrap Modal plugins have a naming collision. Both of them uses the function name 'modal' but for different purpose so they creates conflict with each other. To resolve this problem I have slightly modified SimpleModal library and related BT Login JS file. These are the two files which I have changed:

modules/mod_bt_login/tmpl/js/jquery.simplemodal.js
modules/mod_bt_login/tmpl/js/default.js

I have replaced the function name 'modal' with 'smodal' to avoid any naming collission with Bootstrap. This resolves the problem.

I have also disabled loading jQuery library for BT Login module. This is not required at all.

I am attaching the modified BT Login Module below. Use the same in your site and you will not face any problem.
The topic has been locked.
Active Subscriptions:

None
10 years 7 months ago #35760 by fei
Replied by fei on topic Jquery and bootstrap conflict
I tried but still failed.
I tried to replace all "modal" with "scmodal" in youtr Bootstrap js file to avoid the naming conflict that template provider suggested. The problem was still there.

When you tested my js loading last time, I disabled Modal pop up setting. I now enabled it.
I now disabled the Load JQuery. (if it is enabled, your module worked but the template failed). Based on that guy;s explanation, he loaded the JQuery in the code and had no issue with other modules which use Jquery. so your module should not reload Jquery. So I disabled it now,
I left Bootstrap on now. (if I disabled it, your pop up would not pop up and lay out would be a mess , the log in form will be shown not as pop up but as part of the middle of home page .
so you recheck my js loading now.
The topic has been locked.
Support Specialist
10 years 7 months ago #35780 by alzander
Fei,
On your site, I went to a VM page and the modal seems to work well for me. Can you let me know what isn't working or what about your template isn't rendering properly when you do so?
File Attachment:


On your site now, I'm seeing jQuery and the Bootstrap Javascript only being loaded once, which is correct. Did you fix things, or is there something I'm missing?

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
10 years 7 months ago #35792 by fei
Replied by fei on topic Jquery and bootstrap conflict
alex,
yes, with the suggestion from the template developer, I went to your bootstrap.min.js file and replace all modal with scmodal -- just make modal naming not conflicts with other modules which use modals in Joomla. then it worked! I tested a few times. restore the orginal version of js file, clean up caches, et.c the conclusion so far is :
as long as I used your orginal bootstrap.min.js, the issue was there, unless I replaced the modal names.
(one things: the working is Load Jquery disabled. Load Bootstrap enabled) This working version is at least a good news to me!

One more thing:
if you check my site now, www.idream.com.au . you will see it is not working
I set it like that bcs I wanted to show it to the template developer. I disabled the bootstrap loading as he suggested. He believed, like JQuery, it is not necessary for SClogin to load bootstrap bcs his template already loaded it. So if I disabled Load bootstrap, then the site is not working , and like that --( pop up is not popped up and shown as middle part of home page and also the top main menu is pope up , etc.) as you can see it now. (google chrome)

I basically agree with the template developer that bootstrap and Jquery should not be reloaded if they are loaded already. However I can not explain why SClogin is not working if I disabled Bootstrap.
The topic has been locked.
Support Specialist
10 years 7 months ago #35799 by alzander
I agree that Bootstrap or jQuery shouldn't be required in your template due to all the reasons mentioned above.

The problem may be due to the older way that we had to produce the popup. You may want to try upgrading to the new release of the SCLogin module (v3.1.0, just released yesterday) to see if that helps. We re-implemented how the modal functionality works, as well as numerous other bug-fixes and improvements.

Keep us posted on how this goes. We're always trying to improve things and would love to know the solution. If there's something easy we can implement, we gladly will!

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
10 years 7 months ago #35803 by fei
Replied by fei on topic Jquery and bootstrap conflict
yes I wanted to try the new version. However I got a trouble. I removed the old one and install the new one . I could not see SC login in module manger.
I explained this in a new Topic on this forum "new version 3.1 installation issue -- can not see it in Module Manager"
pls help.
The topic has been locked.