hey im trying to upload an image/video via the link (https://i.picsum.photos/id/237/536/354.jpg) of the image to my mongodb,
i used to work with choose file option , but now i want to change the process to be made by image or video url,
i have tried to change the choose file to text input , but its not working , how can i solve this problem
didnt found any information about uploading by link only for choose file .
this is the route and the storage structure:
// Create storage engine
const storage = new GridFsStorage({
url: mongoURI,
file: (req, file) => {
return new Promise((resolve, reject) => {
crypto.randomBytes(16, (err, buf) => {
if (err) {
return reject(err);
}
const filename = buf.toString('hex') + path.extname(file.originalname);
const fileInfo = {
filename: filename,
bucketName: 'uploads'
};
resolve(fileInfo);
});
});
}
});
const upload = multer({ storage });
// #route POST /upload
// #desc Uploads file to DB
app.post('/upload', upload.single('file'), (req, res) => {
// res.json({ file: req.file });
res.redirect('/');
});
this is the view i made:
the choose file is commnted out
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
img {
width: 100%;
}
</style>
<title>Mongo File Uploads</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 m-auto">
<h1 class="text-center display-4 my-4">Mongo File Uploads</h1>
<form action="/upload" method="POST" enctype="multipart/form-data">
<div class="custom-file mb-3">
<input type="text" name="file" id="file" >
</div>
<input type="submit" value="Submit" class="btn btn-primary btn-block">
</form>
<hr>
<% if(files){ %>
<% files.forEach(function(file) { %>
<div class="card card-body mb-3">
<% if(file.isImage) { %>
<img src="image/<%= file.filename %>" alt="">
<% } else { %>
<%= file.filename %>
<% } %>
<form method="POST" action="/files/<%= file._id %>?_method=DELETE">
<button class="btn btn-danger btn-block mt-4">Delete</button>
</form>
</div>
<% }) %>
<% } else { %>
<p>No files to show</p>
<% } %>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
thanks advice to all the helpers !
Related
The following code allows you to submit forms and return a variation of the text from Flask using AJAX and JQuery:
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
#app.route('/')
def index():
return render_template('form.html')
#app.route('/process', methods=['POST'])
def process():
email = request.form['email']
name = request.form['name']
if name and email:
newName = name[::-1]
return jsonify({'name' : newName})
return jsonify({'error' : 'Missing data!'})
if __name__ == '__main__':
app.run(debug=True)
<!DOCTYPE html>
<html>
<head>
<title>AJAX Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='js/form.js') }}"></script>
</head>
<body>
<div class="container">
<br><br><br><br>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="emailInput">Email address</label>
<input type="email" class="form-control" id="emailInput" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="nameInput">Name</label>
<input type="text" class="form-control" id="nameInput" placeholder="First Name">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<br>
<div id="successAlert" class="alert alert-success" role="alert" style="display:none;"></div>
<div id="errorAlert" class="alert alert-danger" role="alert" style="display:none;"></div>
</div>
</body>
</html>
$(document).ready(function() {
$('form').on('submit', function(event) {
$.ajax({
data : {
name : $('#nameInput').val(),
email : $('#emailInput').val()
},
type : 'POST',
url : '/process'
})
.done(function(data) {
if (data.error) {
$('#errorAlert').text(data.error).show();
$('#successAlert').hide();
}
else {
$('#successAlert').text(data.name).show();
$('#errorAlert').hide();
}
});
event.preventDefault();
});
});
But when I slightly modify the code to do the same thing with a uploaded file's name it doesn't work. All I have done is changed the type of form so that it takes in files and then made it so that it reverses the filename rather than the inputted text from the previous version. Do you know what I am doing wrong here?
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
#app.route('/')
def index():
return render_template('form.html')
#app.route('/process', methods=['POST'])
def process():
filename = request.files['file'].filename
if filename:
newName = filename[::-1]
return jsonify({'name' : newName})
return jsonify({'error' : 'Missing data!'})
if __name__ == '__main__':
app.run(debug=True)
<!DOCTYPE html>
<html>
<head>
<title>AJAX Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='js/form.js') }}"></script>
</head>
<body>
<div class="container">
<br><br><br><br>
<form method="POST" action='/process' enctype="multipart/form-data">
<div>
<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file">
</div>
<div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
<br>
<div id="successAlert" class="alert alert-success" role="alert" style="display:none;"></div>
<div id="errorAlert" class="alert alert-danger" role="alert" style="display:none;"></div>
</div>
</body>
</html>
$(document).ready(function() {
$('form').on('submit', function(event) {
$.ajax({
data : {
file : $('#file')
},
type : 'POST',
url : '/process'
})
.done(function(data) {
if (data.error) {
$('#errorAlert').text(data.error).show();
$('#successAlert').hide();
}
else {
$('#successAlert').text(data.name).show();
$('#errorAlert').hide();
}
});
event.preventDefault();
});
});
If you use an object of the type FormData to serialize and transfer the data of the form it should work.
$(document).ready(function() {
$('form').submit(function(event) {
let formData = new FormData(event.target);
$.ajax({
data: formData,
type : 'POST',
url : '/process',
contentType: false,
processData: false
})
.done(function(data) {
if (data.error) {
$('#errorAlert').text(data.error).show();
$('#successAlert').hide();
} else {
$('#successAlert').text(data.name).show();
$('#errorAlert').hide();
}
});
event.preventDefault();
});
});
Here is my EJS file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sart Plug</title>
<script src="http://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="/css/usrDashboard.css">
<link rel="icon" href="/images/plugimg.png" type="image/x-icon" />
</head>
<body>
<div class="container">
<div class="header">
Select Device
<div class="header-right">
Log Out
</div>
</div>
<div class="jumbotron" id="jumbo">
<p><%=data.noResult%></p>
<div class="row">
<% for(var i=0; i < data.result.length; i++) { %>
<div class="col-25">
<a href="/plugDashboard">
<p><img class="img-fluid" src="/images/plugimg.png" alt="Plug Image"></p>
<p><h3><%= data.result[i].device_name %></h3></p>
<p><h6><%= data.result[i].device_address %></h6></p>
</a>
</div>
<% } %>
</div>
</div>
</div>
</body>
</html>
Html view here
My routes are in the below route:-
app.get('/usrDashboard', checkAuthenticted, (req, res) => {
let email = req.user.email;
con.query("SELECT device_name, device_address FROM pluglist WHERE email ='"+ email +"' " , (err, result, fields)=> {
if(err) throw err;
console.log(result);
if (result.length === 0) {
res.render('usrDashboard',{data:{email: email,
result:result,
noResult:'You have no saved device'}});
}
else {
res.render('usrDashboard',{data:{email: email,
result:result}});
}
});
})
app.get('/plugDashboard', checkAuthenticted, (req, res) => {
console.log(req);
res.render('plugDashboard');
})
SO here I want, whenever I click on any of the div I want to print the mac id in log from the respective div in plugDashboard section. So is there any way to do so? I searched for many solutions none of them were helpful for me.
You can add new GET express route, for example:
router.get('/get_mac_info/:mac_id', function(req, res, next) {
res.json({
mac_id: 'test_id'
});
});
and after that just add ajax call on click event:
$(function () {
$(document).on('click', '.col-25', function (e) {
$.get('/get_mac_info/' + mac_id, function(data){
$('.print_container').text(data)
})
e.preventDefault();
});
});
i want to send to input text (url of image) and then upload it to mongodb using multer ,
it possible to do it without downloading the image ?
im using multer and multer-gridfs-storage
i sucsuus only with choose input type of file , that i must to select from my pc , but i want to pass an image url and upload it to the mongodb using multer-gridfs-storage , that is possible ?
this is the request
const storage = new GridFsStorage({
url: mongoURI,
file: (req, file) => {
return new Promise((resolve, reject) => {
crypto.randomBytes(16, (err, buf) => {
if (err) {
return reject(err);
}
const filename = buf.toString('hex') + path.extname(file.originalname);
const fileInfo = {
filename: filename,
bucketName: 'uploads'
};
resolve(fileInfo);
});
});
}
});
const upload = multer({ storage });
// #route POST /upload
// #desc Uploads file to DB
app.post('/upload', upload.single('file'), (req, res) => {
// res.json({ file: req.file });
res.redirect('/');
});
this is the view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
img {
width: 100%;
}
</style>
<title>Mongo File Uploads</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 m-auto">
<h1 class="text-center display-4 my-4">Mongo File Uploads</h1>
<form action="/upload" method="POST" enctype="multipart/form-data">
<div class="custom-file mb-3">
<input type="text" name="file" id="file" >
</div>
<input type="submit" value="Submit" class="btn btn-primary btn-block">
</form>
<hr>
<% if(files){ %>
<% files.forEach(function(file) { %>
<div class="card card-body mb-3">
<% if(file.isImage) { %>
<img src="image/<%= file.filename %>" alt="">
<% } else { %>
<%= file.filename %>
<% } %>
<form method="POST" action="/files/<%= file._id %>?_method=DELETE">
<button class="btn btn-danger btn-block mt-4">Delete</button>
</form>
</div>
<% }) %>
<% } else { %>
<p>No files to show</p>
<% } %>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
I am using jquery-modal by kyle fox and am encountering this issue. When I open up the modal window, my partial view is loaded into the modal. However, I get this error in the console:
Dropzone.options.dropzone is not a function
If i change Dropzone.options.dropzone into $(#dropzone).dropzone, the code works. However, when I submit, it doesn't upload the files to the server but just redirects me to the home page.
I already loaded dropzone js and css in the header but I can't seem to get this to work.
#model AppOne.Data.ViewModels.AnnouncementAttachmentDetailsViewModel
<script>
Dropzone.options.dropzone({
url: "#Url.Action("Save", "AnnouncementAttachments", new { area = "Messages" })",
autoProcessQueue: false,
addRemoveLinks: true,
maxFiles: 1,
uploadMultiple: true,
parallelUploads: 100,
init: function () {
console.log("active");
var submitButton = document.querySelector("#submit");
var token = $('input[name="__RequestVerificationToken"]').val();
var wrapperThis = this;
submitButton.addEventListener("click", function (e) {
console.log("submitted");
wrapperThis.processQueue();
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
});
this.on('sendingmultiple', function (data, xhr, formData) {
formData.append("__RequestVerificationToken", token);
formData.append("#Html.IdFor(x=>x.AttachmentId)",$("##Html.IdFor(x => x.AttachmentId)").val())
});;
this.on('errormultiple', function (file, message) {
//toastr.error(message);
wrapperThis.disable();
});
this.on('successmultiple', function (file,message) {
$.each(message, function (key, value) {
//toastr.success(value);
});
$(".dz-remove").hide();
wrapperThis.disable();
});
}
});
</script>
<div class="row row-extend">
<div class="col-sm-12">
<h2>Upload</h2>
</div>
<div class="col-sm-12">
<hr />
</div>
</div>
#using (Html.BeginForm(null, null, FormMethod.Post, new { #action = "/", enctype = "multipart/form-data", id = "modal" }))
{
#Html.AntiForgeryToken()
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
#Html.HiddenFor(x => x.AttachmentId)
<div id="dropzone" name="Files" class="dropzone form-group"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div class="clearfix">
<div class="pull-right">
<button type="submit" id="submit" class="btn btn-primary">Upload</button>
#Html.ActionLink("Cancel", "Index", #ViewContext.RouteData.Values["controller"].ToString(), new { }, new { #class = "btn btn-outline-secondary" })
</div>
</div>
</div>
</div>
</div>
</div>
}
EDIT:
My layout.cshtml:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - AppOne</title>
<link rel="stylesheet" href="~/twitter-bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/theme/theme-extended.css" />
<link rel="stylesheet" href="~/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="~/jqueryui/jquery-ui.css" />
<link rel="stylesheet" href="~/toastr.js/toastr.css" />
<link rel="stylesheet" href="~/jquery-modal/jquery.modal.css" />
<link rel="stylesheet" href="~/select2/css/select2.min.css" />
<link rel="stylesheet" href="~/css/Modal.css" />
<link rel="stylesheet" href="~/css/Site.css" />
<link rel="stylesheet" href="~/datatables/css/jquery.dataTables.css" />
<link rel="stylesheet" href="~/datatables/css/select.dataTables.css" />
<link rel="stylesheet" href="~/datatables/css/fixedHeader.dataTables.css" />
<link rel="stylesheet" href="~/datatables/css/responsive.bootstrap.css" />
<link rel="stylesheet" href="~/css/DataTablesExtended.css" />
<link rel="stylesheet" href="~/bootstrap-datetimepicker/bootstrap-datetimepicker.css" />
<link rel="stylesheet" href="~/dropzone/dropzone.css" />
<script src="~/jquery/jquery.min.js"></script>
<script src="~/jquery-validate/jquery.validate.js"></script>
<script src="~/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script src="~/jqueryui/jquery-ui.js"></script>
<script src="~/twitter-bootstrap/js/bootstrap.js"></script>
<script src="~/moment.js/moment.min.js"></script>
<script src="~/select2/js/select2.min.js"></script>
<script src="~/toastr.js/toastr.min.js"></script>
<script src="~/jquery-modal/jquery.modal.min.js"></script>
<script src="~/datatables/js/jquery.dataTables.js"></script>
<script src="~/datatables/js/dataTables.select.js"></script>
<script src="~/datatables/js/dataTables.fixedHeader.js"></script>
<script src="~/datatables/js/dataTables.responsive.js"></script>
<script src="~/datatables/js/responsive.bootstrap.js"></script>
<script src="~/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="~/dropzone/dropzone.js"></script>
#RenderSection("scripts", false)
#RenderSection("styles", false)
</head>
However, when I submit, it doesn't upload the files to the server but just redirects me to the home page.
It seems that your Upload button is in the form , and the url of form conflicts with the url of Dropzone.js (the url has to be specified on elements other than form (or when the form doesn't have an action attribute).).Try to make the modification like the working example below :
Html.BeginForm , remove the action
#using (Html.BeginForm( FormMethod.Post, new { enctype = "multipart/form-data", id = "modal" }))
{
// the stuff you want
}
Dropzone.js , NOTE: If you have the option uploadMultiple set to true, then Dropzone will append [] to the paramName. After looking at the request from a html5 multiple file upload I noticed the request does not add the indexes to the filename (files[n]). Dropzone.js does this so there is a work around. If you add the paramName option to Dropzone JS config and have it call a method which returns files you will get the same behaviour as the html5 multiple file upload. You could also refer to this link for more details on Configuration options of Dropzone.js
#section Scripts
{
<script>
function myParamName() {
return "Files";
}
$("#dropzone").dropzone({
url: "#Url.Action("Save", "Home")",
autoProcessQueue: false,
paramName: myParamName,
addRemoveLinks: true,
maxFiles: 1,
uploadMultiple: true,
parallelUploads: 100,
init: function () {
console.log("active");
var submitButton = document.querySelector("#submit");
var token = $('input[name="__RequestVerificationToken"]').val();
var wrapperThis = this;
submitButton.addEventListener("click", function (e) {
console.log("submitted");
wrapperThis.processQueue();
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
});
this.on('sendingmultiple', function (data, xhr, formData) {
formData.append("__RequestVerificationToken", token);
formData.append("#Html.IdFor(x=>x.AttachmentId)",$("##Html.IdFor(x => x.AttachmentId)").val());
});;
}
});
</script>
}
Controller
public IActionResult Save(List<IFormFile> Files,int AttachmentId)
{
//....
}
I have a very basic nodejs app that is displaying a html pages. This pages has two buttons linked with js function in a separated file. One of the function use ajax, the other not. The one using ajax is not working (not found I guess).
The external js file was working perfectly well under apache. Is there something specific to do to be able to use ajax on client side with node.js?
Here the node.js part:
var express = require ('express');
var app = express ();
app.use(express.static(__dirname + '/images'));
app.use(express.static(__dirname + '/CSS'));
app.use(express.static(__dirname + '/font'));
app.use(express.static(__dirname ));
app.use(express.static(__dirname +'/ChemAlive_JS'));
app.get('/', function(req, res) {
res.setHeader('Content-Type', 'text/html');
res.sendFile('/home/laetitia/Project/ChemAlive_Interface_Node/test.html');
});
app.listen(8080);
The html part:
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="/Interface.css" type="text/css" rel="stylesheet" />
<link href="/ketcher.css" type="text/css" rel="stylesheet" />
<link href="/font-chemalive.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href=/ddsmoothmenu-v.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="/ui_bis.js"></script>
</head>
<body >
<div id="background">
<div id="LoginButton" class="deck login" >
<img class="LoginButtonUnpressed" alt="Login/Start" src="/ChemAlive_Start_Button.png">
<img class="LoginButtonPressed" alt="Login/Start" src="/ChemAlive_Start_Button_pressed.png">
<div class="popup" style="top: 0px; right: 80px;">
<p>Log-on or launch your calculations.</p>
</div>
</div>
<!-- Welcome Dialogue box -->
<div id="welcome_DB" class="dialogWindow fileDialog" >
<div class="h1">
<p>Welcome. Thank you for visiting our interface!</p>
</div>
<div class="iconDiv">
<img src="/Green_gears.png"/>
</div>
<div class="mainDiv">
<div class="desText">
<p>ChemAlive i</p>
</div>
</div>
<div class="navDiv">
<input type="submit" id="welcome_cancel" class="dialogButton" value="Cancel"/>
<label for="welcome_cancel" onclick="gototry();"><span class="label">Just Try It</span></label>
<input id="welcome_login" class="dialogButton" type="submit" value="Done"/>
<label for="welcome_login" style="right: 10px" onclick="gotologin();"><span class="label">Login</span></label>
<input id="welcome_register" class="dialogButton" type="submit" value="Done"/>
<label for="welcome_register" style="right: 20px" onclick="gotoregister();" ><span class="label">Registration</span></label>
</div>
</div>
<!-- Close welcome DB -->
</div>
</body>
</html>
And the external, client side, js:
$('LoginButton').observe('click', ui.onClick_login);
ui.onClick_login = function() {
window.alert("Hey There")
ui.showDialog('register_login');
}
function gototry() {
document.getElementById("welcome_DB").style.display = "none";
}
function gotologin() {
document.getElementById("welcome_DB").style.display = "none";
document.getElementById("login_v2").style.display = "inline-block";
}
function gotoregister() {
document.getElementById("welcome_DB").style.display = "none";
document.getElementById("register_DB").style.display = "inline-block";
}
Its $('LoginButton').observe('click', ui.onClick_login) call is not working.
Any ideas?
rename ui.onClick_login to a simple name like my_onclick_login
$('#LoginButton').observe('click', my_onclick_login);
my_onclick_login = function() {
window.alert("Hey There")
ui.showDialog('register_login');
}