1

I'm working on a project right now and I'm facing some issues that I'd like to share. I bought a theme which is not built for meteor. It's actually a pure HTML that I'm adapting to a Meteor way.

It is said to import some JS files in order to make it work correctly. After having some troubles, I managed to import them in a way that it's possible to load them correctly:

Template.ApplicationLayout.onRendered(function () {
    import '../ui/components/js/core/source/App.js';
    import '../ui/components/js/core/source/AppNavigation.js';
    import '../ui/components/js/core/source/AppOffcanvas.js';
    import '../ui/components/js/core/source/AppCard.js';
    import '../ui/components/js/core/source/AppForm.js';
    import '../ui/components/js/core/source/AppNavSearch.js';
    import '../ui/components/js/core/source/AppVendor.js';
});

However, whenever I switch between routes, they kinda stop working, it's possible to see some bugs on the HTML. I'm using iron-router to track it.

I was wondering if there would be a way to ensure that the JS was load properly and won't stop working, regardless of switched routes.

Thanks in advance.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Caike Motta
  • 193
  • 3
  • 16

1 Answers1

0

Since this is not meteor specific JavaScript there is no need to import it this way. You can just add these files to a folder called "public" in your webroot then add script tags to the 'head' section of your layout just as you would with normal HTML.

See similar question about serving static files here: https://stackoverflow.com/a/21341394/4699406

Community
  • 1
  • 1
Jan Jouke Tjalsma
  • 590
  • 2
  • 12
  • I moved all those JS files to my /public folder, and they seemed to work properly. However, when I switch routes, still the error persists. In both ways, I'd need to refresh the page I am, to have them loaded properly. Somehow, they're loaded just on the page I'm firstly seeing. – Caike Motta Jul 05 '16 at 22:56
  • I was afraid that would happen after I posted my answer, sorry. To make external scripts work you usually have to initialize them on onrendered. https://docs.meteor.com/api/templates.html#Template-onRendered Similar to what you did earlier but in stead of importing the files onrendered you would call the initialize function for the imported scripts. Can you tell me which template you are using or upload the script files somewhere? – Jan Jouke Tjalsma Jul 06 '16 at 09:10
  • You should unaccept my answer for now since it doesn't help you. – Jan Jouke Tjalsma Jul 06 '16 at 09:11
  • Sorry, I thought it would work, so I accepted it. Later on, when I tried it, it turned out the result was the same. I managed to solve it in a different way, as you can see in here: (http://codepad.org/WGZSCnY6). I found out that the only part it wasn't working after I switch routes was the "floating labels" method, so I wrote it again. It worked, but I'll try to do as you mentioned before. By the way, this method should work anytime, on any template, except in the first screen which consists of a background pic and a short description of the web service. – Caike Motta Jul 06 '16 at 20:02
  • So basically I import all JS first, and when I switch between routes, I just execute fixFloatingLabels() to fix the bug. That was the only way I managed to fix it so far. – Caike Motta Jul 06 '16 at 20:10