What can we do to make it easier to design with Wild Apricot?

Javascript Libraries

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?

1 vote
Sign in
Sign in with: facebook google
Signed in as (Sign out)

We’ll send you updates on this idea

joemesot shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →


Sign in
Sign in with: facebook google
Signed in as (Sign out)
  • Jan commented  ·   ·  Flag as inappropriate

    I am trying to integrate NIVO slider into our site. I think I've got it all setup correctly-it just doesn't work. I've tried putting javascript in the meta tag/raw header section and using PageModel.InlineScripts but neither works successfully. I just see nothing. I also tried including and not including jquery in the script (since you identify it is already used by WA). I've used this slider before, so am confident in the code.

    Could you give me some direction or look at my site?

    I will only be using the slider on the home page. I think this would be a great tutorial to provide to allow users to build a slider for their site-so common these days. I'd be happy to write it once I get it working.

    Thanks for your help. Jan

  • Alexey Podolsky commented  ·   ·  Flag as inappropriate

    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?

    Further reading:




    Feel free to email me your website address, so we can find the problem out personally.

  • Evgeny Zaritovskiy commented  ·   ·  Flag as inappropriate

    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.

  • joemesot commented  ·   ·  Flag as inappropriate

    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.

  • Evgeny Zaritovskiy commented  ·   ·  Flag as inappropriate

    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 Zaritovskiy commented  ·   ·  Flag as inappropriate

    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.

  • joemesot commented  ·   ·  Flag as inappropriate

    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?

  • Evgeny Zaritovskiy commented  ·   ·  Flag as inappropriate

    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.

Feedback and Knowledge Base