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

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.

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');
  }
});

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

@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.

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.

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);
     });
  }
});

@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.

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