Javascript question

[Haprita_Design]

Hi, all.  I've been using Weebly for years, but have only recently started digging deeper into the back-end, so to speak.  I've often tweaked the HTML or CSS for a site I was working on, but never did much with JavaScript.  Now I find myself  needing to add a custom filter table to a site for a client and it's powered by JavScript.  My problem is that I'm not sure where to put the script.  I've been searching for a while now and tried several of the options I've seen recommended and have "broken" my test site more times than I care to think about.

I added a section to a page of the site, then used the Embed Code element to add the table HTML.  No problems there.

I found a good spot in the main.less to put the styling.  Except for one little icon missing (that I don't really care about anyway) it worked fine.

The JavaScript, however... to summarize, I created myFunction.js under Assets; I tried using Embed Code in the section housing the table; I tried putting it in the Header Code, then the Footer code under the page's SEO; with the muFunction.js in place under assets, I tried "calling" the script.....

Now, admittedly, any of these efforts could have been done incorrectly since I am not familiar with JavaScript, but I was pretty careful to not do anything too obviously wrong.

To show you what a JavaScript novice I am, I don't even know if JavaScript will function in "Preview Site" or if it has to be published to work?

Any help appreciated!

Sarah B

[Bernadette3]

Hi there.  Weebly employees are not able to assist with code edits, but if you post a link to your site another user may be able to help you out. If you do edit the css/html area of your theme your site would be considered a "custom" theme. It's possible you may not be able to receive assistance from support unless you revert back to a standard Weebly theme. If you are able to add the css override to Settings>SEO>Header your site will still be a standard Weebly theme and it is much easier to troubleshoot. I.e. if you run into an issue, you can remove the code, see if the issues resolves, and the paste it back if the override was not the cause. Just something to think about when you are making these types of edits.  

[Haprita_Design]

Bernadette,

     Thanks for the response.  Just for the record, I wasn't asking for someone to fix the code; I was just hoping someone could help me out with the general "adding JavaScript to a Weebly" site I asked.

As I mentioned, I'm not that familiar with JavaScript and wasn't sure where it should be put and whether it should work in "preview site" or if the site had to be published before it would work.

[Bernadette3]

I'm not that familiar with it either, unfortunately. Maybe @BJ can help.. 

[Haprita_Design]

Just trying to keep this question active because I would really like an answer to it if someone can help.  Still wrestling with where to put the line that calls the JavaScript.  Still also wondering if the website has to be published before js can work........

Sarah

[BJ5]

Is this on your published site? It might be easier to troubleshoot if we can see the code on the live site.

[Haprita_Design]

BJ,

     No, the site's not published yet (and can't be until my client gets me the info on his domain).  As I mentioned to Bernadette, Im not looking for someone to "fix the code" or troubleshoot it.  I just had a couple of JavaScript questions I was hoping for answers to.

Sarah

[BJ5]

Ok, no biggie. What file path are you using for the script? Assets is mapped to /files/theme on the published website, so it would be something like mysite.com/files/theme/myFunction.js. It might not work until the site is published once, though.

[Haprita_Design]

BJ,

      Okay, the "might not work until the site is published" maybe answers one of my questions.

     I tried several placements for the script.  Currently, it's under Assets/myFunction.js.  How to call it was the other part of what I was trying to figure out.

     It's a fairly simple filter table.  There's some html that defines the table which I put in header.html and a bit if styling that I put in main.less.  That much worked fine -- the table was there, looked good both in the editor and preview.

     The thing is, the JavaScript is what makes it do what I need it to do.  It gives you an input box that let's you filter the table so that it only shows the data that matches what you input and hides the rest of the table.  For example, if you type in "D", it would show you only the items in the table that had a "d" in it.  If you added an "a", it would show you entries with "da" in them and so on.

     Since I haven't specifically done much of anything with JavaScript, I wasn't sure where to put it or how to "call" it.

Sarah

[BJ5]

That's ok! I'm sure it will probably work fine once the site is published. Technically, you could copy the contents of the script and paste it into an Embed Code element on the page (you'll need to wrap the code in script tags), and then you won't need to include the script separate. That definitely will not work until publishing and will only work on the published site, so it's not really getting anything new for you other than avoiding linking to something in the assets folder.

[Haprita_Design]

Thanks, BJ.  I think I'm going to try to find a different work-around.  I really hate not being able to test the code until the site is "live,"

Sarah