Loading the JS file after waiting on Lib (IronRouter) causes the HTML not to load properly

Currently, I am utilizing wait-on-lib along with IRLibLoader.load() in conjunction with Iron-Router, following the instructions provided in the tutorial found at: . My objective is to load external javascript code. Below is a snippet of my routing code:

Router.map(function(){
    this.route("home", {
        path: "/",
        waitOn: IRLibLoader.load("/alert.js")
    });
});

The javascript file loads successfully. However, the issue arises when loading js files as it hinders the loading of HTML content.

In my setup, there are 3 files and one directory employed:

-- test.html
-- test.js
-- test.css
-- public
---- alert.js

The 'alert.js' consists of a single line of code: alert("hello");

Within my 'test.html', I have a template named "home" containing an h1 tag within it which unfortunately no longer gets displayed upon loading.

Answer №1

I believe the proper syntax for this scenario is:

waitOn: function(){
     return [IRLibLoader.load("/alert.js")]
}

Similar to how subscriptions are handled.

Furthermore, in the URL provided, there appears to be correct syntax as demonstrated above.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Cannot utilize remote.require() in TypeScript due to compatibility issues

Recently, I've been facing a frustrating issue while developing an Electron application in TypeScript. I've been trying to execute a module from a renderer process using the code snippet below: import { remote } from 'electron' const ...

Is there a way to access the variable value chosen from a select dropdown inside a function and then assign it to a JavaScript variable outside of the function?

Below is the HTML and JavaScript code that I am working with: function changeResult() { x = document.getElementById("dropdown-list").value; console.log((x)); } var qq; <select id="dropdown-list" onchange="changeResult()"> <option value="4 ...

Discover the steps to linking a dropdown menu to a text input using HTML and JavaScript

I'm currently using Sublime and trying to link a dropdown menu with an input text using html, css, and javascript. When the user selects an option from the dropdown menu, I want the corresponding value to appear in the text input field. For example, i ...

Avoiding URL images on 404 errors in frontend applications

My goal is to dynamically implement images (from image_url_1.jpg to image_url_5.jpg) based on a specific URL. While everything works fine, I encounter an issue when a particular image, like "image_url_4.jpg," is not available and results in a 404 Error cau ...

Error: When attempting to access the 'name' property of an undefined object, a TypeError is thrown. However, accessing another property on the same object does

Retrieving information from API. The fetched data looks like [{"_id":"someId","data":{"name":"someName", ...}}, ...] My state and fetching process are as follows: class Table extends React.Component { constructor() { super(); this.state = { ...

How come jQuery won't let me activate the 'change' event on a radio button?

Click the link below to access the page: Below are the original javascript codes that are functioning correctly: $(document).ready(function(){ $(".open_gene").on('change', function(event) { $('#Gene_field').show(); }); ...

Leveraging the power of a JavaScript framework within the script tag

Hello there! I'm just starting out with vue.js and exploring different JavaScript frameworks. Recently, I came across an interesting example based on the documentation. import modal from 'vue-semantic-modal' export default { components ...

Display streaming data continuously within an HTML page using Angular 16

Currently, I am actively developing a stream API that receives data with a 'Content-Type' of 'text/event-stream'. Below is a snippet from my stream.service.ts: connectToSse(): Observable<any> { return new Observable((observer ...

Pagination in DynamoDB: Moving forward and backward through your data

Currently, I am utilizing DynamoDB in combination with NodeJS to display a list of objects on the user interface. Given that DynamoDB can only process 1MB of data at a time, I have opted to implement pagination. This allows users to navigate between pages ...

Retrieving PHP variable within a JavaScript file

I have a PHP script running on my server that tracks the number of files in a specific directory. I want to retrieve this file count ($fileCount) in my JavaScript code. numberOfImages.php: <?php $dir = "/my/directory/"; $fi = new FilesystemIterator($d ...

What is the best way to implement an ng-change function on multiple fields within the same page without causing a cyclic call loop?

In my page, I have three angular-moment-datepicker fields - a date picker field, a month picker field, and a year picker field respectively. Here is the code: <input class="form-control" placeholder="BY DAY" ng-model="date" moment-picker="gDate" start- ...

Implementing the use of a partial view in ASP.NET MVC with the help of JavaScript

I am faced with a challenge of displaying 15 different partial views based on the user's selection from a menu tab. Essentially, I have these 15 menu tabs on one side of the page, and when a user clicks on a tab, the content related to that tab should ...

When attempting to install material UI in my terminal, I encounter issues and encounter errors along the way

$ npm install @material-ui/core npm version : 6.14.4 Error: Source text contains an unrecognized token. At line:1 char:15 $ npm install <<<< @material-ui/core CategoryInfo : ParserError: (:) [], ParentContainsErrorRecordException ...

Send a pair of values using a set of two parameters

My current code is currently passing only one parameter value. However, I would like to modify it to pass two values with two parameters. This is my current code: <script> function getfilter(str){ document.getElementById("result"). ...

Supporting server-side routing with NodeJS and Express for AngularJS applications

My current setup includes NodeJS + expressJS on the server and AngularJS on the client side. The routes defined in my AngularJS controller are as follows: app.config(function($routeProvider,$locationProvider) { $routeProvider .when('/field1/:id&apo ...

Embedded URL in dynamically created AJAX text

I created a search field that uses ajax/jquery to generate a list of users. Result: <li class="list-group-item"> <span class="glyphicon glyphicon-user"></span> <span class="badge addUserToGroup" data-user="{{ user.getId }}"&g ...

Techniques to dynamically insert database entries into my table using ajax

After acquiring the necessary information, I find myself faced with an empty table named categorytable. In order for the code below to function properly, I need to populate records in categoryList. What should I include in categoryList to retrieve data fro ...

What is the best way to trigger a unique modal dialog for every element that is clicked on?

I simply want to click on the state and have that state's specific pop-up appear. $("path, circle").on('click', function(e) { $('#info-box').css('display', 'block'); $('#info-box').html($(this ...

What steps can I take to reset my JavaScript code once its original purpose has been fulfilled?

I created this code, learning as I went along. It measures Beats Per Minute as one clicks the left-mouse-button each time they feel a pulse. After 10 clicks, the JavaScript code takes all the values in the array and calculates an average BPM. The issue ar ...

Prevent vertical scrolling on touch devices when using the Owl Carousel plugin

Is there a way to prevent vertical scrolling on Owl Carousel when dragging it horizontally on touch devices? It currently allows for up and down movement, causing the whole page to jiggle. If anyone has a solution, I can share the JavaScript file. Appreci ...