Is there any reason as to why I cannot get the Upload button to display the name of the file(s) uploaded despite copying exactly the tutorial on YouTube - see link below?
In the tutorial e is used for the eventListener function in JS, but Adobe Dreamweaver is having none of it, so I used addEventListener
Thanks in advance for any insight. :)
https://www.youtube.com/watch?v=JML3BZo_ToA&list=PLQ0Y5YcHFmjVCFO7t1_72VU2FiXo5XaEI&index=1
$(document).ready(function(){
"use strict";
$("#uploadBtn").on("change", function(){
var files = $(this)[0].files;
if(files.length >= 2){
$("#label_span").text(files.length + " files ready to upload");
} else {
var filename = addEventListener.target.value.split('\\').pop();
$("#label_span").text(filename);
}
});
});
.uploadFile{
height: auto;
padding: 30px;
background-color: #E0DDDD;
color: #797979;
}
#uploadBtn{
display: none;
width: auto;
}
.uploadButtonLabel{
font-size:18px;
padding: 10px 40px;
border-style: none;
margin-top: 10px;
text-align: center;
}
.uploadButtonLabel:before{
font-family: fontAwesome;
content: "\f093";
margin-right: 10px;
}
.uploadButtonLabel:hover{
cursor: pointer;
}
<head>
<script type="text/javascript" src="../JS Documents/bookCastingJS.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<div class="uploadFile">
<h2>Upload your documents...</h2>
<p>Please ensure that you upload your require documents. Failure to do will may delay your applications.</p>
<label for="uploadBtn" class="uploadButtonLabel calltoActionButton" id="label_span">Select file(s) to upload</label>
<input style="width: 25%;" type="file" id="uploadBtn" name="upload" multiple = "true" />
</div>
<script src="bookCastingJS.js"></script>
You can just use your files variable instead.
$(document).ready(function() {
"use strict";
$("#uploadBtn").on("change", function() {
var files = $(this)[0].files;
if (!files) return;
if (files.length > 1) {
$("#label_span").text(files.length + " files ready to upload");
} else {
var filename = files[0].name;
$("#label_span").text(filename);
}
});
});
.uploadFile {
height: auto;
padding: 30px;
background-color: #E0DDDD;
color: #797979;
}
#uploadBtn {
display: none;
width: auto;
}
.uploadButtonLabel {
font-size: 18px;
padding: 10px 40px;
border-style: none;
margin-top: 10px;
text-align: center;
}
.uploadButtonLabel:before {
font-family: fontAwesome;
content: "\f093";
margin-right: 10px;
}
.uploadButtonLabel:hover {
cursor: pointer;
}
<head>
<script type="text/javascript" src="../JS Documents/bookCastingJS.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<div class="uploadFile">
<h2>Upload your documents...</h2>
<p>Please ensure that you upload your require documents. Failure to do will may delay your applications.</p>
<label for="uploadBtn" class="uploadButtonLabel calltoActionButton" id="label_span">Select file(s) to upload</label>
<input style="width: 25%;" type="file" id="uploadBtn" name="upload" multiple="true" />
</div>
<script src="bookCastingJS.js"></script>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I want to make a script, to automate my game.
First look my snippet demo to finding out how my games works.
I know this request is a bit confusing but please help
var randomNumber = randomNumberFromRange();
function randomNumberFromRange(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$(".btn").click(function() {
var inp1 = $("#inp1");
var Gem = $("#Gem");
var $getRnd = $("#getRand");
if (Number(inp1.val()) > Number(Gem.val())) {
alert(" you don't have enough Gem");
e.preventDefault()
}
$getRnd.val(randomNumberFromRange(0, 1000));
if (Number($getRnd.val()) >= "500") {
$("#win").css("display", "block");
var sum = Number(inp1.val()) + Number(Gem.val());
Gem.val(Number(sum));
$("#lose").css("display", "none");
} else if (Number($getRnd.val()) <= "499") {
$("#lose").css("display", "block");
var sub = Number(Gem.val()) - Number(inp1.val());
Gem.val(Number(sub));
$("#win").css("display", "none");
}
});
#nav {
background-color: #1b354b;
border: 2pt solid gold;
text-align: center;
padding: 5px;
width: 800px;
height: auto;
margin: 0 auto;
}
#Left_button,
#Right_button {
background-color: gold;
text-align: center;
cursor: pointer;
border-radius: 5pt;
border: none;
width: 100px;
height: 30px;
margin: 5px;
font-size: larger;
}
#left_Box {
width: 300px;
height: 170px;
background-image: linear-gradient(#fff942, yellow);
;
text-align: center;
float: left;
margin-top: 5px;
}
#right_Box {
width: 500px;
height: 170px;
background-image: linear-gradient(#FFB75E, yellow);
text-align: center;
float: right;
margin-top: 5px;
}
#inp1,
#Gem,
#getRand {
text-align: center;
width: 50px;
color: #ff0d2f;
cursor: pointer;
font-size: large;
margin-top: 10px;
}
#lose {
display: none;
background-color: red;
padding: 10px;
margin-top: 15px;
}
#win {
display: none;
background-color: #64f26f;
padding: 10px;
margin-top: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Model</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="nav">
<input id="Left_button" class="btn" type="button" value="Left">
<input id="Right_button" class="btn" type="button" value="Right">
<div id="Body">
<div id="left_Box">
<label><span style="font-size: large">Gem Chance : </span><input id="inp1" type="text" value="1"></label>
</div>
<div id="right_Box">
<label><span style="font-size: large">Gems : </span><input id="Gem" type="text" value="1000"
disabled></label><br>
<label><span style="font-size: large">Number : </span><input id="getRand" type="text" value=""></label>
<br>
<i style="color: #1b354b"> win : higher than 499</i>
<br>
<i style="color: #1b354b"> lose : lower than 500</i>
<div id="Place">
<div id="lose">lose</div>
<div id="win">win</div>
</div>
</div>
</div>
</div>
</body>
</html>
we have important parameters here.
Gem Chance :
Gems :
I want to create a script to do
1 - click buttons by random(left & right) every 2 sec . (click)
2 - after losing 3 times (continuous) , change the Gem chance to X (X=2)
3 - click
4 - if win => reset => change Gem chance to 1
and start from part 1;
5 - if lose => change Gem chance to 1
and click ;
if lose = > change Gem chance to 2X
click ;
if win :
reset => change Gem chance to 1
and start from part 1
if lose :
change Gem chance to 1
click ;
if win : reset
but ( after 3 losing changes the Gem chance to last lose value )
last example:
After we reached 3 consecutive losses
After each loss
The chance of a gem becomes 1. And click.
And again the chance of gem
It doubles and clicks.
This will happen until we win.
But if between losses
When the gem chance.
He gave us the victory over the number 1
All steps are performed from the beginning with the difference that
Since the chance of gem. It's doubling its last loss.
I give you the code to begin to build what you want, its the routine which launch every 2 sec the function automate and click randomly on left or right button.
var randomNumber = randomNumberFromRange();
//begin to automate
var timer = setInterval(automate, 2000);
var buts=[$("#Left_button"), $("#Right_button")];
var win = 0;
var loose = 0;
var loop = 0;
function automate(){
var idx=randomNumberFromRange(0, 1);
buts[idx].trigger("click");
console.log("i click on " + buts[idx].attr("id"));
console.log("i " + $("#Place div[style='display: block;']").attr('id'));
$("#inp1").val("111");//sample to modify the value of Gem chance
if(loop++ == 4) clearInterval(timer);//stop call the function after some loop
}
function randomNumberFromRange(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$(".btn").click(function () {
var inp1 = $("#inp1");
var Gem = $("#Gem");
var $getRnd = $("#getRand");
if (Number(inp1.val()) > Number(Gem.val())) {
alert(" you don't have enough Gem");
e.preventDefault()
}
$getRnd.val(randomNumberFromRange(0, 1000));
if (Number($getRnd.val()) >= "500") {
$("#win").css("display", "block");
var sum = Number(inp1.val()) + Number(Gem.val());
Gem.val(Number(sum));
$("#lose").css("display", "none");
} else if (Number($getRnd.val()) <= "499") {
$("#lose").css("display", "block");
var sub = Number(Gem.val()) - Number(inp1.val());
Gem.val(Number(sub));
$("#win").css("display", "none");
}
});
#nav {
background-color: #1b354b;
border: 2pt solid gold;
text-align: center;
padding: 5px;
width: 800px;
height: auto;
margin: 0 auto;
}
#Left_button, #Right_button {
background-color: gold;
text-align: center;
cursor: pointer;
border-radius: 5pt;
border: none;
width: 100px;
height: 30px;
margin: 5px;
font-size: larger;
}
#left_Box {
width: 300px;
height: 170px;
background-image: linear-gradient(#fff942, yellow);;
text-align: center;
float: left;
margin-top: 5px;
}
#right_Box {
width: 500px;
height: 170px;
background-image: linear-gradient(#FFB75E, yellow);
text-align: center;
float: right;
margin-top: 5px;
}
#inp1, #Gem, #getRand {
text-align: center;
width: 50px;
color: #ff0d2f;
cursor: pointer;
font-size: large;
margin-top: 10px;
}
#lose {
display: none;
background-color: red;
padding: 10px;
margin-top: 15px;
}
#win {
display: none;
background-color: #64f26f;
padding: 10px;
margin-top: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Model</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="nav">
<input id="Left_button" class="btn" type="button" value="Left">
<input id="Right_button" class="btn" type="button" value="Right">
<div id="Body">
<div id="left_Box">
<label><span style="font-size: large">Gem Chance : </span><input id="inp1" type="text" value="1"></label>
</div>
<div id="right_Box">
<label><span style="font-size: large">Gems : </span><input id="Gem" type="text" value="1000"
disabled></label><br>
<label><span style="font-size: large">Number : </span><input id="getRand" type="text" value=""></label>
<br>
<i style="color: #1b354b"> win : higher than 499</i>
<br>
<i style="color: #1b354b"> lose : lower than 500</i>
<div id="Place">
<div id="lose">lose</div>
<div id="win">win</div>
</div>
</div>
</div>
</div>
</body>
</html>
I want to Generate and Download Screenshot of webpage without lossing the styles. I have a web page .In that web page i have a download button . When user click on download button then the screen shot of entire Page need to download as image in user computer . How can i do this ?
Please check my code
Index.html
<html>
<body>
<link href="style.css" rel="stylesheet">
<h1>Scrrenshot</h1>
<form class="cf">
<div class="half left cf">
<input type="text" id="input-name" placeholder="Name">
<input type="email" id="input-email" placeholder="Email address">
<input type="text" id="input-subject" placeholder="Subject">
</div>
<div class="half right cf">
<textarea name="message" type="text" id="input-message" placeholder="Message"></textarea>
</div>
<input type="submit" value="Submit" id="input-submit">
</form>
<a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate Screenshot »</a>
</body>
<script>
(function (exports) {
function urlsToAbsolute(nodeList) {
if (!nodeList.length) {
return [];
}
var attrName = 'href';
if (nodeList[0].__proto__ === HTMLImageElement.prototype
|| nodeList[0].__proto__ === HTMLScriptElement.prototype) {
attrName = 'src';
}
nodeList = [].map.call(nodeList, function (el, i) {
var attr = el.getAttribute(attrName);
if (!attr) {
return;
}
var absURL = /^(https?|data):/i.test(attr);
if (absURL) {
return el;
} else {
return el;
}
});
return nodeList;
}
function screenshotPage() {
urlsToAbsolute(document.images);
urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']"));
var screenshot = document.documentElement.cloneNode(true);
var b = document.createElement('base');
b.href = document.location.protocol + '//' + location.host;
var head = screenshot.querySelector('head');
head.insertBefore(b, head.firstChild);
screenshot.style.pointerEvents = 'none';
screenshot.style.overflow = 'hidden';
screenshot.style.webkitUserSelect = 'none';
screenshot.style.mozUserSelect = 'none';
screenshot.style.msUserSelect = 'none';
screenshot.style.oUserSelect = 'none';
screenshot.style.userSelect = 'none';
screenshot.dataset.scrollX = window.scrollX;
screenshot.dataset.scrollY = window.scrollY;
var script = document.createElement('script');
script.textContent = '(' + addOnPageLoad_.toString() + ')();';
screenshot.querySelector('body').appendChild(script);
var blob = new Blob([screenshot.outerHTML], {
type: 'text/html'
});
return blob;
}
function addOnPageLoad_() {
window.addEventListener('DOMContentLoaded', function (e) {
var scrollX = document.documentElement.dataset.scrollX || 0;
var scrollY = document.documentElement.dataset.scrollY || 0;
window.scrollTo(scrollX, scrollY);
});
}
function generate() {
window.URL = window.URL || window.webkitURL;
window.open(window.URL.createObjectURL(screenshotPage()));
}
exports.screenshotPage = screenshotPage;
exports.generate = generate;
})(window);
</script>
</html>
style.css
#import "compass/css3";
#import url(https://fonts.googleapis.com/css?family=Merriweather);
$red: #e74c3c;
*,
*:before,
*:after {
#include box-sizing(border-box);
}
html, body {
background: #f1f1f1;
font-family: 'Merriweather', sans-serif;
padding: 1em;
}
h1 {
text-align: center;
color: #a8a8a8;
#include text-shadow(1px 1px 0 rgba(white, 1));
}
form {
border: 2px solid blue;
margin: 20px auto;
max-width: 600px;
padding: 5px;
text-align: center;
}
input, textarea {
border:0; outline:0;
padding: 1em;
#include border-radius(8px);
display: block;
width: 100%;
margin-top: 1em;
font-family: 'Merriweather', sans-serif;
#include box-shadow(0 1px 1px rgba(black, 0.1));
resize: none;
&:focus {
#include box-shadow(0 0px 2px rgba($red, 1)!important);
}
}
#input-submit {
color: white;
background: $red;
cursor: pointer;
&:hover {
#include box-shadow(0 1px 1px 1px rgba(#aaa, 0.6));
}
}
textarea {
height: 126px;
}
}
.half {
float: left;
width: 48%;
margin-bottom: 1em;
}
.right { width: 50%; }
.left {
margin-right: 2%;
}
#media (max-width: 480px) {
.half {
width: 100%;
float: none;
margin-bottom: 0;
}
}
/* Clearfix */
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.half.left.cf > input {
margin: 5px;
}
For this i used the method [http://www.xpertdeveloper.com/2012/10/webpage-screenshot-with-html5-js/] , here screenshot is generated but without style also it is not downloading . Please help , is there any jQuery library available for this?
You can achieve this using the following JavaScript libraries ...
html2canvas ( for taking screenshot of webpage )
FileSave.js ( for downloading the screenshot as an image )
ᴅᴇᴍᴏ
(function(exports) {
function urlsToAbsolute(nodeList) {
if (!nodeList.length) {
return [];
}
var attrName = 'href';
if (nodeList[0].__proto__ === HTMLImageElement.prototype || nodeList[0].__proto__ === HTMLScriptElement.prototype) {
attrName = 'src';
}
nodeList = [].map.call(nodeList, function(el, i) {
var attr = el.getAttribute(attrName);
if (!attr) {
return;
}
var absURL = /^(https?|data):/i.test(attr);
if (absURL) {
return el;
} else {
return el;
}
});
return nodeList;
}
function screenshotPage() {
var wrapper = document.getElementById('wrapper');
html2canvas(wrapper, {
onrendered: function(canvas) {
canvas.toBlob(function(blob) {
saveAs(blob, 'myScreenshot.png');
});
}
});
}
function addOnPageLoad_() {
window.addEventListener('DOMContentLoaded', function(e) {
var scrollX = document.documentElement.dataset.scrollX || 0;
var scrollY = document.documentElement.dataset.scrollY || 0;
window.scrollTo(scrollX, scrollY);
});
}
function generate() {
screenshotPage();
}
exports.screenshotPage = screenshotPage;
exports.generate = generate;
})(window);
#import url(https://fonts.googleapis.com/css?family=Merriweather);
$red: #e74c3c;
*,
*:before,
*:after {
#include box-sizing(border-box);
}
html,
body {
background: #f1f1f1;
font-family: 'Merriweather', sans-serif;
padding: 1em;
}
h1 {
text-align: center;
color: #a8a8a8;
#include text-shadow(1px 1px 0 rgba(white, 1));
}
form {
border: 2px solid blue;
margin: 20px auto;
max-width: 600px;
padding: 5px;
text-align: center;
}
input,
textarea {
border: 0;
outline: 0;
padding: 1em;
#include border-radius(8px);
display: block;
width: 100%;
margin-top: 1em;
font-family: 'Merriweather', sans-serif;
#include box-shadow(0 1px 1px rgba(black, 0.1));
resize: none;
&:focus {
#include box-shadow(0 0px 2px rgba($red, 1)!important);
}
}
#input-submit {
color: white;
background: $red;
cursor: pointer;
&:hover {
#include box-shadow(0 1px 1px 1px rgba(#aaa, 0.6));
}
}
textarea {
height: 126px;
}
}
.half {
float: left;
width: 48%;
margin-bottom: 1em;
}
.right {
width: 50%;
}
.left {
margin-right: 2%;
}
#media (max-width: 480px) {
.half {
width: 100%;
float: none;
margin-bottom: 0;
}
}
/* Clearfix */
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.half.left.cf > input {
margin: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id="wrapper">
<h1>Scrrenshot</h1>
<form class="cf">
<div class="half left cf">
<input type="text" id="input-name" placeholder="Name">
<input type="email" id="input-email" placeholder="Email address">
<input type="text" id="input-subject" placeholder="Subject">
</div>
<div class="half right cf">
<textarea name="message" type="text" id="input-message" placeholder="Message"></textarea>
</div>
<input type="submit" value="Submit" id="input-submit">
</form>
</div>
<a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate Screenshot »</a>
I found that dom-to-image did a much better job than html2canvas. See the following question & answer: https://stackoverflow.com/a/32776834/207981
If you're looking to download the image(s) you'll want to combine it with FileSaver.js (already mentioned here), and if you want to download a zip with multiple image files all generated client-side take a look at jszip.
Few options for this
either use this
<html>
<head>
<title> Download-Button </title>
</head>
<body>
<p> Click the image ! You can download! </p>
<a download="logo.png" href="http://localhost/folder/img/logo.png" title="Logo title">
<img alt="logo" src="http://localhost/folder/img/logo.png">
</a>
</body>
</html>
or You can use Mordernizr
or maybe this works
<a href="/path/to/image" download>
<img src="/path/to/image" />
</a>
refer to this link aswell
[1] http://www.w3schools.com/tags/att_a_download.asp
I have a button,here on click of the button I want to upload the video file and render one after other on multiple click.Its working fine but I am not able to add controls here,I need to add controls also dynamically.
Here is the plunker https://plnkr.co/edit/umHmYGJvT1a8WnVFxXAH?p=preview in which you can upload a video file and render it.but in that html5 video there is no controls.Here is code below.
html
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
<input type="file" id="file1" name="image" accept="video/*" capture style="display:none" />
<span id="upfile1" style="cursor:pointer">upload button1</span>
</p>
<div id="demo1">
<script src="js/index.js"></script>
style.css
/* Styles go here */
input {
font-size: 20px;
height: 50px;
}
.imagediv {
float: left;
margin-top: 50px;
}
.imagediv .showonhover {
background: red;
padding: 20px;
opacity: 0.9;
color: white;
width: 100%;
display: block;
text-align: center;
cursor: pointer;
}
#upfile1 {
background: red;
padding: 20px;
opacity: 0.9;
color: white;
width: 10%;
display: block;
text-align: center;
cursor: pointer;
}
#demo img,
#demo1 img {
width: 200px;
height: auto;
display: block;
margin-bottom: 10px;
}
#demo1 video{
width:300px;
}
index.js
// Code goes here
$(document).ready(function(e) {
//$('video').on('click',function(){
$("#demo1").delegate("video", "click", function(){
this.paused?this.play():this.pause();
});
$("#upfile1").click(function() {
$("#file1").trigger('click');
});
$('input:file').change(
function(){
if ($(this).val()) {
$("#demo1").show();
}
}
);
var inputs = document.querySelectorAll('input[type=file]');
inputs.forEach(function(input) {
input.onchange = function() {
var file = this.files[0];
displayAsImage(file);
};
});
function displayAsImage(file) {
var imgURL = URL.createObjectURL(file),
img = document.createElement('video');
img.onload = function() {
URL.revokeObjectURL(imgURL);
};
img.src = imgURL;
document.getElementById("demo1").appendChild(img);
$("video").prop("controls",true);
}
$("video").prop("controls",true);
});
Use the controls attribute in video tags.
Example:
<video src="" controls></video>
This is my first time to ask a question here. I'm working on migration a dojo project from version 1.6.2 to version 1.13. The application is implement on PHP
with Dojo. I have a problem of using the current application profile. There is a
login page which is using a few of dijit widgets as TextBox, ComboBox, etc.
The profile has the layer for login which is generate an optimization javascript as "login.js". When the browser renders the PHP login page it has the following error message as below. it seems it failed to load all dependencies in the right
order if I'm thinking right. Could you please help me to point out what is the
issue? I think my profile is not up to date. I have tried to set different
options in the profile but it didn't work out.
I have posted my application profile and my PHP login page and the error message from the browser below
Thanks,
Loc
dojo/parser::parse() error Error: Unable to resolve constructor for: 'dijit.form.TextBox'
at Object.<anonymous> (login.js:formatted:87)
at Object.map (dojo.js:51)
at Object._instantiate (login.js:formatted:84)
at login.js:formatted:375
at f (dojo.js:116)
at a.extend.then.then.a.then (dojo.js:118)
at Object.parse (login.js:formatted:374)
at dojo.js:47
at l (dojo.js:52)
at n (dojo.js:52)
(anonymous) # login.js:formatted:379
11:39:39.343 dojo.js:28 TypeError: dijit.byId is not a function
at showDialog ((index):38)
at d (dojo.js:53)
at l (dojo.js:52)
at n (dojo.js:52)
at p (dojo.js:54)
at HTMLDocument.k (dojo.js:54)
The following is my application profile.
dependencies = {
optimize:"closure",
layerOptimize: 'closure',
layers: [
{
name: "login.js",
dependencies: [
"dojo/parser",
"dojo/query",
"dojo/_base.declare",
"dojo/_base.fx",
"dojo._base.lang",
"dijit/form.Button",
"dijit/form.TextBox",
"dijit/form._TextBoxMixin",
"dijit/form._FormValueWidget",
"dijit/form.ValidationTextBox",
"dijit/form.ComboBox"
]
},
prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ],
[ "dojo", "../../dojo"]
]
}
The following is my login PHP page
<!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>
<title> Application Console</title>
<link rel="stylesheet" type="text/css" href="../../Dojo/dijit/themes/claro/claro.css"/>
<script type="text/javascript">
var dojoConfig = {
has: {
"dojo-firebug": true
},
parseOnLoad: true,
isDebug: true,
locale: 'en-us'
};
</script>
<script type="text/javascript" src="../../Dojo/dojo/dojo.js"> </script>
<?php
$login_file='/var/www/xms/Dojo/dojo/login.js';
/* Customized dojo JaveScript for UI optimization */
if (file_exists($login_file)) {
echo '<script type="text/javascript" src="../../Dojo/dojo/login.js"> </script>';
} else {
/* For backward compatibility */
echo '<script>
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.ComboBox");
</script>';
}
?>
<script>
dojo.addOnLoad(showDialog);
function showDialog() {
LoginLanding();
dojo.connect( dijit.byId("passwordId"), "onKeyUp", checkForEnterKey );
}
function handleLoginVerifyReply(response, args)
{
document.location.href= "index.php/consoleController";
}
function handleLoginVerifyErrorReply(response, args )
{
var responseText = response.responseText;
var errObj = JSON.parse(responseText);
dojo.byId("msgId").innerHTML = "<b>" + errObj.reason + "</b>";
}
function LoginLanding()
{
dojo.xhrPost({
url: "/index.php/verifyLogin/LoginLanding",
handleAs: "json",
timeout: 6000,
content: {} ,
load : function(response, args) {
if (response.status == 200)
{
handleLoginVerifyReply(response, args);
}
return response;
},
error: function(response,args) {
return response;
}
}
);
}
function verifyLogin() {
var vUsername= dijit.byId("userId").get("value");
var vPassword= dijit.byId("passwordId").get("value");
dojo.xhrPost({
url: "/index.php/verifyLogin/login",
handleAs: "text",
timeout: 60000,
content: { "usernameId" : vUsername, "passwordId" : vPassword } ,
load : function(response, args) {
handleLoginVerifyReply(response, args);
return response;
},
error: function(response,args) {
gUserNameLoggedIn="Unknown";
handleLoginVerifyErrorReply(response, args);
return response;
}
}
);
}
function cancelLogin() {
console.log("calling cancelLogin");
}
function checkForEnterKey(ev)
{
if ( ev.keyCode == dojo.keys.ENTER ) {
verifyLogin();
}
}
</script>
<style type="text/css">
.loginPageIcon {
position: absolute;
left: 0px;
top: 0px;
height: 120px;
width: 100%;
background-color: #ffffff;
}
.loginPageTabContainer {
display:flex;
align-items:center;
justify-content:center;
position: absolute;
left: 0px;
top: 120px;
margin-right: auto ;
background-image: url('/images/slide-bg-3.jpg');
height: 100px;
width: 1920px;
font: normal 20px Open Sans !important;
font-weight: bold;
color: white;
text-align:center;
}
h1.loginH1 {
position: absolute;
margin-left: auto ;
margin-right: auto ;
margin-bottom: auto ;
top: 10px ;
color: black;
}
div.DivLogin {
height: 250px;
width: 400px;
margin-left: auto ;
margin-right: auto ;
margin-top: 150px ;
margin-bottom: auto ;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 2px 2px 0 #C2C2C2;
box-shadow: 0 2px 2px 0 #C2C2C2;
background-color:#679cc7
}
span.loginTitleTxt
{
display: inline-block;
width:100%;
height: 100%;
font: 500 15px Open Sans !important;
font-weight: bold;
text-align: center;
margin: 0 auto;
margin-top: 5px ;
}
hr.loginSeperator {
position: relative;
top: 10px;
border-bottom: 1px dotted #cccccc;
color: #ffffff;
background-color: #ffffff;
height: 1px;
width: 95%;
}
.loginForm {
position: relative;
display: inline-block;
left: 50%;
top: 20px;
margin-left: -180px;
font: normal 14px Open Sans !important;
width:50%;
}
.loginTable {
display: table;
}
.loginRow {
display: table-row;
}
.loginCellLeft {
display: table-cell;
height: 30px;
padding-right: 40px;
}
.loginCellRight {
display: table-cell;
height: 30px;
width:50px;
}
.loginCellEmpty {
display: table-cell;
height: 10px;
}
.loginMsgLabel {
position: relative;
left: 100%;
margin-left: -200px;
font: normal 14px Open Sans !important;
color: #772222;
width:100%;
}
div.section.header {
margin-left: -20px;
margin-right: -10px;
background-image:url("/images/slide-bg-3.jpg");
background-position-y:-200px;
padding:0!important;
height: 210px;
margin-top:6px
}
div.section.header .container {
display:flex;
align-items:center;
justify-content:center;
height:30%
}
div.section.header h1 {
margin-top:280px;
font: normal 40px Open Sans !important;
font-weight: bold;
color: white;
max-width:90%
}
</style>
</head>
<body id="loginBodyId" class="claro" bgcolor="white" style="font-size:medium;background-size:cover" >
<div class="section header">
<div class="container">
<h1> Login Page </h1>
</div>
</div>
<div class="DivLogin">
<div> <span class="loginTitleTxt"> Login </span> </div>
<hr class="loginSeperator"></hr>
<div class="loginForm">
<div class="loginTable">
<div class="loginRow">
<div class="loginCellLeft">
<label for="userId">Username:</label>
</div>
<div class="loginCellRight">
<input type="text" trim="true" dojoType="dijit.form.TextBox" value="" name="login" id="userId" />
</div>
</div>
<div class="loginRow">
<div class="loginCellLeft">
<label for="passwordId">Password:</label>
</div>
<div class="loginCellRight">
<input type="password" trim="true" dojoType="dijit.form.TextBox" value="" name="password" id="passwordId"/>
</div>
</div>
<div class="loginRow">
<div class="loginCellLeft">
<label for="domainId">Domain:</label>
</div>
<div class="loginCellRight">
<select id="domainId" autocomplete="true" dojoType="dijit.form.ComboBox" value="Default">
<option selected="selected">default</option>
</select>
</div>
</div>
<div class="loginRow">
<div class="loginCellLeft">
</div>
<div class="loginCellRight">
<button dojoType="dijit.form.Button" onClick="verifyLogin()">Login</button>
</div>
</div>
<div class="loginRow">
<div class="loginCellEmpty">
</div>
</div>
</div> <!-- End loginTable -->
<label class="loginMsgLabel" id="msgId"></label>
</div> <!-- End loginForm -->
</div>
</body>
</html>
Thanks
Loc
Generally, the error dojo/parser::parse() error Error: Unable to resolve constructor for: 'dijit.form.TextBox' means there is an issue with the dependency. Can you check your login.js to make sure that you are referring to the TexBox correctly and also try to move that import statement up the order and see what happens?
The javascript "login.js" is the optmized script which is generated by the
build script of Dojo when it compile along with the profile above. I have
tried to re-order the TextBox but there isno luck. I think this could be
related to the configuration of Dojo profile.
Thanks,
Loc
I found out the issue. With the new dojo syntax, it's using the foward-slash in
data-dojo-type to specify the module ("dijit/form/TextBox"). My code is still
using the old syntax ("'dijit.form.TextBox"). As looking in the optimized login script, the module TextBox is defined as below
'dijit/form/TextBox':function(){
That's why I got the error message "Unable to resolve constructor for: 'dijit.form.TextBox'"
Loc
Currently i am able to replicate a form, however i want to set a limit to the number of times it is able to do so(replicate). Is there a way to make it so that when, for example i want the limit to be 5, once the total number of forms hit 5 the "add" button will be disabled(when i click it, its does nothing). However when i remove a form the "add" button becomes functional(can add form) again. I am only allowed to use HTML CSS and Javascript.
$(function() {
var addDiv = $('#addinput');
var i = $('#addinput p').size() + 1;
$('#addNew').live('click', function() {
$('<label>Choose a picture<br><input type="file" ' + i + '" value="" /><img class="target" src="#" alt="Choose and Upload" />Remove</label><br>').appendTo(addDiv);
i++;
$('fieldset input').change(function() {
if (this.files && this.files[0]) {
var $target = $(this).next('.target');
var reader = new FileReader();
reader.onload = function(e) {
$target.attr('src', e.target.result).width(150).height(112);
};
reader.readAsDataURL(this.files[0]);
}
});
return false;
});
$('#remNew').live('click', function() {
if (i > 2) {
$(this).parents('label').remove();
i--;
}
return false;
});
});
.locationsector {
border-radius: 5px;
border: 5px solid black;
width: 30%;
margin-left: 0.79%;
float: left;
padding: 10px;
}
img {
text-align: center;
margin: 2%;
display: inline-block;
border: 10px solid #140E26;
border-radius: 10px;
padding: 5px;
width: 150px;
height: 112px;
}
#addNew {
background: black;
margin-left: 2%;
padding: 5px;
font-size: 15px;
color: white;
display: inline-block;
width: 100px;
border: 1px solid #140E26;
border-radius: 10px;
cursor: pointer;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<fieldset class="locationsector" id="addinput">
<legend>Test</legend>
<p>
<label for="north">Choose a Picture
<br>
<input type="file" required="required" />
<img class="target" src="#" alt="Choose and Upload" />
</label>
<br>
<a id="addNew">Add</a>
</p>
</fieldset>
You already have a counter i and that's good.
This will make it simpler for you to limit the replication:
// ...
$('#addNew').live('click', function() {
if(i > 5) {
alert("Reached maximum number of fields.");
return false;
}
$('<label>Choose a picture<br><input type="file" ' + i + '" value="" /><img class="target" src="#" alt="Choose and Upload" />Remove</label><br>').appendTo(addDiv);
// ...
The alert call is optional (You mentioned doing nothing?)