Javascript on a single (or several) pages only

The easiest way is probably to split it into a separate script and put

<script src="new_script.js"></script>

only on the pages where you want it.

My fault for no explaining my issue correctly but the library I’m using relies on Jquery which gets loaded at the end of app.html.eex so just including my script in the relevant page doesn’t work as Jquery is loaded yet.

I don’t want to include my script in app.html.eex for all pages as it is rather large and only required for a few pages (for reference it is a graph library and I only have a few pages with graphs - the majority don’t require them).

cheers

Dave

I’m getting a warning on this webpage (looks like they didn’t update their ssl certificate), but it’s essentially what I’ve been doing:

https://blog.diacode.com/page-specific-javascript-in-phoenix-framework-pt-1

Shared common JavaScript between views

Before continuing let’s first think about what our good old web application is going to need. There’s probably going to be some common js functionality shared across the whole application, like handling pulldown menus in the header, initialazing third party plugins, etc. Having this in mind we can create our first js module that will be in charge of all this common functionality that needs to be executed on every page:

// web/static/js/views/main.js

export default class MainView {
mount() {
// This will be executed when the document loads…
console.log(‘MainView mounted’);
}

unmount() {
// This will be executed when the document unloads…
console.log(‘MainView unmounted’);
}
}
The MainView module will basically have to main functions:

mount which will be called every time the page loads and will contain all the initializing of common functionality needed.
umount which can be used to add any functionality needed to be executed when the document unloads. This might be useful in some situations like showing a confirm alert to the user when he tries to leave an edit view with unsaved changes, for example.
Now let’s update the main app.js file so it uses the new MainView module:

// web/static/js/app.js

import ‘phoenix_html’;
import MainView from ‘./views/main’;

function handleDOMContentLoaded() {
const view = new MainView();
view.mount();

window.currentView = view;
}

function handleDocumentUnload() {
window.currentView.unmount();
}

window.addEventListener(‘DOMContentLoaded’, handleDOMContentLoaded, false);
window.addEventListener(‘unload’, handleDocumentUnload, false);

Note I’m not quoting the entire article.
After the MainView is working, you can add a View to every individual subpage that loads page-specific javascript.
This has been my practice for my past few Phoenix apps.

Thanks Greg - I’ll have a read of the full article.

I was going to post this as I also have been using it but then I noticed someone commented that the app.js still gets the contents of those files concatenated - and I just checked and indeed it seems so - which (kinda…) partially defeats the purpose. If somebody knows how to handle the compilation of js in brunch in order to exclude certain files from the concatenated app.js but still have them be accessible as imports would be great ^

I’m not sure how to accomplish that.

Where I’ve been using it is to change behavior of the UI in different parts of the app. It hasn’t been after saving bandwidth, as I’ve been doing pretty much everything in vanilla JS or very specific frameworks (like fabric.js).

For example, there are several ways to display a map or other feature and load the other UI features.
You can have an if statement that only uses the relevant parts of the code in app.js. Or you can have that code only execute in separate modules, like the technique in the link.

That was enough to solve my dilemma of a very messy app.js. I couldn’t find an obvious way of doing what you wanted when I originally sought it out a few months ago, or at least anything with a simple search term I could think of. Maybe by doing something with Brunch and Phoenix itself? But, I really don’t know. I saw the second part of that article was about webpack, and that may be required to do something like that. It didn’t seem worth it for what I was doing.

*Edited because the second part is webpack, not jetpack

A very easy but slightly hacky method is to put <script src="new_script.js"></script> in the body of the page and then use setTimeout in your code until `window.jQuery’ is loaded:

function defer(method) {
    if (window.jQuery) {
        method();
    } else {
        setTimeout(function() { defer(method) }, 50);
    }
}

From this Stack Overflow answer: https://stackoverflow.com/a/17914854/175830

What I do on my polymerized pages is I pass a extra_javascript option to the assigns being a list of what extra javascript to bring in for a page to work, and my primary view just loads those in, in-order, after my app.js as well.

But really, get rid of jQuery, it is not useful anymore and if you want the functionality there are shims that are much faster now too.

You can also use Phoenix.View.render_exiting/3. Check out the “Rendering based on controller template” section in the doc

if String.contains? @conn.request_path, "somepage" do

LIB

end