Missed external scripts after browser refresh

help
1

Hello people. I’m a beginner with Meteor and I’ve been having many problems trying to make my scripts work properly. In the first browser load, every script works fine, but after refresh these scripts are not loaded again, so I lost some UI funcionalities in my App. I tried to add this External Scripts in my header, body, even directly in template but it doesn’t work. Right now this is what I have, my last try is to call the scripts from my startup client. As you can see, I’m using inline script in “onRendered” because calling the external scripts doesn’t work. Any help would be great.

Meteor.startup( function() {
$.getScript('https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js'); 
console.log('Masonry General Loaded');
});

Template.masonry.onRendered(function() {
      $(document).ready(function() {

        var $grid = $('.cardsfeed-container').masonry({
          itemSelector: '.grid-item',
          columnWidth: '.grid-sizer',
          gutter: 16,
        });
        $grid.on( 'click', '.grid-item', function() {
              // remove clicked element
              $grid.masonry( 'remove', this ).masonry('layout');
            });
      });
});
2

I recommend you read the blaze documentation to understand that the lifecycle of your DOM is different from regular jQuery based pages. For example, the call to $(document).ready inside your Template.onRendered function is definitely not going to work the way you expect.

First, why do you load the external script via $.getScript? If you must I recommend something like this

Meteor.startup( function() {
 Session.set('masonry', false);
 $.getScript('https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js', function(){
  console.log('Masonry General Loaded');
  Session.set('masonry', true);
 }); 
});

Template.masonry.onRendered(function(){
 var instance = this;
 instance.autorun(function(){
  if(Session.get('masonry')) {
        var $grid = instance.$('.cardsfeed-container').masonry({
          itemSelector: '.grid-item',
          columnWidth: '.grid-sizer',
          gutter: 16,
        });
        $grid.on( 'click', '.grid-item', function() {
              // remove clicked element
              $grid.masonry( 'remove', this ).masonry('layout');
         });
  }
 });
});