I have a index.html page where I download some common js/css. On one page page, when navigated through ui-router , I want to download page specyfic scripts, for instance libraries that are required for this page. This markup is included in XHR HTML returned when I navigate to a view:
<link href="/css/prettyPhoto.css" rel="stylesheet" type="text/css" media="screen" title="prettyPhoto main stylesheet"/>
<script type="text/javascript" src="/js/fade.js"></script>
<script type="text/javascript" src="/js/jquery.prettyPhoto.js"></script>
CSS gets downloaded but I see no JavaScript request on the network tab. How can I fix it / what is the proper way to handling this situation?
Related
I'm using a service that uses the following embed script:
<script type="text/javascript">app_id="XXX";distribution_key="dist_2";</script>
<script type="text/javascript" src="https://loader.knack.com/XXX/dist_2/knack.js"></script>
<div id="knack-dist_2">Loading...</div>
Putting this in using dangerouslySetInnerHTML works, but only on full refresh. If I click a link to this page, it doesn't load.
Are there any tricks to get this to load?
Failed to load resource: the server responded with a status of 404 (Not Found) mistakes shows himself in console for Lighbtox.js. I downloaded the file and put into the my js file, I put the url path corrcetly to the bottom of my project after bootstrap and jquery js files.
I downloaded the file from original place.
I created a minimal working example as follows. It does work with the latest jquery. Make sure jquery script tag is before the lightbox script tag.
my index.html
<html>
<head>
<script src="js/jquery-3.4.1.min.js"></script>
<link href="css/lightbox.min.css" rel="stylesheet" />
</head>
<body>
Image #1
<script src="js/lightbox.min.js"></script>
</body>
</html>
File structure
And the result
enter image description hereI wrote an app in AngularJS two years ago. It was my first stab at AngularJS in a coding bootcamp. I haven't coded much in 2-years. I never hosted the app. It was working as intended the last time I used it. I opened it up today in Chrome and it no longer works. I'm getting a bunch of errors in the console. Is it possible to fix it and get it running again or do I need to start over with the newest version of AngularJS?
Your problem was:
1.your links to libraries were in body and not in header.
2.all your links were missing https:
3.You might running from file and not in local server.
Problem Solved:
I run it in localhost Apache server.
I changed all your links with https: included
I removed all links inside header
Below is your new index.html file.
Copy and paste this new code and run in local server.
<!DOCTYPE html>
<html ng-app="oppApp">
<head>
<title>workMe</title>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Angular-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.0-beta.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-aria.min.js"></script>
<!--Material-->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script src="js/app.js"></script>
<script src="js/NewOpp/newOppCtrl.js"></script>
<script src="js/OppService.js"></script>
</head>
<body>
<header class="header">workMe</header>
<div ng-view class="background"></div>
</body>
</html>
Look at the result. and console with no errors
I have a Angular UI which i deployed as a Spring Boot Web WAR file on a Jboss container (By moving all html, js, css files to /resources/static folder). I used mvn package to create the WAR file and deployed it on Jboss. Now i realized that all static resources like my app.js are loaded in http://localhost/appcontext/js/app.js.
In my angular code i just have
<body>
<script src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular-messages.min.js"> </script>
<script src="https://code.angularjs.org/1.5.5/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/cdaguerre/gmaps- utility-library/4f71018696f179acabbe445f188fc2de13f60c3e/markerwithlabel/src/markerwithlabel.js"></script>
</body>
When the code is executed, it is trying to look for app.js in http://localhost/js/app.js and doesnt find it. How do i make all static resources to load from http://localhost/appcontext?
Why don't you just call the resources specifiying their location relative to where they are?
Something like <script src="appcontext/js/app.js"></script>.
It seems that's what you need, but maybe I'm missunderstanding your problem
In my AngularJS app with the ui-router dependency, for some reason - on Google Chrome - my background-images in my stylesheet is not loading (doesn't even show up in Network tab in dev tools).
Maybe it is because I've bound the link href to my scope, and change it on the fly?
index.html:
<link rel='stylesheet' ngIf='stylePath' ng-href='{{stylePath}}'>
And in my controller I set $scope.stylePath to 'login.css'.
If I open dev tools and uncheck the background-image, and check it again, it loads the image and shows it fine.
No problems on IE11.
Any ideas?
Change from:
<link rel='stylesheet' ngIf='stylePath' ng-href='{{stylePath}}'>
To:
<link rel='stylesheet' ng-if='stylePath' ng-href='stylePath'>