i am currently having internal server error and i don't know why it occurs since i am a newbie in this field. Can anyone explain what is going on here and suggest me a possible way to fix my code ?.Oh, and off - topic a little, i don't know exactly what i have to do to be fluently in making a connection between nodejs server and ajax, can any one help me with that?. Please don't erase this. Thanks you a lot
Here is my nodejs server:
var express = require("express"),
bodyParser = require("body-parser"),
data = require("nedb");
var app = express(),
db = new data({filename:'infors'});
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
app.use(express.static("public"));
app.get("/",function(req,res){
res.sendfile("html.html");
});
app.post("/login",function(req,res){
var user = req.body.user,
pass = req.body.pass;
db.insert({user:user,pass:pass});
res.end("login sucessful");
});
app.listen(3000);
Here is my html file:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var user,pass;
$("#button").click(function (){
user = $("#text").val();
pass = $("#text2").val();
$.post("http://localhost:3000/login",{user:user,pass:pass},function(data){
if(data == "done"){
alert("login success");
}
});
});
});
</script>
<fieldset>
<input type="text" id="text"/>
<input type="text" id="text2"/>
<input type="button" id="button" value="press here"/>
</fieldset>
</body>
</html>
Related
I am building a webserver for school, but I'm running into a few problems. I am running it on an ubuntu virtual machine. However, when I try to retrieve the variables in my JS code it keeps saying 'document is not defined'. Do I need to run some sort of script in my html in order to make this work? Thanks in advance.
This is my JS and html code:
var http = require('http');
var fs = require('fs');
var varRAM = document.getElementByName("ram").value;
var varDisk = document.getElementByName("disk");
var varCpu = document.getElementByName("cpu");
http.createServer(function (req, res) {
fs.readFile('/home/danesh123/js/test.html', function(err, data) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(data);
res.end("");
console.log('server running at shitty port {}'.format(varRam))
});
}).listen(8080, '172.19.0.1');
<html>
<body>
<h1>HEAD</h1>
<form action="/hello.js">
<p>ram</p>
<input name="ram" type="text" >
<p>disk</p>
<input name="disk" type="text">
<p>cpu</p>
<input name="cpu" type="text" >
<br><br>
<input type="submit" value="submit">
</form>
</body>
</html>
These lines:
var varRAM = document.getElementByName("ram").value;
var varDisk = document.getElementByName("disk");
var varCpu = document.getElementByName("cpu");
are executing in the server as part of your node.js code, not the client. The client is where the document object will exist, not the server.
I want to request my MongoDB database using a query obtained from a <form> in HTML inside a post, it's a bit tricky...
Here is my HTML :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="interface.css" />
<meta charset="UTF-8" />
<title>Bienvenue sur MongoDB !</title>
</head>
<body>
<form method="post" action="/" id="formulaire">
<p>
<label for="rectangle">Nombre de rectangles maximum :</label>
<input type="range" min="0" max="10" id="rectangle" name="rectangle" />
<span id="texte1"></span>
</p>
<input type="submit" id="envoyer" value="Envoyer" />
</form>
</body>
</html>
Here is my Javascript :
var mongoose = require('mongoose');
var express = require('express');
var bodyParser = require('body-parser');
mongoose.connect('mongodb://localhost/image', function(err) {
if (err) {
throw err;
}
});
var app = express();
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json());
app.post('/', function (req, res) {
var query = Image.find(null);
query.lte('NbRectangles', req.body.rectangle)
query.exec(function (err, images) {
if (err) {
throw err;
}
for (var i = 0, l = images.length; i < l; i++)
console.log('Image : ' + images[i]);
});
});
app.listen(8080);
mongoose.connection.close();
This, displays nothing...
My MongoDB collection isn't empty I just removed some code, I did test and when I put the part inside the post, outside, It works but what I want is each time I click on the button It displays on the terminal the result of the request.
Thank you in advance...
It seems like when you receive a request your connection is closed. You should close your connection after executing your query. Also, you should check if your body is not empty and send the response after your request is processed: res.sendStatus(200).
I am using express.js and jQuery to create a basic upvote downvote program. Basically the voting buttons increment/decrement by one whenever pressed and the result of each button click is displayed below. Nothing happens when the buttons are clicked, not even a Cannot POST /. I am not sure what is causing the error. This is what my main.js file looks like:
$(document).ready(function(){
$("#up").click(function(){
var up = $.post("/upvote", {changeBy: 1}, function(dataBack){
$("#upvote").text(dataBack);
});
});
$("#down").click(function(){
var down = $.post("/downvote", {changeBy: 1},
function(dataBack){
$("#downvote").text(dataBack);
});
});
});
and then on the server side server.js, I have this:
var express = require("express");
var app = express();
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));
var inc = 0;
var dec = 0;
app.post("/upvote", function(req, res){
res.setHeader("Content-Type", "application/json");
inc += parseFloat(req.body.changeBy);
res.write(JSON.stringify(inc));
res.end();
});
app.post("/downvote", function(req, res){
res.setHeader("Content-Type", "application/json");
dec -= parseFloat(req.body.changeBy);
res.write(JSON.stringify(dec));
res.end();
});
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
})
A bit of HTML:
<div class="buttons">
<button id="down">Downvote</button>
<p id="downvote"></p>
<button id="up">Upvote</button>
<p id="upvote"></p>
</div>
I used your code to create a jsfiddle and it seems to be working fine with click events. Of course the ajax calls error out but the click event handler itself seems to be called Chrome at least.
<div class="buttons">
<button id="down">Downvote</button>
<p id="downvote"></p>
<button id="up">Upvote</button>
<p id="upvote"></p>
</div>
$(document).ready(function(){
$("#up").click(function(){
var up = $.post("/upvote", {changeBy: 1}, function(dataBack){
$("#upvote").text(dataBack);
});
});
$("#down").click(function(){
var down = $.post("/downvote", {changeBy: 1},
function(dataBack){
$("#downvote").text(dataBack);
});
});
});
https://jsfiddle.net/j14qkyae/
i gave this a try and it works. Is this really the whole html you use? Then this is the error. You need to in include jquery and your main.js into the html. I copied a query.min.js into the public directory of the server.
<html>
<head>
<title>Up Down Vote</title>
<script src="jquery.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div class="buttons">
<button id="down">Downvote</button>
<p id="downvote"></p>
<button id="up">Upvote</button>
<p id="upvote"></p>
</div>
</body>
</html>
i am trying to make an iteractive form using nodejs.
Here is my web page
<!DOCTYPE html>
<html>
<script>
$('#ping-button').click(function() {
$.ajax({
type: 'POST',
url: 'http://localhost:3000/process_test'
});
});
</script>
<body>
<form action="http://127.0.0.1:3000/process_get" method="GET">
First Name: <input type="text" name="first_name"> <br>
Last Name: <input type="text" name="last_name">
<input type="submit" value="Submit">
</form>
<br>
<form action="http://127.0.0.1:3000/process_post" method="POST">
Team: <input type="text" name="team"> <br>
Player: <input type="text" name="player">
<input type="submit" value="Submit">
<br><br>
<button id='ping-button'>Ping</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</form>
</body>
</html>
and here is my app.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
// Create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })
app.use(express.static('test'));
app.get('/index.html', function (req, res) {
res.sendFile( __dirname + "/" + "index.html" );
})
app.get('/process_get', function (req, res) {
// Prepare output in JSON format
response = {
first_name:req.query.first_name,
last_name:req.query.last_name
};
console.log(response);
res.end(JSON.stringify(response));
})
app.post('/process_test', urlencodedParser, function (req, res) {
console.log("Ping");
res.end(JSON.stringify("Ping"));
})
app.post('/process_post', urlencodedParser, function (req, res) {
// Prepare output in JSON format
response = {
team:req.body.team,
player:req.body.player
};
console.log(response);
res.end(JSON.stringify(response));
})
var server = app.listen(3000, function () {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
})
so i have two forms and a button. The first form is tied to the process_get method, the second form is tied to the process_post method and the button is tied to the process_test method.
both of the forms give expected results. When i click the button, it goes to the process_post method instead of the process_test
why does this happen?
The reason the Ping button submits the form to /process_post is because it is inside the form, and the click handler is not set due to errors.
If you open the console in your browser you will see Uncaught ReferenceError: $ is not defined. This is because you're using $ in your code, but you include jQuery much later in the page. This you can fix by loading jQuery prior to your script tag.
Once that is done you will notice that the button still does not work. This is because the script inside head is executed before the rest of the document is done, ie. the body contents is not there yet, and $('#ping_button') will find nothing. This you fix by wrapping you code inside $(document).ready(function() { // code here }); so it is executed once the whole page is loaded.
Still, clicking the button will send you to /process_post because the click event is not stopped in your click handler. Return false or use e.preventDefault() to disable the browser default action.
All this combined the head section (that was missing) will become
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#ping-button').click(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'http://localhost:3000/process_test'
});
return false;
});
});
</script>
</head>
<body>
<!-- Rest of your page -->
</body>
</html>
There are a couple of ways you could answer this. I'll gleefully accept a solution with node-upload-progress or an Express/formidable solution that allows for upload progress monitoring (I like both of those but Express's recent drop for formidable support is making my brain explode).
I'm attempting to create a page where files can be uploaded with progress monitoring, along with additional fields related to the file such as title, submitter name, file description etc.
The first partial solution I found was node-upload-progress. It worked great right away. Here's the example code pasted here for reference (I added an extra field I want to get the value for).
app.js
(function() {
var app = require('http');
var fs = require('fs');
var uploadProgress = require('node-upload-progress');
var uploadHandler = new uploadProgress.UploadHandler;
uploadHandler.configure(function() {
this.uploadDir = "" + __dirname + "/uploads";
this.onEnd = customOnEndHandler;
});
function customOnEndHandler(req, res){
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Yay! Upload finished.');
}
app.createServer(function(req, res) {
if (req.url.match(/\/upload\?X\-Progress\-ID=.+/)) {
console.log('upload started');
return uploadHandler.upload(req, res);
} else if (req.url.match(/\/progress\?X\-Progress\-ID=.+/)) {
return uploadHandler.progress(req, res);
} else {
return fs.readFile("" + __dirname + "/index.html", function(err, data) {
res.writeHead(200, {
'Content-Type': 'text/html'
});
res.write(data.toString());
return res.end();
});
}
}).listen(8080);
console.log('Server running at http://localhost:8080/');
}).call(this);
index.html:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Upload</title>
<meta name="author" content="Pablo Cantero <pablo#pablocantero.com>">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- Date: 2012-06-12 -->
<script>
$(function(){
var uploadIntervalID;
$('#form_upload').submit(function(){
// Preventing multiples clicks on upload
clearInterval(uploadIntervalID);
var xProgressID = guidGenerator();
$(this).attr('action', '/upload?X-Progress-ID=' + xProgressID);
uploadIntervalID = setInterval(function(){
$.get('/progress?X-Progress-ID=' + xProgressID, function(data){
if(data.status === 'done'){
clearInterval(uploadIntervalID);
}
updateUploadStatus(data);
}).error(function(){clearInterval(uploadIntervalID)});
}, 250);
return true;
});
function updateUploadStatus(data){
$('#upload_percent').text(data.percent);
$('#upload_status').text(data.status);
$('#upload_filename').text(data.fileName);
$('#upload_filepath').text(data.filePath);
}
// http://stackoverflow.com/a/105074/464685
function guidGenerator() {
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}
function S4() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
}
});
</script>
</head>
<body>
<h1>Super Upload</h1>
<form action="/upload?X-Progress-ID=1" enctype="multipart/form-data" method="post" id="form_upload" target="iframe_upload">
<p>
<label>File</label><br/>
<input type="file" name="upload" id="upload"><br>
<span id="upload_percent"></span><br/>
<span id="upload_status"></span><br/>
<span id="upload_filename"></span><br/>
<span id="upload_filepath"></span>
</p>
<p>
<div>File Title</div>
<input name="file-title" type="text" maxlength="120" value="test value" />
</p>
<p>
<input type="submit" value="Upload">
</p>
</form>
<iframe id="iframe_upload" name="iframe_upload"></iframe>
</body>
</html>
When researching further about form parsing, I starting finding that formidable was the thing to use, and it worked great with Express (which was great for delivering the front-end I wanted to create and offered simpler basic authentication to access this)... until Express dropped/is dropping built-in formidable support.
Any good ideas and/or examples on how to work through this? My gut says to stick with node-upload-progress and figure out how to parse additional form values from scratch, so that I can better understand and appreciate the conveniences modules such as Express and formidable offer.
Thanks for helping a node.js new person in advance. :D