I've made an application with a PouchDB frontend that is stored as a CouchDB attachment.
I have this html page stored at localhost:5984/repository/b/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="/repository/b/pouchdb.min.js" type="text/javascript"></script>
<title>practice</title>
<div id="practice">
</div>
</head>
<body>
<div id="app"></div>
<script src="/repository/b/build.js" type="text/javascript"></script>
<script src="/repository/b/store.js" type="text/javascript"></script>
</body>
</html>
Pouchdb.min.js is successfully stored at the src referenced in the head. I try to reference it in store.js:
var db = new PouchDB('http://localhost:5984/repository');
var text;
var b = document.getElementById('practice');
db.info().then(function(info) {
text=info;
}).then(function(){
b.innerHTML=text;
});
I get the error
ReferenceError: PouchDB is not defined
When I look in my debugger, in the application section of chrome, it shows that the pouchdb file contents are loaded. In the network section, all of my resources are showing 304 errors.
Can anyone guess what might be going on here?
Related
I'm working on a website that is made on a samba share connected to a bunch of school computers. School computers being how they are, I have no access or way of setting up any webserver of any sort. I'm trying to make a header and footer for all of the HTML files on the website, but I can't include it by a standard jQuery ajax request pointing to a relative file path. Right now, the code looks like this
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<html lang='en'>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="javascript/libs/jquery.js"></script>
<div id="header"></div>
<script>
$.ajaxSetup({
crossOrigin: true
});
$.ajax({
url: "file://./html-templates/header.html",
data:{"id":header},
type: 'GET',
success: function(){
console.log("Added header");
}
});
</script>
</head>
<body>
</body>
</html>
The header file is currently only some text for testing:
<h2>You have successfully imported the header</h2>
This returns this error message from Firefox 63.0.3:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///html-templates/toolbar.html. (Reason: CORS request not HTTP).
Is there any way I could import HTML from separate files into a HTML file manually without having a web server do it for me?
For linux users, you can run this command
google-chrome --disable-web-security --user-data-dir="/var/tmp/Chrome dev session"
Which will disable all the security and your will pass without any issue.
NOTE : Please do this only when testing in local systems.
Chrome has disable it for security but lucky for you Firefox can do that if you are using relative URL.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
$(function () {
$.get("html-templates/header.html", function (data) {
var headerText = $(data).find('h2').text();
$('#header').text(headerText);
});
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
the path ./ is same directory with your script you can just
url: "html-templates/header.html",
The problem is that I try to put my codes in separate javascript files. And one file will refer to an variable in a file which is referenced in index.html file previously.
For instance, the two files in my public folder are client.js and test.js.
In my client.js file, I have these codes:
function init() {
var socket = io.connect();
var temp = x;
}
document.addEventListener("DOMContentLoaded", init, false);
In my test.js file, I have these codes:
var x = 5;
In my index.html file, I have these codes:
<!DOCTYPE html>
<html>
<head>
<title>Amazing Particle System</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<canvas id="particle"></canvas>
<script src="/socket.io/socket.io.js"></script>
<script scr="/test.js"></script>
<script src="/client.js"></script>
</body>
</html>
But when I run my code I always get the error:
client.js:15 Uncaught ReferenceError: x is not defined
In developer tool I cannot see my test.js file in sources tab.
Is there anything I have done wrong in my code? How can I fix the issue?
You have to correct a typo in <script scr="/test.js"></script>, you have wrote scr instead of src attribute.. That's why your script do not work as expected
Context
I've used Mocha before many times, both in the browser and just using the command line. I tend to use Chai's expect module for bdd.
I have five test files that have been working with command line npm test. I just want to run the tests in the browser for better debugging.
Problem
The setup is just boggling my mind. I either get a blank Mocha page without tests or I see the first test flash on screen, then it redirects.
Current specRunner.html
<!DOCTYPE HTML
<html>
<head>
<title>Mocha Tests</title>
<link rel="stylesheet" href="node_modules/mocha/mocha.css" />
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<script>mocha.setup('bdd');</script>
<script src="mineLocation.js"></script>
<script src="test/mineTests.js"></script>
<script>
window.expect = chai.expect;
mocha.run();
</script>
</head>
<body>
<div id="mocha"></div>
</body>
</html>
Previous Attempts
I've tried moving script tags around, thinking that dependencies are being unmet at load time.
I've tried relative vs. absolute paths. Console says all the tags are loading correctly.
I've tried modifying the run script tag. When it is as the example above, it turns out a blank page and says "Cannot read property 'appendChild' of null", pointing back to Mocha:
When the run script tag looks like this:
$(function() {
window.mochaPhantomJS ? mochaPhantomJS.run() : mocha.run();
});
It redirects from /specRunner.html to /2,1 and the console error repeats about every 30 seconds.
Here you go, just tested it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mocha Test</title>
<link rel="stylesheet" type="text/css" href="node_modules/mocha/mocha.css">
</head>
<body>
<div id='mocha'></div>
<div id='app'></div>
<script src="node_modules/mocha/mocha.js"></script>
<script src="node_modules/chai/chai.js"></script>
<script src="app.js"></script>
<script>
mocha.setup('bdd');
var expect = chai.expect;
</script>
<!-- Tests -->
<script src="app_test.js"></script>
<script>
mocha.run();
</script>
</body>
</html>
So, I've found that it's not necessarily an issue with the HTML setup, but rather an issue with a test.
Setting the location variable globally within the file causes the strange redirection (to /2,1) and error "Cannot read property 'appendChild' of null".
Moving the variable within the describe statement, on line 4, fixes the problem.
My final HTML is cleaner as well:
<html>
<head>
<meta charset="utf-8">
<title>Mocha Tests</title>
<link rel="stylesheet" href="node_modules/mocha/mocha.css" />
</head>
<body>
<div id="mocha"></div>
<script src="node_modules/mocha/mocha.js"></script>
<script>mocha.setup('bdd');</script>
<script src="node_modules/chai/chai.js"></script>
<script>var expect = chai.expect;</script>
<!-- src files -->
<script src="narcissistic.js"></script>
<script src="morseCodeDecoder.js"></script>
<script src="windComponents.js"></script>
<script src="mineLocation.js"></script>
<!-- test files -->
<script src="test/narcissisticTests.js"></script>
<script src="test/morseTests.js"></script>
<script src="test/windTests.js"></script>
<script src="test/mineTests.js"></script>
<script>mocha.run();</script>
</body>
</html>
trying beginner's Angular using tutorial here: https://www.youtube.com/watch?v=WuiHuZq_cg4. i think files are in proper places, permissions set, yet my index.html shows nothing on my browser, and Chrome dev tools show everything in place, no errors. code is here" https://gist.github.com/9ad771c60d33fc020216.git, but also here: [what am i missing??]
index.html:
<!doctype html>
<html ng-app>
<head>
<script src="https://code.angularjs.org/1.0.0rc3/angular-1.0.0rc3.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="js/todo.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"
</head>
<body>
<div ng-controllers="TodoCtrl">
{{totalTodos}}
</div>
</body>
</html>
todo.js:
function TodoCtrl($scope) {
$scope.totalTodos = 4;
}
Try
ng-controller="TodoCtrl"
instead of
ng-controllers="TodoCtrl"
S won't tag with controller
Okay I have a js file in htdocs and when I include it in my php page it doesn't work however when I load it from online it works I don't know what is wrong with it.
I have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> test</title>
</head>
I am putting the js file at the bottom of the page and this doesn't work,
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/boostrap.js"></script>
<script type="text/javascript" src="js/wpts_slider_multiple.js"></script>
This works,
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jqueryslidershock.com/wp-content/plugins/tsslider/js/boostrap.js"></script>
<script type="text/javascript" src="http://www.jqueryslidershock.com/wp-content/plugins/tsslider/js/wpts_slider_multiple.js"></script>
try this: src="/js/boostrap.js"> instead of src="js/boostrap.js">
the / is your root path
you can use this absolute path /js/boostrap.js in php, js, css files, and it works fine.
<script type="text/javascript" src="/js/boostrap.js"></script>
<script type="text/javascript" src="/js/wpts_slider_multiple.js"></script>
You should give full path of your jquery files like
http://example.com/js/boostrap.js
Code
<script src="http://example.com/js/boostrap.js"></script>
<script src="http://example.com/js/wpts_slider_multiple.js"></script>
Either of the following is happening.
Incorrect path - Please check the file paths.
No Read permission for the JS files - If you are sure that the path for the local JS files are correct, check their read permissions.
File does not exist - Simple reason as it states. I believe that it's not the case.
Let me know what you found.
try giving the paths like
<script type="text/javascript" src="/js/boostrap.js"></script>
<script type="text/javascript" src="/js/wpts_slider_multiple.js"></script>
src='/js/boostrap.js'
Assuming your root is http://localhost then the above link should always resolve to http://localhost/ProjectName/js/boostrap.js whether it's called from
http://localhost/ProjectName/index.php or http://localhost/ProjectName/subdir/index.php
Make sure the js files are present within your folder structures
Always try to give relative paths to your files so that they can be easily found.