SOLVED Gantry clashing with JQuery Mobile ?
-
-
- George M. Taylor
- Jr. Rocketeer
- Posts: 41
- Thanks: 4
-
I'm re-developing a website on Joomla 3.4.3 using the Lumiere Template and Gantry 4.1.29
For some, but not all, pages I've included jquery 1.11.1 & jquery mobile 1.4.5
The problem I'm seeing is that I can visit a page that includes these jquery libs which appear fine but when I navigate to any other page (with or without jquery mobile) it doesn't appear.
I get the menu heading but everything inside <div class="rt-main-container"> is blanked out.
The html code is there but it doesn't appear.
It's almost like it's had style="display: none;" applied but it hasn't
Tested on latest Firefox and Safari with the same results.
If I reload the blank page it appears fine but not on first load.
Checking the debug console on Firefox and Safari shows no errors or noticable problems.
Was I wrong to try to use Gantry with JQuery and JQuery Mobile?
I'm new to RocketTheme and its systems.
Thanks.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Hi George
and welcome to the forumsThis image is hidden for guests.
Please log in or register to see it.
George M. Taylor wrote:Was I wrong to try to use Gantry with JQuery and JQuery Mobile?
I'm new to RocketTheme and its systems.
Thanks.
Our extensions that need Jquery will load it so an external source isn't required. The same goes for Mobile145 as Lumiere is a Responsive template.
-
-
-
- George M. Taylor
- Jr. Rocketeer
- Posts: 41
- Thanks: 4
-
Our extensions that need Jquery will load it so an external source isn't required. The same goes for Mobile145 as Lumiere is a Responsive template.
That's not answering my question.
I'm asking if Gantry & Lumiere have any known incompatibility issues with those versions of JQuery and JQuery Mobile?
I want to use them with some pages on my site and, no, your extensions don't load them.
If anyone can point me at a probable cause for the issue I'm seeing I'd be very grateful.
Thanks.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
George M. Taylor wrote:
Our extensions that need Jquery will load it so an external source isn't required. The same goes for Mobile145 as Lumiere is a Responsive template.
That's not answering my question.
I'm asking if Gantry & Lumiere have any known incompatibility issues with those versions of JQuery and JQuery Mobile?
I want to use them with some pages on my site and, no, your extensions don't load them.
If anyone can point me at a probable cause for the issue I'm seeing I'd be very grateful.
Thanks.
Lumiere does load in Jquery. This is from a current Lumiere RocketLauncher:
<script src="/Lumiere33/media/jui/js/jquery.min.js" type="text/javascript"></script> <script src="/Lumiere33/media/jui/js/jquery-noconflict.js" type="text/javascript"></script> <script src="/Lumiere33/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
The version used is jQuery v1.11.2 but you are right we don't load JQuery Mobile as its a responsive template.
Is there a certain extension or component that requires JQuery Mobile or does it have a set of features that our responsive template doesn't have?
Searching our forums I see that JQuery Mobile has been used with Magento themes but I couldn't find anything about our Joomla themes.
As for your problem page, would you please create a Super Admin login for me and place it in the SECURE part of your Reply
This image is hidden for guests.
Please log in or register to see it.
so that I can take a look.
-
-
-
- George M. Taylor
- Jr. Rocketeer
- Posts: 41
- Thanks: 4
-
I'm writing 3 components for the website which make use of JQuery Mobile.
Gantry is a nice system with a good responsive framework but it's proprietary.
I've had interest from other website owners for my components so I'm thinking of publishing them commmercially.
I can't/won't make RocketTheme and Gantry a pre-requisite for my components in them offering a responsive interface.
With Lumiere I'm only seeing those 3 js files you've listed loaded in the home page of my website.
All other pages don't have them which is why I assumed you didn't include JQuery.
So it can't be that.
I'll let you take a look for yourself. Thanks for the help Dan.
-
-
-
- George M. Taylor
- Jr. Rocketeer
- Posts: 41
- Thanks: 4
-
Any update to this thread?
The account I created at your request hasn't been used yet from what I can see.
-
-
-
- George M. Taylor
- Jr. Rocketeer
- Posts: 41
- Thanks: 4
-
It's been a week now and I'm still waiting for someone (Dan?) to reply here.
The Super Admin account I create, at your request, has never been used.
What's up?
Am I to assume that the answer is "No, Gantry is incompatible with JQuery Mobile"...?
Thanks,
George
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
George M. Taylor wrote:
It's been a week now and I'm still waiting for someone (Dan?) to reply here.
The Super Admin account I create, at your request, has never been used.
What's up?
Am I to assume that the answer is "No, Gantry is incompatible with JQuery Mobile"...?
Thanks,
George
Sorry for the late reply. I've done a lot of Googling and it seems if you use the actual JQuery Mobile framework as your template your fine. However when you started using their Jquery files on other frameworks, ours included, there seems to be compatibility issues between that frameworks JS files and JQuery Mobile's.
One of the template developers on the Joomla forum to somebody having a similar issue recommended modifying the Jquery to get around the conflict but if your not a coder this would be an untenable solution.
As this is not the first time a conflict has occured when loading multiple Jquery libraries, JED has quite a few Jquery "No Conflict" extensions available. Maybe one of those would help.
-
-
-
- George M. Taylor
- Jr. Rocketeer
- Posts: 41
- Thanks: 4
-
I spent most of the week working on this problem and it's got nothing to do with Rocket's templates of Gantry.
Sorry for pointing the finger!
Anyway so that you guys know how to answer this question in future and incase anyone searches these forums looking for this answer here is what the problem was.
JQuery does something weird. It prevents the <head>...</head> from reloading between pages using Ajax navigation.
Some trolls over at the jQM website forum had a go at me for not understand the benefits of page transitions and causing overhead with reloading CSS & JS with each new page visited on a site.
Obviously no one there understands the benefits of metas for search and social media.
It's also good practice to put jQuery into noconflict mode, which I hadn't, but seems to make no difference anyway.
This should be done by adding this line somewhere in your view's view.html.phpIf you go digging you'll see it loads a file calledJHtml::_('jquery.framework');/media/jui/js/jquery-noconflict.jsThis has a single line of code.
I modifed this file to include code to switch off the the Ajax page transitioning.
It's contents now look likeMake sure that this modified file loads before the jQM js file in your header.jQuery.noConflict(); jQuery(document).bind("mobileinit", function () { jQuery.mobile.ajaxEnabled = false; });
With this in place all works (almost) perfectly.
The template login popup is broken on pages with jQM, but that's for another day... -
The following users have thanked you: MrT
-
Time to create page: 0.047 seconds