I am trying to add a route.js file in the layout.ejs.
<!DOCTYPE html>
<html ng-app="scratchpad">
<head>
<title>Scratchpad</title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
Stylesheets and Preprocessors
==============================
You can always bring in CSS files manually with `<link>` tags, or asynchronously
using a solution like AMD (RequireJS). Or, if you like, you can take advantage
of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, stylesheets from your `assets/styles` folder are included
here automatically (between STYLES and STYLES END). Both CSS (.css) and LESS (.less)
are supported. In production, your styles will be minified and concatenated into
a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your CSS files
+ Import stylesheets from other directories
+ Use a different or additional preprocessor, like SASS, SCSS or Stylus
-->
<!--Twitter Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!--Twitter Bootstrap END-->
<!--STYLES-->
<link rel="stylesheet" href="/styles/border.css">
<link rel="stylesheet" href="/styles/tablerow.css">
<!--STYLES END-->
</head>
<body>
<nav class = "navbar navbar-default" role = "navigation">
<div class = "container-fluid">
<div class = "navbar-header">
<a class = "navbar-brand" ui-sref = "scratchpad">MY SCRATCHPAD</a>
</div>
</div>
</nav>
<p>hello world</p>
<div class = "container">
<div ui-view></div>
</div>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/js/dependencies/bower_components/angular/angular.min.js"></script>
<script src="/js/dependencies/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/js/dependencies/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="/js/dependencies/bower_components/moment/moment.js"></script>
<script src="/js/dependencies/application.js"></script>
<script src="/js/dependencies/route.js"></script>
<!--SCRIPTS END-->
</body>
</html>
Whenever i add this and save it. Its got saved. But when i try to run sails lift. The route.js script getting gone and the layout.ejs file changes into old state. Can anyone figure this out? Any idea of what may be the bug? cause of grunt?
As long as I remember, everything inside
<!--SCRIPTS-->
...
<!--SCRIPTS END-->
section is generated by sails. Try just to put your link after , so it will be like
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/js/dependencies/bower_components/angular/angular.min.js"></script>
<script src="/js/dependencies/bower_components/angular-resource/angular-resource.min.js"></script>
<script src="/js/dependencies/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="/js/dependencies/bower_components/moment/moment.js"></script>
<script src="/js/dependencies/application.js"></script>
<!--SCRIPTS END-->
<script src="/js/dependencies/route.js"></script>
Related
I created a new Blazor WebAssebly project in VS19 and wanted to add a website template to my project, I downloaded it but was wondering where I should put the JavaScript files it came with.
I currently have them here in my index.html file in wwwroot folder:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>ImmoPlatform.SPA</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="ImmoPlatform.SPA.styles.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
<!-- jQuery library -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<!-- slick slider -->
<script type="text/javascript" src="js/slick.js"></script>
<!-- Price picker slider -->
<script type="text/javascript" src="js/nouislider.js"></script>
<!-- mixit slider -->
<script type="text/javascript" src="js/jquery.mixitup.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<!-- Custom js -->
<script src="js/custom.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>
but when I start my blazor project the javascript doesent seem to load. the CSS I put in the mainlayout.razor file in the Shared folder works file and that CSS came with the template.
Is this the correct place to put them? or should I put them somewhere else?
I ran into the same problem as you. The J/S files must point to the index.html; however, Blazor does not load them automatically – it must use the J/S interoperability, which is complex, and much more so if you do not know the functions that the template has.
At home, I wanted to use Admin LTE, luckily I found a project on GitHub, where they are making a version of this template for Blazor.
https://github.com/sjefvanleeuwen/blazor-adminlte
Hopefully the Blazor team will change this type of operation, since, in my view, it is a setback in the way of doing frontEnd.
Hy Guys
I have a problem with my Javascript. Since I implementet Bootstrap it won't work anymore. Even simple things like an alert with an onclick function won't work.
Here is my code:
Implementet Scripts
<link type="text/css" href="../CSS/main1.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<script type="text/javascript" src="../JS/main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
Simple HTML
<!DOCTYPE html>
<html>
<head>
<?php require 'scripts.php'; ?>
</head>
<header>
<?php include 'header.php'; ?>
</header>
<body>
<div class="container-fluid d-block d-sm-none">
<!-- LAYOUT FOR MOBILE -->
<div class="row">
<div class="col">
<button class="s-button" id="show-login" onclick="test()">Login</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="s-button">Register</button>
</div>
</div>
</div>
</body>
</html>
Javascript
function test(){
alert('hallo');
}
I am programming since a bit know so it could be possible that I'm overlooking somthing simple but I'm not seeing it.
Make sure to put the JS function before the actual call in HTML. Also check your JS console to see if there are any errors there.
your javascript should load though, and you can just use this directly <script src="../JS/main.js"></script>
and ensure it is properly addressed i.e the JS is really uppercase.
and you could also put the main.js file above the bootstrap js file
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Try this:
Using <script type="text/javascript" src="JS/main.js"></script> as the link to your HTML, assuming the JS directory is in the same directory as your index.html file.
Put your links to external stuff in the HTML head. (It was unclear from your post whether or not you did.) You don't need to put them at the end of your HTML if you use $(document).ready(function(){ //do stuff here }); which you should use anyway because jQuery is already included in your project since you're using Bootstrap. (You can declare your test function outside of the document ready call, and should.)
I am pretty sure the Bootstrap CSS link you were using was corrupted (or something), so I changed that to use MaxCDN.
My guess is your CSS isn't working either. Try changing something obvious with it to check. The '..' in a link means to move 'back' one directory, so chances are the browser is looking for this file somewhere that it doesn't exist.
Take a look at this for more information about how to link to files, and consider trying an HTML validator.
Please let me know if you have any questions or if this doesn't work for you. When I started web development, I would spend hours trying to figure this stuff out.
So your HTML would look like:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="../CSS/main1.css" rel="stylesheet" />
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
<script type="text/javascript" src="JS/main.js"></script>
<?php require 'scripts.php'; ?>
</head>
<header>
<?php include 'header.php'; ?>
</header>
<body>
<div class="container-fluid d-block d-sm-none">
<!-- LAYOUT FOR MOBILE -->
<div class="row">
<div class="col">
<button class="s-button" id="show-login" onclick="test()">Login</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="s-button">Register</button>
</div>
</div>
</div>
</body>
</html>
For bonus points: if you need to see the console or to know anything about what is going on in either Firefox or Chrome, hit ctrl shift i and click around. If you think something has gone wrong, just hit the refresh button.
So after spending another hour figuring out what is wrong with the code I found out that the code is correct form day one. The problem is that I am using Firefox Mobile Emulator to test the app and this won't show any alert window. When I deactivate the emulation and run the website as normal the alert box will show up as the button is clicked. So now I have installed Chrome and tested it there (also with the mobile emulator) and it works fine. So Firefox knows the problem (as forums post show) but they didn't fix it yet.
Anyway thank you all for the help.
<script src="scripts/lib/angular.min.js"></script>
<script src="scripts/lib/angular-route.min.js"></script>
<script src="scripts/lib/angular-animate.min.js"></script>
<script src="scripts/lib/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="./styles/w3ds.css" rel="stylesheet" type="text/css" />
<link href="./styles/w3ds-data-tables.css" rel="stylesheet" type="text/css"/>
<link href="https://1.www.s81c.com/common/v18/css/www.css" rel="stylesheet">
<link href="./styles/main.css" rel="stylesheet" type="text/css" />
<script src="scripts/app/run.js"></script>
<script src="scripts/app/config.js"></script>
<script src="scripts/app/ctrl-all-ee.js"></script>
<script src="scripts/app/ctrl-2.js"></script>
<script src="scripts/app/awtrun.js"></script>
<script src="scripts/app/Params.js"></script>
<script src="scripts/app/directives.js"></script>
<script src="scripts/app/services.js"></script>
<script src="scripts/app/filters.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
Working in eclipse to build an application, I have multiple .js files and multiple .css files but for some the angularjs is not working, its not reading the other .html or .js files. Any ideas why this may be happening. Thanks for the help.
<!-- Small Screen Hamburger -->
<div class="ds-col-xs-3 ds-col-sm-2 ds-hide-md ds-float-right">
<a class="ds-button ds-flat" ng-click="overlayShow('#overlay-mini-menu')">
<span class="ds-icon-menu ds-icon-size-default"></span>
</a>
</div>
<!-- Small Screen Hamburger Overlay -->
<div class="ds-overlay-container">
<div class="ds-overlay-focus" id="overlay-mini-menu" ng-click="overlayHide()">
<div class="ds-overlay-box gsi-overlay-main" ng-click="$event.stopPropagation()">
<div class="gsi-overlay-heading ds-padding-bottom-2">
<button class="ds-col-auto ds-button ds-flat" ng-click="overlayHide()">
<span id="overlay-mini-menu-open"></span><span class="ds-icon-x"></span>
</button>
</div>
<div class="gsi-content">
<div class="ds-margin-top-1_5">
Deployment Overview
</div>
</div>
</div>
</div>
</div>
EX. href="./#/allee">
Deployment Overview
Above is how i'm attempting to call the other .html files. I'm trying to avoid one long drawn out .html file and instead have multiple to easily decipher/manage/update the code. But my ./#/allee (.html) is not reflecting when I load the page.
You can create a folder lets say: assets. Load all the files into this folder but keep the folder structure. From the html file get files as:
assets/scripts/lib/angular.min.js
This assumes you load files relatively so folder assets must be in the same directory as you html page.
Repeat the same for all of the remaining files to include.
I'm trying to build a HTML template with a small javascript code. Here is the stuff... At the root, I built two files :
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>HTML Template</title>
<!-- Header initialized with /header-footer.js -->
</head>
<body>
<footer>
<!-- Footer initialized with /header-footer.js -->
<script type="text/javascript" src="/headerfooter.js"></script>
</footer>
</body>
</html>
headerfooter.js
(function () {
/*************** HEADER *****************/
const headerBeforeAppend = document.querySelector('head')
document.querySelector('head').innerHTML = `
${headerBeforeAppend.innerHTML}
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1" name="viewport">
<!-- CSS -->
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,400,700" rel="stylesheet">
<!-- Bootstrap, Materialize, etc... you see the idea -->
<!-- Javascript -->
<!-- Fontawesome -->
<script src="https://use.fontawesome.com/45d80bbe59.js"></script>
<!-- jQuery, Bootstrap scripts, etc... you see the idea -->
`
/*************** FOOTER *****************/
const footerBeforeAppend = document.querySelector('footer')
document.querySelector('footer').innerHTML = `
${footerBeforeAppend.innerHTML}
<!-- JQuery (for Bootstrap) -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap CDN v4 alpha-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
`
})()
The idea is, when I load the index.html in a browser, to have the headerfooter.js script to write my <head> section and my <footer> section with the <links> and <script> I need.
It's actually working perfectly when, for the script, the code I write is the relative path to the script : <script type="text/javascript" src="headerfooter.js"></script>, but it's not working with the absolute path to the root: <script type="text/javascript" src="/headerfooter.js"></script>.
This is a problem, because I would like this to be a template, so that I include this script in every html page I will create in my web folder without having to re-write the path everytime. Did I make a mistake somewhere ?
(PS: is it a bad practice trying to build a template like that ?)
How you run your page will matter.
If you're trying to run it with the file:// protocol (by just opening index.html), an absolute path won't resolve correctly. You'll want to somehow run an local server (there are dozens of ways to do this, depending what all you're using, too large a scope for this question).
If you are running some kind of local server (i.e., http://localhost), then try opening the file directly with http://localhost/headerfooter.js. If that doesn't work, your file isn't quite where you think it is.
Apologies if this is an old question. I have spent a few hours searching for an answer but had no luck.
I'm attempting to convert an existing (primarily jQuery) application to use AngularJS. I've hit a problem where a JavaScript file I am including in index.html is being run too early when being included in my AngularJS application. i.e. by using a <script> tag:
<script type="text/javascript" src="/components/js/theme.js"></script>
This file contains a lot of jQuery which needs the rest of the page to have been rendered to have an effect. So is there a way I can include this script and ensure it is only loaded after the rest of the page has finished loading? I have a set of directives on the page and the script is being loaded before these are rendered.
Update:
Here is the structure of my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App Title</title>
<base href="/">
<!-- icons and CSS -->
<link href="/img/ico/favicon.ico" rel="shortcut icon"
type="image/vnd.microsoft.icon">
<link href="/css/bootstrap.min.css" media="screen" rel="stylesheet"
type="text/css">
<!-- External Libraries -->
<script type="text/javascript" src="/external/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/external/angular/angular.js"></script>
<!-- Angular Components -->
<script type="text/javascript" src="/components/services/ui.js"></script>
<script type="text/javascript"
src="/components/navigation/js/navigation.js"></script>
<!-- App set and config -->
<script type="text/javascript" src="/js/app/app.js"></script>
<script type="text/javascript" src="/js/app/config.js"></script>
<script type="text/javascript" src="/js/app/routes.js"></script>
<!-- endbuild -->
<!-- Precompiled HTML templates -->
<script type="text/javascript" src="/js/templates.module.js"></script>
</head>
<body ng-cloak>
<!-- directive -->
<top-nav-bar></top-nav-bar>
<div class="content">
<div class="container">
<!-- directive -->
<side-nav-bar></side-nav-bar>
<!-- angular view -->
<div ng-view></div>
</div>
</div>
<!-- directive -->
<adysis-footer></adysis-footer>
<!-- Bootstrapper -->
<script src='/js/app.bootstrap.js' type='text/javascript'></script>
<!-- JAVASCRIPT FILE WHICH NEEDS TO RUN AFTER PAGE HAS LOADED! -->
<script type="text/javascript" src="/components/js/theme.js"></script>
</body>
</html>
As you can see, the "theme.js" file is the last item of the <body>. I have stopped in the file to ensure it is being loaded. But this is always done before the rest of the page has rendered. Could some other JavaScript be interfering upsetting things? Note that I have not included all of the JavaScript files that are being included.
Update 2:
I've added further break points in the JavaScript functions for the directives you can see in my index.html. Each of them is stopped in after the theme.js is executed. I don't know why this is, so I'm mentioning this in case it gives more clues as to the problem.
Update 3:
The first line of the "theme.js" file is:
jQuery(document).ready(function($)
And then the function contains a long series of jQuery selectors to setup events and so on. My understanding is the point of this line is to wait until the document has been loaded. But could something in my setup, e.g. Angular, be preventing this from happening?
I've tried changing this line to:
angular.element(document).ready(function($)
and whilst this does lead to the content on the function to be run later, it's still not after the whole document has loaded.
Make sure it's at the end of your HTML Body and not in the header section. If it's in the head section it'll load before the page renders.