Having trouble using Barba.js and separate JS files - javascript

I've setup Barba.js on my Wordpress website. It seems to be working. the only thing is that when I transition to other pages, my other JS files don't load until a hard refresh.
I think to solve this, I have to use namespace and BeforeEnter and re-run my separate JS file within that
The only problem is I don't know how to do that. I've looked all over the net.
I've tried this (which I know is not right, but maybe on the right track?)
let script = document.createElement('script');
script.src="/flickity.init.js";
next.container.appendChild(script);
Any help would be appreciated :)
Thanks in advance!

Was actually a pretty simple fix.
I just wrapped my other JS files code in a const runScripts = function () {} then called the function runScripts() inside a view in my custom Barba script with beforeEnter({ next }) {} and a relevant name space.

Related

JS works on some pages but not others... file exists in page source though

I don't know much javascript so I'm pretty much copy-pasting. I'm making a website and there is a navigation sidebar. I have this script to toggle a class the sets display to none.
$(document).ready(function () {
$("#sidebar-toggle").on("click", function () {
$("aside.navigation").toggleClass("no-sidebar");
});
});
I know the code works because it functions perfectly on a select few pages - views that happen to be defined in a specific Flask blueprint. Not on any other page.
I've checked that the structure doesn't change between pages (maybe I made a jinja template mistake) and it doesn't - all referenced elements exist and have the correct ids and classes. The javascript file containing the script above is loaded on every page and viewing it through the browser shows the correct code.
I'm hoping this can be resolved by a misunderstanding in how js files work and/or the syntax above. If anything other info would help, lmk.
Okay the non-functioning pages were throwing a type error that referenced some code for modals (that was also in main.js) above the sidebar code. The problem was solved by moving the sidebar code above the problematic code.
Now I need to figure out why a11y dialogs are throwing an error on some pages and not others...
Edit: Solved that too.
In my case base.js contained the following code:
var cast_crew_modal = document.getElementById('cast-crew-dialog')
var cast_crew_dialog = new A11yDialog(cast_crew_modal)
cast_crew_dialog.on('show', function (cast_crew_modal, cast_crew_trigger) {
console.log(cast_crew_modal)
console.log(cast_crew_trigger)
})
Great except the cast_crew_modal only exists in Flask views defined in the Production blueprint. On all other pages, that first variable gets set as none/null because it can't find #cast-crew-dialog. Hence why the original sidebar code only worked on production pages.

Javascript functions between canvas, iframe and HTML page

I am currently working on a PlayCanvas project which is going to be embedded in an iFrame inside a slideshow(Articulate Storyline). The slideshow application lets me use Javascript by using:
player.SetVar("Result",score);
where player is:
parent.getPlayer();
The structure ends up being, each being a child of the former:
Main html file(slideshow)
iFrame (with source on the same domain)
Canvas
JS script inside PlayCanvas application
My main problem here is that I can't call getPlayer() without accessing the iFrame, but parent.document.getElementById('') returns null. I feel like I'm overlooking something very obvious but I can't get it working.
Thanks in advance, and if my formatting/question is incorrect please let me know so I can update the post!
Well, found the issue, Articulate uses GetPlayer() instead of getPlayer(), cost me way too long to figure that out.

Loading external JS / JQuery script via MeteorJS

I'm trying to load an external script while using Meteor.
Currently using this code in my layout.js to some success.
Meteor.startup( function() {
$.getScript('js/scripts.js');
});
However, if I go to another url and come back to it, the script no longer works. (I see it not working because my background cover image disappears.)
Any external scripts should be placed in client/compatibility, and Meteor will load it for you; no need for $.getScript('js/scripts.js');
You can then instantiate that script on the template like:
Template.game.onRendered(function(){
$('.grid').isotope({});
});
For anyone needing help with this, replace Meteor.startup with Template.name.onRendered. This helped solve my issue.
Cheers!

BabylonJS Execute Script from External File

I'm having a (simple) issue, but I have no idea how to fix it. Essentially, every tutorial I have come across for Babylon puts all of the Javascript code inside < script > tags in the main HTML page.
However, I would like to have all of my Javascript code inside a separate file. I have tried every way of loading it as I could think of, though I am a novice at Javascript (I am decent at C++, and I can see the similarities); yet I was unable to make it load. (It works fine when called from the HTML page itself).
Does anyone know what (if anything) I can do in order to be able to load my scripts from external files, and still get everything to work? Thanks in advance!
2 options:
register to the DOMContentLoaded event in your external JS file
reference your JS file with the tag at the end of the HTML page
You can find a sample in one of my tutorials here: http://blogs.msdn.com/b/davrous/archive/2014/11/18/understanding-collisions-amp-physics-by-building-a-cool-webgl-babylon-js-demo-with-oimo-js.aspx
Enjoy and thanks for using Babylon.js! :)
David

Loading Javascript through an AJAX load through jQuery?

I have an javascript that I place into a page using the code below. What the code does is place an object/embed code into a webpage. Simple javascript loader to a NicoVideo movie
<script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/sm13154955?w=640&h=395"></script>
This works great in a webpage. But what if I want to load this javascript into a page using AJAX? This no longer works for the obvious reasons, you would need to eval the script in order to get it to run. However, I have no idea how to do this. I am using jQuery on my page; so keep that in mind. I have tried the following code, but it doesn't seem to work through AJAX, or even in a normal page load environment.
<script>$.getScript("http://ext.nicovideo.jp/thumb_watch/sm13154955?w=640&h=395");</script>
Any ideas on how I would get this to work?
I think it works but its attempting to inline the write which I don't know if that would work in this case.
You would need to see if there was a way to essentially execute the '.getHTML' method and take that result and update an existing element on the page.
The issue though is that the anonymous function that is generated and executed inline might not work properly.
After reading official getScript reference, it seems you have to do something with that JS file you got a hold of, using something like this:
$.getScript("http://ext.nicovideo.jp/thumb_watch/sm13154955?w=640&h=395", function () {
// use functions from loaded file
});

Categories

Resources