Log in | Register
  1. Forum
  3. Non-Commercial Extensions
  5. SCLogin Enhanced Login
  7. Jquery and bootstrap conflict

Topic-icon Jquery and bootstrap conflict

Support Specialist
10 years 8 months ago #35863 by alzander
Just wanted to update this thread with a link to the other thread that you reference above.

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

None
10 years 8 months ago #35875 by fei
Replied by fei on topic Jquery and bootstrap conflict
assuming my installed version is a correct 3.1 version.
I got the same JQuery and / or Bootstrap issue again after installing the new one. same as the old one.
The pop up is gone, if I don't enable JQuery.
My tempalte feature is gone, if I enable Jquery.
Pop up location is wrong(not popped up at all in fact0, if I disabled bootstrap.

everything was back to the original issue status. A bit frustrating. I didn;t know how the 3.0 version became work after my adjustment. I need to recall sth and try further on this new version.
The topic has been locked.
Support Specialist
10 years 8 months ago #35902 by alzander
fei,
We didn't implement any of the renaming of bootstrap modals in this version. It was too late in the release cycle to make such a big change. I'm not sure what made it work for you before either, but I know you mention you renamed some things to scmodal in one of your threads. We'll be evaluating a similar change for the next big release (v3.2), but not v3.1.1, due out in a few days with some minor bug fixes.

I hope that helps explain. If you find a combination of changes that works for you, let us know. It will help us create the permanent fix and test it faster.

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

None
10 years 8 months ago #36199 by fei
Replied by fei on topic Jquery and bootstrap conflict
I did the following and seems to solve the issue.

My template uses this file: jquery-1.7.2.min.js

SClogin uses this file: jquery-1.8.3.min.js

Both use the bootstrap.min.js file . ( I didn't compare if they are different; I chose to load my template provider's bootstrap.min.js only)

I did the following change:

In mod_sclogin.php

I moved the following line of code out of the 'if ($needsBootstrap)' block to Line #75
$document->addStyleSheet(JURI::base(true) . '/media/sourcecoast/css/sc_bootstrap.css');

this move makes the following two lines be together at Line 74 and 75. It makes both css files be loaded no matter if you disabled the Load jquery and Boostrap in setting.
$document->addStyleSheet(JURI::base(true) . '/media/sourcecoast/css/mod_sclogin.css');
$document->addStyleSheet(JURI::base(true) . '/media/sourcecoast/css/sc_bootstrap.css');

Then I disabled both Load Jquery and Load Bootstrap options under SClogin setting.
I activated the Modal popup mode.

Finally. I checked my css and js loading on my home page. it is like the following.

<link rel="stylesheet" href="/media/sourcecoast/css/mod_sclogin.css" type="text/css" />
<link rel="stylesheet" href="/media/sourcecoast/css/sc_bootstrap.css" type="text/css" />
....
<script src="/your own path here.../jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/your own path here.../jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script src="/your own path here.../bootstrap.min.js" type="text/javascript"></script>
...

notes: the above jquery-1.7.2.min.js and bootstrap.min.js are not from SClogin. They are from my template provider.

After the above change, the modal pop up worked perfectly without affecting and conflicting my template. ALl templates features work too.

Basically this change make use of jquery and bootstrap js files from my tempalte provider only. Once they are loaded to your page and you should not load them again in Sclogin.

I also found jquery-1.8.3.min.js has some issue. If it was loaded at the end, it will affect my template OR SClogin popup would not work properly.
That is why I chose jquery-1.7.2.min.js. I don't know the reason but just tried the working one.

I hope this will give those who has similar issues a kind of reference.
The topic has been locked.
Support Specialist
10 years 8 months ago #36210 by alzander
Thanks for your feedback, and I'm very glad you got things working for your. Creating a module with lots of styles that work on all templates is a difficult proposition. We've eliminated a lot of conflicts in the last few releases, but there are obviously a few things we need to work out for some users like yourself. We'll be working on this over the next few releases to clear up these template conflicts.

For the jQuery 1.8.3 file, the problem wasn't likely the file itself, but the order that it was loaded on the page. If it was after other Javascript files, it's likely that one of those files needed jQuery to already have been loaded and those files weren't loading / initializing properly without it. In other words, it likely wasn't the version of the file, but how it was being included on the page.

Anyways, again, very glad you got to the bottom of things, and let us know if you need anything else or figure anything else out.

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

None
10 years 8 months ago #36219 by fei
Replied by fei on topic Jquery and bootstrap conflict
Yes. it worked and that was good news to me.

the following is just for your reference:

For the Jquery file versions, my observation is that
when my template loaded its jquery-1.7.2.min.js
and SClogin loaded jquery-1.8.3.min.js at the end,
it will cause conflicts , although both were loaded.

I did an experiment, replace the template's jquery-1.7.2.min.js with your jquery-1.8.3.min.js file, AND only let the template load jquery-1.8.3.min.js once only at the original loading order/position where the template natively loads its jquery file,
it would still cause the sclogin not-working issues.
That is why I felt jquery-1.8.3.min.js might be of some issues.
The topic has been locked.
Support Specialist
10 years 8 months ago #36238 by alzander
Thanks for the feedback. I honestly am not sure why that would be an issue, but frankly, I'm just glad you got it going and that there's a decent paper trail here that you can follow on the next update, just in case. As mentioned, we'll be working to improve compatibility, but I can't guarantee everything will be fixed in 3.1.2.

Best wishes,
Alex
The topic has been locked.
Active Subscriptions:

None
10 years 8 months ago - 10 years 8 months ago #36249 by lukmel
Hi,
I was hoping to reach a resolution for a similar problem. By upgrading SC Login to version v3.1.1 the issue on one of my pages was resolved. The problem however remains on one other page, pretty sure its a conflict in jquery. The login module appears and the disappears really quickly.
Here is a link to the page with the problem: mukinbudincrc.com.au/website/room-hire
I am also using version 5.1.1 of JFBConnect.
Thanks
Luke
P.S. the login button is in the top header on the right under the social networking icons.
Attached are some screenshots of the module configuration.
Last edit: 10 years 8 months ago by lukmel.
The topic has been locked.
Support Specialist
10 years 7 months ago #36418 by alzander
Luke,
Very sorry for the delay on this!

Your site is loading the bootstrap Javascript files multiple times, and that's what is causing the problem. JFBConnect instructs Joomla 3.x to load it's own copy of Bootstrap, which all extensions really should be using. By using the built-in copy, it ensures compatibility across all extensions since it's then a 'known' copy and there's no duplication.

On your site is the following re-inclusion of the library which is causing the issue:
/website/components/com_osservicesbooking/style/bootstrap/js/bootstrap.min.js
If there's a way to disable that inclusion, it should fix the issue with the modal and hopefully shouldn't cause any problems with the osservicesbooking module.

I hope that helps explain, but if you need more info, just let me know.

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

None
10 years 7 months ago #36464 by Eduardo
Thank's fei, by your feedback, Im very scared to try this and continue have problems, first i go try install the old one, if i can't, im certain try your solution :)

At the moment, even the login module i give up to use ;(
The topic has been locked.
  1. Forum
  3. Non-Commercial Extensions
  5. SCLogin Enhanced Login
  7. Jquery and bootstrap conflict
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS