Support Forum

  • Page:
  • 1
  • 2

Jquery & Mootools

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hi

I am using Zen tools on a non jb_template (Joomla 2.5.8).

I very much want to be able to use the lightbox feature so to do that would need jb_library (or a similar one).

If I enable jb_library some important ECWID (Shop) script stops working. (The script is in a module and calls jquery).

My template and its main menu uses Mootools. I think that the issue I have is related to this but am a novice at jquery.

Can anyone recommend what they think is a really good tutorial for sorting the sort of jquery conflicts I am (vaguely!) describing that might be useful to a novice in jquery?

THANKS!
Suzanne
  • Suzanne's Avatar
  • Suzanne
  • 12 Month basic
  • 92 posts
  • Karma: 2
The administrator has disabled public write access.
Hi

Do you have a link for the site?

I'd use the console in the chrome developer tools (f12) to check where the issue is

And then go from there about troubleshooting the issues and looking for a tutorial

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paulus

I had a ticket open on this but I was not getting anywhere so I thought I had better try and learn more.

I have tried using the error console in Firebug (Is Chrome any different?), but am stumped until until I start coming up to speed...

It is not a live site, so please see the login details in the ticket which I have reopened.

Thanks very much for answering.
Suzanne
  • Suzanne's Avatar
  • Suzanne
  • 12 Month basic
  • 92 posts
  • Karma: 2
The administrator has disabled public write access.
Hi Suzanne,

I'll take a look at the ticket but with ECWID I'm not that familiar with

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thanks Paul

The lines calling jquery at the start of the anycode shop module are used by ECWID to make tabs in the product description. I tried putting them in the template head but the tabs would not work then.

ECWID will not run at all (even in the most basic form straight off the ECWID dashboard with no widgets /custom code added) if I enable the JB_library.

I found something on the ECWID forum about issues with JB_library but do not understand enough to know if those issues still exist with the recent version of JB_library.

[url=http://]http://www.ecwid.com/forums/showthread.php?p=69261[/url]

Suzanne
  • Suzanne's Avatar
  • Suzanne
  • 12 Month basic
  • 92 posts
  • Karma: 2
The administrator has disabled public write access.
Hi,

What are the settings you have in jblibrary?

It might just need a bit of fiddling to get them to play together nicely.

Also, are you using zentools on the the same page as ECWID or separate ones?

Regards,

Rob
  • Robert Went's Avatar
  • Robert Went
  • Moderator
  • 2210 posts
  • 196 Thanks
  • Karma: 90
The administrator has disabled public write access.
Hi Rob

I hoped that fiddling with settings would work so have already tried as many different variations of settings in the JB_Library as I could think of but found no solution found hence this forum visit.

I have an ECWID product on a page where there are about 7 instances of Zen Tools.

I also have a full-blown ECWID shop on a page with NO Zen tools.

With any of the JB_settings I tried using, if the jb_library is enabled, instead of the shop loading I get an error message on the page saying that the shop could not be loaded because there are missing body tags (I can see the body tags clearly in the page source). This happens on BOTH the ECWID pages including the one without Zen Tools).

If I disable the Jb_library the shop loads. I can still use the Zen tools but get no lightbox which does not look very good.

As I mentioned earlier, I found a posting on the ECWID forum discussing a similar issue with the JB_library and ECWID.


Thanks
Suzanne
  • Suzanne's Avatar
  • Suzanne
  • 12 Month basic
  • 92 posts
  • Karma: 2
Last Edit: 8 years 5 months ago by Suzanne. Reason: This happens on BOTH the ECWID pages including the one without Zen Tools).
The administrator has disabled public write access.
Hi Suzanne,

I read the post on the forum, but it didn't really offer any explanation of the problem. It just said to get the other company to fix it.

I would assume that, as ECWID is embedded on the page rather than a part of it, it is loading jquery in the page body? This is then conflicting with the version which is already loaded by the plugin. This then causes an error when the ECWID javascript tries to find the body tag which it needs to use for some purpose.

Can you please post here the messages you see in the browsers console window.

Do ECWID give you no control over the scripts it loads in their control panel?

Rob
  • Robert Went's Avatar
  • Robert Went
  • Moderator
  • 2210 posts
  • 196 Thanks
  • Karma: 90
The administrator has disabled public write access.
Thanks for your reply.

I decided that it was just too hard to try to learn what the issue with the template I was using - it was the most complicated one I have come across (MASSES of php in the CSS etc). We are in process of rebuilding the proper site around a different template.

To try and learn how to get ECWID/JB_library and Zen Tools to play together, I have put a fresh install of Joomla 2.5.9 on a test domain and installed no other extensions than Anycode, the latest JB_Library and Zen Tools.

I am using the default sample code from the ECWID dashboard with one (Official ECWID) widget added.
The basic shop works fine with Zen Tools/JB_library but the widget (Creates tabs in the product description) requires that I add jquery paths in the head of the template and that creates problems.

Widget description:
[url=http://]http://tinyurl.com/bpsul8s[/url]


I am using Beez 20 template.

On this template I was able to put the paths the jquery files in the head but the tabs script only worked at the same time as the Zen Tools lightbox if I put the paths in an additional bit of code to what was described in the ECWID knowledgebase. Not sure where I found that bit of function code or what is really does but I tried it and it mostly works..
$(function(){ //
<s-cript type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></s-cript>
<s-cript src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></s-cript>
});
(My substitution of s-cript for script else I could not submit post...)

Now Zen Tools lightbox and ECWID tabs are working OK on this test site - the only remaining issue that concerns me is that the code below is appearing at the top of all my pages...
$(function(){ // });


All the error messages showing in my firebug console relate to this
"TypeError: jQuery(...).jackBox is not a function"

The JB_library settings are default with the exception that JQuery noconflict had to be disabled for the tabs and Zen Tools to work.

I cannot see anywhere that ECWID gives control of scripts in their control panel.

Any suggestions as how to get rid of that bit of code appearing at the top of my pages?

http://79.170.44.128/test-13.co.uk/
  • Suzanne's Avatar
  • Suzanne
  • 12 Month basic
  • 92 posts
  • Karma: 2
Last Edit: 8 years 5 months ago by Suzanne. Reason: another attempt to add ecwid url
The administrator has disabled public write access.
Hi

I'm not quite sure what to suggest as I'm not familiar with the extension

I'd suggest opening a ticket

Regards
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul

Thanks for your reply, I have had a ticket open several days now. I have been doing my best to get on resolve this and think I am almost there...

I have a fresh install of Joomla 2.5.9, the only added extensions are jb_library , Zen Tools and Anycode. I am using a Joomla template Beez 20.

I am using an ECWID shop with a widget that requires me to call jquery in the head of the template.

It seemed at first that only way I could get that to work and have Zen Tools lightbox with the widget was to put my code in a function tag in the template head like this
$(function () {<s-cript  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></s-cript>

<s-cript src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></s-cript>
});
(My change of script to s-cript so I can submit this post).

Lightbox and widet were both working but
(function () });
was displaying at the top of all my pages.

I have since found that I can get both widget and lightbox at the same time without the function code as long as I add a character of some sort after the Javascript declarations. Even a full-stop. This character will display at the top of all my pages but the shop widget and lightbox will both now work at the same time.

The next step must be to find why adding a character after the script declaration in the head of the template makes the widget and lightbox both work together...(I am a newbie to this sort of coding).

Any suggestions anyone? ( I no longer think this a Mootools issue).

Web site:
[url=http://]http://79.170.44.128/test-13.co.uk/[/url]
Screenshot attached.

Suzanne
  • Suzanne's Avatar
  • Suzanne
  • 12 Month basic
  • 92 posts
  • Karma: 2
The administrator has disabled public write access.
I would have thought that adding a character after the javascript breaks the code and stops it from functioning, so the the problem you have is what is inserting that code in the first place and why it is needed.
  • Robert Went's Avatar
  • Robert Went
  • Moderator
  • 2210 posts
  • 196 Thanks
  • Karma: 90
The administrator has disabled public write access.
Thanks for your reply Rob,

When you wrote " the problem you have is what is inserting that code in the first place", which bit of code are you referring to?
  • Suzanne's Avatar
  • Suzanne
  • 12 Month basic
  • 92 posts
  • Karma: 2
The administrator has disabled public write access.
You said that everything works together if you remove the 'function code'. Which i assumed to be:
(function () });
So it seems like that is causing the problem and you need to find out what is inserting it.
  • Robert Went's Avatar
  • Robert Went
  • Moderator
  • 2210 posts
  • 196 Thanks
  • Karma: 90
Last Edit: 8 years 5 months ago by Robert Went.
The administrator has disabled public write access.
Sorry, just re-read.

That code is appearing on your page because you are writing javascript outside of script tags.

So it looks the problem is that jquery is loading in the wrong part of your page.
  • Robert Went's Avatar
  • Robert Went
  • Moderator
  • 2210 posts
  • 196 Thanks
  • Karma: 90
The administrator has disabled public write access.
Thanks Rob,

Me adding that function code was a "will try anything" kind of fix! I was not even aware that the function code was javas-cript :whistle:

It did lead to discovering I can get both widget and lightbox working at the same time as long as I add a character of some sort after the Javas-cript declarations. This character will however display at the top of all my pages but the shop widget and lightbox will both now work at the same time.

This is a Joomla Beez 20 template as shipped with the Joomla core. I only have the ECWID code, Anycode, Zen Tools and Jb_library installed.

Below is my ECWID code (Apart from the jquery paths in the head of the template). The rest of the code will be with ECWID and I have no access to it. Does this look like it is causing jquery to load in the wrong part of my page? (The first bit is the basic shop, the second creates tabs in the product des-cription).

<div>
<s-cript type="text/javas-cript" src="http://app.ecwid.com/s-cript.js?2158433" charset="utf-8"></s-cript>
<s-cript type="text/javas-cript"> xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","style="); </s-cript>
<nos-cript>Your browser does not support Javas-cript. Please proceed to <a href="http://app.ecwid.com/jsp/2158433/catalog">HTML version of bamboo skh's store</a></nos-cript>
</div>
<s-cript type="text/javas-cript">
Ecwid.OnPageLoaded.add(function(page){
   if (page.type == "PRODUCT") {
        $( "#tabs" ).tabs();
   }
})

(My substitution of s-cript for s-cript so I can submit the post)
  • Suzanne's Avatar
  • Suzanne
  • 12 Month basic
  • 92 posts
  • Karma: 2
The administrator has disabled public write access.
What happens if you delete everything before the character you insert?
  • Robert Went's Avatar
  • Robert Went
  • Moderator
  • 2210 posts
  • 196 Thanks
  • Karma: 90
The administrator has disabled public write access.
Hi Rob

Thanks...

Front end of site is blank except for extra character in top left of page.
admin page looks fine.

I asked a question about this on Stackoverflow too. The post is here if anyone is interested in the responses:

[url=http://]http://stackoverflow.com/questions/15987132/jquery-head-tag/15987640#15987640[/url]
  • Suzanne's Avatar
  • Suzanne
  • 12 Month basic
  • 92 posts
  • Karma: 2
Last Edit: 8 years 5 months ago by Suzanne.
The administrator has disabled public write access.
Stackoverflow is great but can you clarify if the answers you got there fixed your problem?
  • Robert Went's Avatar
  • Robert Went
  • Moderator
  • 2210 posts
  • 196 Thanks
  • Karma: 90
The administrator has disabled public write access.
None of the answers suggested on Stackoverflow fixed the problem.

(There were a few suggestions as to different placement in the template for the jquery paths and using jquery noconflict between the paths).

Thanks
Suzanne
  • Suzanne's Avatar
  • Suzanne
  • 12 Month basic
  • 92 posts
  • Karma: 2
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers