I'm going through this CouchDB tutorial that references a few files - /_utils/script/jquery.js and /_utils/script/jquery.couch.js - that are supposed to be included.
<!DOCTYPE html>
<html>
<head><title>Tiny CouchApp</title></head>
<body>
<h1>Tiny CouchApp</h1>
<ul id="databases"></ul>
</body>
<script src="/_utils/script/jquery.js"></script>
<script src="/_utils/script/jquery.couch.js"></script>
<script>
$.couch.allDbs({
success : function(dbs) {
dbs.forEach(function(db) {
$("#databases").append('<li>'+db+'</li>');
});
}
});
</script>
</html>
When I run the Tiny CouchApp through Fauxton, I get 404 errors for those files. I'm wondering if they have moved since the tutorial was written (around 2012), but I haven't been able to find much more up-to-date documentation.
Please check out their official documentation for updated examples.
Fauxton is coded using React and does not ship with jQuery. (but you really shouldn't rely on your database to serve you some JS)
Related
Let me start by saying that I'm primarily a C# programmer who only extremely rarely ventures into JavaScript.
I can write myself some JS code as long as its mostly plain. I can handle jQuery and the odd self-sufficient 3rd-party library, but couldn't code myself out of a wet paper bag when React, Angular, Bootstrap and others enter the scene. I'm also not used to using npm or any other similar package manager.
It was never really my job nor interest, so I never went there. Whenever I code some JS, I reference the required JS files in my <script> tags and then use them as directly as possible.
I'm currently creating a very simple proof of concept web app which will have its client parts rebuilt by competent people sooner or later. But in the mean time I have to provide the bare-bones functionality that will serve as a rough guideline for the next team to take over, whenever that might be.
I've picked two libraries that each seem easy to use and get the job done, when used separately. But when I try to use them together on the same page, I run into a problem: they both use the same name for their main type, and I can't seem to disambiguate between them.
These are the libraries:
JSON Editor
JSON Schema Form Builder
They both declare a type named JSONEditor, which I can use as long as I don't reference both of the libraries at once.
So far I've tried to solve this by using modules and import-ing the type using different names, but it didn't work... I got a bunch of errors in the console about "import not found" and "e is not defined", which makes me think I'm tackling this wrong.
How would I solve this using plain JS if possible?
UPDATE: As suggested, I'm providing a minimal example that demonstrates my use:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Page</title>
<link href="/lib/jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="editor" style="width: 300px; height: 200px;"></div>
<div id="form"></div>
</div>
<!--library 1: https://github.com/josdejong/jsoneditor -->
<script src="/lib/jsoneditor/jsoneditor.min.js"></script>
<!--library 2: https://github.com/jdorn/json-editor -->
<script src="/lib/jsonform/jsonform.min.js"></script>
<script>
// Library 1: The JSON code editor.
var editor = new JSONEditor(document.getElementById("editor"), { mode: "code" });
// Library 2: The form builder.
var form = new JSONEditor(document.getElementById("form"), {
ajax: true,
schema: {
$ref: "/api/describe/service/test"
}
});
</script>
</body>
</html>
If I comment out the use of one library (whichever), the other works as expected and the content is displayed at the respective target <div>. But if I try both at once, as shown above, nothing is displayed, and the following error is output to console:
Uncaught TypeError: t is undefined
This happens at the var editor = new JSONEditor line, which makes me think that the type from the second library overwrites the first and causes the problem.
This is understandable to me and isn't the issue per-se. The issue is that I don't know how to import the two JSONEditor types so that they can be referenced separately.
The maintainer of the code editor (JSON Editor, not JSON Schema Form Builder) has addressed and closed an issue about exactly this in the past: https://github.com/josdejong/jsoneditor/issues/270
His recommended solution is something like the following:
<script src="assets/jsoneditor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorA = JSONEditor;
</script>
<script src="assets/json-editor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorB = JSONEditor;
</script>
If you must use script tags this is probably the way to go.
I am trying to call the Math.matrix() function, and I am quite certain I am not importing the file correctly into my javascript code. I have read through the StackOverflow question "how to include and use math.js": and given that advice, I have the following :
<HTML >
<!DOCTYPE html>
<head>
<script src=https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.1.1/math.js>
</script>
<script type="text/javascript" >
function rotate_clockwise(){
/* code skipped */
matrix = Math.matrix(matrix, rotationmatrix);
}
</script>
</head>
<body>
</body>
</HTML>
where the cdns reference I have taken from this link
But on run when rotate_clockwise is called via slider the chrome 68 debugger states Uncaught type error : Math.matrix is not a function, so I do believe I am not including this file correctly.
My base assumption is that including a file once, in one set of script tags, is enough for any javascript function to use this library, which resides within a different set of script tags.
Thanks so much for any assistance you can provide.
I think you need math.matrix(...)--lower case math since Math is a standard JS library.
I have a js code that uses jQuery.MD5 library. It works perfectly on my server:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://example.com/static/js/jquery.md5.js"></script>
</head>
<body>
<script>
// my code goes here (declaring variables and functions)
var code = $.md5('mystring');
// and a little more code
</script>
</body>
But then I upload it to a web application (which I cannot control), that makes it look like this and puts it into an iframe:
<head>
<script>
// some extra variables are declared here
// double-checked that nothing here can break my code
</script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://example.com/static/js/jquery.md5.js"></script>
<script>
// some code
var code = $.md5('mystring');
// some code
</script>
</body>
And this code starts giving me the $.md5 is not a function error. Strange thing. Tried clearing the cache, putting jquery.md5.js code directly into mine, nothing works.
Note that all the code works on my machine, so there must be no problem with my JS.
Update: the problematic code behavior seems to be unpredictable, meaning that sometimes it works fine with no changes.
What can be wrong?
Hm... That's a little embarrassing, but the problem was in jQuery. The one I included in my iframe conflicted with the one included in the page. Somehow this lead to "hiding" my $.md5 function after its code's end.
And yeah, I know, it was quite obvious that jQuery could cause problems.
If you want to use jQuery md5 function you should have import jquery.md5.js file in your project.
Steps-
Download jquery.md5.js file from https://github.com/placemarker/jQuery-MD5
Copy this file into your source folder. (ex: assert/theme/js)
Import that js file to your project.
(ex: <script src="<?= base_url(); ?>/public/assert/theme/js/jquery.md5.js"></script>
)
That's it! You are done!
I'm using PhantomJS to setup CI for jasmine tests. I'm facing the problem with including SystemJS in my html page. I removed everything from it, just left javascript and still facing the same error:
ReferenceError: Can't find variable: System
Here is the example of html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="lib/systemjs/dist/system.src.js"> </script>
<script>
System.config({
baseURL: './lib'
});
</script>
</body>
</html>
I ran it in console like that: phantomjs test.js http://localhost:8080.
test.js contains following code:
var page = require('webpage').create();
page.open(system.args[1], function(status)
{
phantom.exit(0);
});
It looks like it doesn't see system.src.js. I tried to put there absolute path - but still the same error. Also tried with page.injectJs - no good either.
After some time I found an answer and I want to share it, maybe someone will find it useful. I logged page.outerHTML and saw that instead of script with system.src.js I've got additional script with system-polyfills.js. It looked like that:
<script src="lib/systemjs/dist/system.src.js"></script>
<script type="text/javascript" src="http://127.0.0.1:8080/lib/systemjs/dist/system-polyfills.js">
So I've just added missing system-polyfills.js to the following folder and it fixed the error. Although I still have no idea where it came from.
I was wondering how to make the Jquery library work. I have of course research on this before asking this question, and I have a book that suggest doing the following:
<script src="scripts/jquery-1.6.2.min.js"><script>
however, for some reason, the stuff on my page does not respond to my code even with this. So I was very confused. What I tried was, moving the files I was working on to the same directory as the jquery-1.6.2.min.js, since jquery is a js library, but didnt work. I was wondering what could it be? I have search for syntax errors like mad, so I reallllllyyyy doubt thats the problem. I was wondering what I did wrong? The only other option I can think of is using the website tag (which I havnt tried yet):
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
or
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery- 1.6.2.min.js"></script>
</head>
Which I wanted to avoid because I didnt want to rely of being on the web when I do my work, we never know... Thanks!
This is the full code by the way:
<!DOCTYPE html>
<html>
<head>
<title>jQuery goes to DOM-ville</title>
<style>
#change_me {
position: absolute;
top: 100px;
left: 400px;
font: 24px arial;
}
#move_up #move_down #color #disappear { padding: 5px; }
</style>
<script src="scripts/jquery-1.6.2.min.js"></script>
</head>
<body>
<button id="move_up">Move Up</button>
<button id="move_down">Move Down</button>
<button id="color">Change Color</button>
<button id="disappear">Disappear/Re-appear</button>
<div id="change_me">Make Me Do Stuff!</div>
<script>
$(document).ready(function() {
$("#move_up").click( function() {
$("#change_me").animate({top:30},200);
});//end move_up
$("#move_down").click( function() {
$("#chage_me").animate({top:500},2000);
});//end move_down
$("#color").click( function() {
$("#change_me").css("color", "purple");
});//end color
$("disappear").click( function(){
$("#change_me").toggle("slow");
});//end disappear
});//end doc ready
</script>
</body>
</html>
The problem is most likely the path... Are you just using HTML pages? If so, there are a couple of things to note:
1.) When a path begins with a / it means it starts at the root folder.
2.) When a path does not start with a / it means its going to start relative to the current folder it is in.
To fix:
Inside the folder with your html, make a javascripts folder (you could call it anything, "js" for example), and place your jquery javascript files within it.
Then use this for the path to jquery:
<script type="text/javascript" src="/javascripts/jquery.min.js"
This will reference the absolute path, so if later on, you have html files in nested folders, it won't look to the relative path but the absolute one.
As well if you want to use the google version when you have internet, and a local version when you don't you can use this snippet:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script type="text/javascript">
window.jQuery || document.write("<script src='/PATH/TO/jquery.js'><\/script>")
</script>
Addendum:
Fixed the post to reflect FabrÃcio Matté correction.
The absolute path can get a bit funky if you're not running behind a webserver (apache for example). This is why it would work on a server, and not on your computer.
If you're running it locally, without a webserver (don't do this, install MAMP or XAMP, Apache, nginx, IIS, anything...), you'll need to specify the full path:
Mac:
/Users/yourusername/Sites/website/index.html
PC:
C:/somethign/something/else/index.html
Do you have your page (the one you copied all code for and showed us) in the same directory as a directory called "scripts"? In that "scripts" directory, do you have a file called "jquery-1.6.2.min.js"?
My guess is one of three things is happening:
You're jquery file is in a different directory
You never included the jquery file
the jquery file name is not exactly the same
If you check in FireBug, I'll bet that this file is missing