JavaScript - Managing JavaScript files

Modified on Wed, 6 May at 6:46 AM

JavaScript: Managing JavaScript files

JavaScript files in Hubhus let you create reusable JS code hosted on a public URL — reference them across multiple web pages, forms, and templates without inline duplication.

TL;DR

Access: Account → Web Resources → JavaScript → + New JavaScript file. Write JS. Save → gets a public URL. Include in web pages via <script src="[js-url]"></script>. Files are browser-cached. Note: write ES5-compatible JavaScript (no arrow functions, no modules) for broadest compatibility with Hubhus pages and CodeMirror. Edit in-place — use version parameter in URL to bust browser cache during development.

3 things to know

Creating a JavaScript file

Go to Account → Web Resources → JavaScript → + New JavaScript file. Set a name and optional subpath. Write your JavaScript in the code editor. Save → Hubhus generates a public URL. Copy the URL from the list. Write ES5-compatible JS — avoid arrow functions, const/let, template literals, and ES6+ module syntax for maximum compatibility.

Using the JavaScript file

Reference in web pages, emails, or page layouts: <script src="https://leadvalidator.dk/js/..."></script>. Load in the <head> (with defer) or before the closing </body>. Best for: shared utility functions, form validation logic, custom UI behavior used across multiple pages. Keep each file focused on one purpose — don't bundle unrelated logic.

Editing and debugging

Edit via the orange edit icon. Browser cache means changes may not be visible immediately — append ?v=N to the script src during development. In production, caching improves performance. Test in browser developer console (F12) to debug. Hubhus uses jQuery — use jQuery selectors ($('#id')) for Hubhus-rendered elements.

Read more⌄

Referencing a JS file (3 variants)

1. Direct URL in <script> tag:

<script src="https://leadvalidator.dk/js/account/my-script.js"></script>

2. Hubhus @javascript placeholder — full <script> tag:

@javascript[my-script,tag]
<!-- outputs: <script src="https://leadvalidator.dk/js/account/my-script.js"></script> -->

3. Hubhus @javascript placeholder — URL only:

<script src="@javascript[my-script,url]"></script>

Script placement

Place <script src="..."> just before the closing </body> tag for best performance (DOM is ready, no render-blocking)
Or place in <head> with the defer attribute: <script src="..." defer></script>
Load jQuery before your own scripts if using jQuery selectors

Common patterns (ES5-compatible)

Safe DOM-ready wrapper:

document.addEventListener('DOMContentLoaded', function() {
    // safe to query DOM here
});

jQuery DOM-ready (Hubhus already loads jQuery):

$(document).ready(function() {
    // Hubhus fields: $('#field-name').val()
    // Hubhus campaign form: $('.hh-form').find('[name="email"]')
});

Idempotent hook-binding (for scripts that may run multiple times):

if (!window._myScriptInit) {
    window._myScriptInit = true;
    // bind listeners, run setup once
}

Using Hubhus placeholders safely in JS:

<!-- Hide value in DOM, read with JS -->
<span id="brand-color" style="display:none">%brand_color%</span>
<script>
var brandColor = document.getElementById('brand-color').textContent;
</script>
<!-- NEVER inject placeholders directly inside JS string literals -->

Working with Hubhus form fields in JS

// Read a @input field (id="field-slug")
var value = document.getElementById('field-slug').value;

// Read a Data Field (id="df_slug")
var dfValue = jQuery('#df_slug').val();
var dfParsed = JSON.parse(dfValue || '[]');

// Write to a Data Field
jQuery('#df_slug').val(JSON.stringify(dfParsed));

// Trigger form step validation (Hubhus internal)
// Use %submit_form% placeholder — never jQuery .submit()

Troubleshooting

Script 404: Verify slug and check the URL from the JavaScript list
Changes not visible: Hard-refresh (Ctrl+Shift+R) or append ?v=2 to the script src URL
$ is not defined: jQuery not loaded yet — move your script below the jQuery include or use defer
Script runs before DOM is ready: Wrap in DOMContentLoaded or $(document).ready()
Script runs multiple times: Use window._myFlag guard to ensure idempotent binding
console.log not visible in Hubhus booking form: Open browser DevTools (F12) → Console tab. Errors from browser extensions (password managers) can be ignored.

Common searches

JavaScript file • reusable JS • web resources javascript • JS URL • shared script • custom script

Web Pages — Creating and managing web pages
Page layouts — Creating page layouts
CSS stylesheets — Managing stylesheets