Javascript Libraries

Membership management, event r... » Wild Apricot Software » For Designers and Developers » Javascript Libraries

Last post 07-25-2011, 4:22 AM by Handsome Apricot. 7 replies.


Sort Posts:

07-20-2011, 6:52 PM 23204

joemesot
Joined about 1 year ago
Posts 3

Javascript Libraries

Reply Quote

I am wondering if WA works with an External Javascript Library/Framework (i.e. jQuery, Spry, etc.).

I already added the library I need to the site via the Global Javascript Settings, but it does not provide the intended functionality. it seems that the library does not work with WA.

I need to create a custom menu for my client. I have used the Theme Overrides and modified the appropriate String Template files to achieve the custom menu structure that I need. However, when I apply the Spry Framework that is needed to create the menu functionality, it breaks.

My question is how can this framework not work within WA when it works within every other CMS out there?

Report abuse

07-21-2011, 11:37 AM 23210 in reply to 23204

Apricot Kernel
Joined about 5 years ago
Canada, Toronto
Posts 721

Re: Javascript Libraries

Reply Quote

There is no special support for specific JS libraries and there is also no need in that - basically you just add links into external libraries (jQuery, etc.) so they are available on a page HMTL code, then you inject js code calls to the libraries into corresponding parts of page (menu in your case) to actually use the libraries abilities.

This is just a standard approach for any JS development. Look like you just used the library in incorrect way. You need to figure it our yourself - reading library help documents and how to use it.

Evgeny
Product Design Team

Report abuse

07-21-2011, 11:55 AM 23212 in reply to 23210

joemesot
Joined about 1 year ago
Posts 3

Re: Javascript Libraries

Reply Quote

Yeah, ok, so I can link to the library externally, that is obvious, but how in the world would I place the link in head section so that the page loads the library? There is no way to do this, and am not going to place script tags all over my document structure to load in all the necessary files. That is just ridiculous.

I have copied over the necessary files to the scripts folder of the theme I am using. This loads the files into the head of the document as expected just fine. I then used the Global Javascript Settings to add the initialization code that is required to execute the javascript in the footer of the document. This all works just fine and works as I would expect, the problem is that the Javascript files are not loading in the correct order. How do I get them to load into the head of the document in the proper order?

Report abuse

07-21-2011, 11:58 AM 23213 in reply to 23212

Apricot Kernel
Joined about 5 years ago
Canada, Toronto
Posts 721

Re: Javascript Libraries

Reply Quote

Use “Meta-tags (for search engines)” page, RAW Headers. You can add tags to include script libraries there in required order.

And I just checked with our developers: jQuery v1.5.1 is already used internally so no need in connecting it.

Evgeny
Product Design Team

Report abuse

07-21-2011, 12:28 PM 23214 in reply to 23213

Apricot Kernel
Joined about 5 years ago
Canada, Toronto
Posts 721

Re: Javascript Libraries

Reply Quote

I just checked again with developers about files loading order - files in "Scripts" folder are loaded in alphabetical order. So you can also rename files as a workaround instead of using Meta-tags page

Evgeny
Product Design Team

Report abuse

07-22-2011, 10:33 AM 23222 in reply to 23214

joemesot
Joined about 1 year ago
Posts 3

Re: Javascript Libraries

Reply Quote

Ok, so using RAW Headers completely FAILS!

When I use it to include my external libraries, as you have suggested, it creates a script tag that links to the first hosted javascript file in my list of files, then wraps all the other files into the script tag as if they were code, and it wraps my beginning body tag and first few container tags into the script tag as well. So it completely breaks my site layout. Wonderful.

As for jQuery being used already, I can see it used on the admin side, but when I try to simply add jQuery code to the site, it does nothing... at all.

I understand that this system is still fairly new and under development, but if it cannot achieve the simple functions of basic web development, and provide developers with the basic functions they need in a meaningful and easy way, then this is going to cause for problems for my client down the road. I am seriously on the verge of telling them that this system will not meet their development needs due to it's lack of maturity.

Report abuse

07-22-2011, 11:40 AM 23223 in reply to 23222

Apricot Kernel
Joined about 5 years ago
Canada, Toronto
Posts 721

Re: Javascript Libraries

Reply Quote

I cannot see how I can help you here in this thread. We need to look into your site.

Could you please write to support@wildapricot.com with a reference to this thread and give your account number also in the email? In this case we can check everything directly on your site and help to resolve the problem.

Evgeny
Product Design Team

Report abuse

07-25-2011, 4:22 AM 23231 in reply to 23222

Handsome Apricot
Joined about 10 months ago
Moscow, Zelenograd
Posts 2

Re: Javascript Libraries

Reply Quote

Sorry f/the delay, let's see how can i help you.

First, take a look at source code of your page (exactly speaking, at the part where your scripts are loaded). Are they really nested? If yes, there's something wrong with script loading template.

Go to Head.tpl and check if the following line exists:

<$PageModel.Scripts:Links(script = "true")$>

This line gets PageModel.Scripts collection (which is populated by .js files in your scripts folder) and applies Links.tpl template to every item in it. This line also passes script = true param to Links.tpl.

Second, take a look at Links.tpl itself. Among other if branches, you'll see the following:

<$if(script)$><script type="text/javascript" language="javascript" src="<$it.Path$>" id="<$it.Id$>"></script><$endif$>

It first compares if script param is true (as we passed it in Head.tpl), than outputs a script line loading javascript and closes(!!!) the tag.

Maybe you've changed the files accidentally?