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
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)

    We’ll send you updates on this idea

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

    8 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • JanJan 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 PodolskyAlexey 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:

        http://help.wildapricot.com/display/DOC/CSS+and+LESS

        http://help.wildapricot.com/display/DOC/Template+Engine+Reference+Guide

        http://help.wildapricot.com/display/DOC/Theme+files+language+syntax

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

      • joemesotjoemesot 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.

      • joemesotjoemesot 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 aka Apricot KernelAdminEvgeny aka Apricot Kernel (Product Manager, Wild Apricot) 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

      Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7