[SOLVED] Problem with js file functionality not working on return to page

help
1

I’m having two problems that are making me nuts! Currently using iron:router, but happy to change.

First, I have a main page, “home” with a common layout template that is also used by several other top-level pages. The main page requires a bunch of js files including
jquery.prettyPhoto.js
owl.carousel.js
etc.

I tried using bootstrap as a separately loaded entity, but added to the twbs:bootstrap package.

I tried the included js in the layout template as client/templates/layoutParts/layout.html:

<body>
<body>
{{> header }}
{{> yield }}
{{> footer }}

<!-- Scripts -->
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script>window.jQuery || document.write(’<script src="/js/vendor/jquery-1.11.3.min.js"></script>’)</script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/jquery.prettyPhoto.js"></script>
<script src="/js/bootstrap-select.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/scripts.js"></script>
</body>

This isn’t preferred, as only “home.html” needs these scripts, and the layout is shared with several other top level pages… but doesn’t work anyway. I also tried adding the to the bottom of the “home.html” template. No love. All associated CSS files are located in client/styles. The ‘js’ folder for the above js files is in the public/ directory.

What happens is, on initial load of the page, The functionality of the scripts does not work, although, if I check the network loading in chrome dev tools, all of those scripts were loaded. If I manually refresh the page, the functionality works. If I navigate to another top level page, say, “about.html”, and then subsequently navigate back to “home.html”, the scripts do NOT work. If I reload “home.html”, functionality comes back-- until I navigate away from it, and then return to it once again.

The second problem is along similar lines, with a page navigated to after login. In this case, it’s just using plain bootstrap functionality of drop-down menu’s. When this page initially loads, none of the bootstrap drop-downs work. If I reload the page, however, from then forward (even if navigating away and returning) the bootstrap drop-down functionality works.

I’d really appreciate being schooled here.

2

Check out this post.

Using the @jamgold example, you could combine with the code below to have a template conditional that will wait until the scripts are loaded.

<template name="myTemplate">
  {{#if haveScripts}}
    <!-- show content -->
  {{else}}
    <!-- show loader? -->
  {{/if}}
</template>

Template.myTemplate.helpers({
  'haveScripts' () {
    return Session.get('conectaReady');
  }
});
3

Thanks, @vigorwebsolutions, I’ll give that a try!

4

@vigorwebsolutions I should have noticed this before running it, but putting it in the Meteor.startup() only does just that. When navigating away, and then subsequently navigating back, it is not called. I did extrapolate from the link you supplied, and moved it to the onCreate() for the page in question. That seems to get me half-way there, which is better than before, but still not getting me there. Thank you, though, for the info. It’s something I’ll add to my toolbox.

5

Taking the resources @vigorwebsolutions gave me, and then working the problem, the solution in this case was to place the $.getScript() calls inside the Template.onCreate() handler, and then encase the calls that depend on these scripts within the function portion of $.getScript() [which should have been obvious to me]. They need to be in the onCreated() handler so that each time the url is navigated to, they are called.

6

Lol. Was literally writing that up when you just replied. To follow up, if you’re using session, you can do something like:

Template.myTemplate.onCreated(function() {
  if (typeof Session.get('scriptsReady') === 'undefined') {
    Session.set('scriptsReady', false);
  }
  if (!Session.get('scriptsReady') {
    $.getScript('https://conektaapi.s3.amazonaws.com/v0.3.2/js/conekta.js', function(){
      // script has loaded
      Session.set('scriptsReady', true);
     });
  }
});
7

@vigorwebsolutions ! That’s almost exactly what I ended up with, then of course adding the function calls that relate to the loaded scripts within the respective //script has loaded section. Thanks a lot for your help, sir. This has ben vexing me for a couple days.

8

No worries! There are some quirky patterns that (once you get down) are pretty helpful.