|
The task
I work with Angular and Chart.js (just started working with both for the first time) and need to import a recordset into Chart.js to be displayed as a multi-axis line chart. At the moment I am displaying some dummy data for visualization which works flawless.
The recordset to be displayed is a record of statistical data stored in a local MS SQL database table. There are three columns that need to be displayed from the table in Chart.js.
1. ExeTimeStamp (in SQL server defined as the following style --> "ODBC canonical date and time with milliseconds." http://www.blackwasp.co.uk/sqldatetimeformats.aspx)
2. LogTimeStamp (same as above ExeTimeStamp style)
3. TaskResult (in SQL server defined as a String, holds thousands of recordsets, each containing 15 pairs of "value" and "label" data)
The challenge
By means of the following tutorial (http://www.tutorialsteacher.com/nodejs/access-sql-server-in-nodejs) I was able to connect to the database and to retrieve the data for all three columns to be displayed in Chrome which results in the following JSON output...
{"recordsets":[[
[{
"ExeTimeStamp":"2018-08-11T08:06:47",
"LogTimeStamp":"2018-08-11T08:07:29",
"TaskResult":[
{"value":"1452","label":"Google readings"},
{"value":"1618","label":"Navigate to 'log on' page"},
{"value":"5467","label":"Log in"},
{"value":"2420","label":"Find user"},
{"value":"1500","label":"Click on 'active cases'"},
{"value":"3084","label":"Click on case"},
{"value":"1350","label":"Click on 'documents'"},
{"value":"652","label":"Click on download PDF icon"},
{"value":"5008","label":"Log in via login client"},
{"value":"1","label":"Wait for down-load/check for PDF in PDF viewer"},
{"value":"1299","label":"Click on extended search"},
{"value":"1267","label":"Input search term"},
{"value":"5004","label":"Execute search},
{"value":"1696","label":"Log out"},
{"value":"30366","label":"Total without google readings"
}]
//...remaining recordsets...
}]],"output":{},"rowsAffected":[20461]}
This data now needs to be mapped to Chart.js so it is possible to read the data into the chart display itself.
Having looked at other suggestions, my approach would be to create a new typescript class looking somewhat like this...
export class livelogs implements OnInit {
constructor() { }
ngOnInit() {
}
exetimestamp: Date;
logtimestamp: Date;
taskresult: string[];
}
...in order to make data available for reading by Chart.js from that class.
However each recordset with the 15 pairs of "value","label" data in TaskResult needs to be accessed one pair at a time and mapped individually to Chart.js so each line (and intersecting point) in the chart gets its own value and label.
Therefore, I am in doubt as to whether my approach is the right one, nor if or how it could be actually made to work.
Can anyone point me into the right direction here?
Thanks in advance for any input.
The chart type from Chart.js which I am using now can be seen here...
http://www.chartjs.org/samples/latest/charts/line/multi-axis.html
Note: If someone might wonder why TaskResult wasn't/isn't separated rather into multiple columns, holding each one pair - as it would be a better solution to the problem - I agree, but have already asked the responsible about this option. Since the statistical information in the future will have to be accessed by many users by means of a customized search option, plus that the same information needs to refresh other more specific graphs at a fixed time-interval, the reasoning is that the server would be taxed to hard with constant requests if more columns had to be accessed and the load therefore too high, which makes this possibility a no-go.
|
|
|
|
|
Hi everybody
When I try to open my website (URL)/login.aspx in chrome, it switches in the bar to (URL)/login and goes to "HTTP Error 404.0 - Not Found" page.
but in IE, it works fine.
any idea about this problem
|
|
|
|
|
i learn test regexp,I want it if the value is correct show "learning javascript" but if the value is wrong then show "learning"
the value is always false
this code
{
var data1 =/learning+\s+html+/g.test(data1)
if (data1==true) {
console.log("learning javascript");
}else {
console.log("learning");
}
}
panggilRegexp("learning javascript")
any solution?
|
|
|
|
|
Alboyz wrote: var data1 =/learning+\s+html+/g.test(data1)
You're trying to use the variable data1 before it has any value assigned to it.
Your regular expression is also slightly off: the + means the previous element can be repeated one or more times, so you'll match "learninggggg". You're also testing for "html" instead of "javascript".
You'll probably was a case-insensitive regex, so that you match "JavaScript" or "Javascript" as well as "javascript".
Assuming you've missed the first line of your function:
function panggilRegexp(input) {
var isMatch = /learning\s+javascript/gi.test(input);
if (isMatch) {
console.log("learning javascript");
}
else {
console.log("learning");
}
}
panggilRegexp("Are you learning JavaScript yet?");
Regular Expressions - JavaScript | MDN[^]
JavaScript RegExp Reference[^]
Regex testing tool[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
|
|
Hi,
I have a big problem with JS.
I would like to add to my dropzona component a list of files on the server.
I have this code:
<pre lang="Javascript"><div class="row">
<div class="col-12">
<form class="dropzone" id="dpz-multiple-files" action="http://localhost/dropZoneUpload.php"
method="post" enctype="multipart/form-data" style="border:1px solid #000;">
</form>
<br>
<center>
<button id="submit-all" style="height: 40px;"> Upload All the files</button>
</center>
</div>
</div>
function getValueFromJson() {
let res = $.ajax({
url: 'http://localhost/dropZoneUpload.php?parm=1',
type: 'get',
dataType: 'json',
success: function (response) {
return response;
}
})
return res;
}
The php file returns the result:
[{"name":"index.html","size" ,"path":"..\/assets\/uploads\/index.html"},{"name":".DS_Store","size":8196,"path":"..\/assets\/uploads\/.DS_Store"},{"name":"q1.jpg","size":433382,"path":"..\/assets\/uploads\/q1.jpg"},{"name":"bla.jpg","size":193540,"path":"..\/assets\/uploads\/bla.jpg"},{"name":".htaccess","size":106,"path":"..\/assets\/uploads\/.htaccess"}]
In this way I define the truncated JS:
Dropzone.options.dpzMultipleFiles = {
uploadMultiple: true,
paramName: "file",
maxFilesize: 100,
maxFiles: 2,
createImageThumbnails: true,
acceptedFiles: ".png,.jpg,.jpeg",
clickable: true,
thumbnailWidth: 150,
thumbnailHeight: 150,
autoProcessQueue: false,
init: function () {
var submitButton = document.querySelector("#submit-all")
dpzMultipleFiles = this;
submitButton.addEventListener("click", function () {
dpzMultipleFiles.processQueue();
});
this.on('completemultiple', function (file, json) {
$('.sortable').sortable('enable');
});
this.on('success', function (file, json) {
let val = file.accepted;
if (file.accepted == true) {
console.log(json);
$('.main_form').append("<input type='text' name='imgFiles[]' value='" + file.name + "'/>");
}
let val1 = file.name;
});
this.on("addedfile", function (file) {
var removeButton = Dropzone.createElement("<button> Remove file </button>");
var _this = this;
removeButton.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
_this.removeFile(file);
console.log("kasuje" + file.name);
console.log(file);
});
file.previewElement.appendChild(removeButton);
});
this.on('drop', function (file) {
console.log('File', file);
alert('bb');
});
this.on("maxfilesexceeded", function (file) {
this.removeFile(file);
});
}
};
$(function () {
$(".dropzone").sortable({
items: '.dz-preview',
cursor: 'move',
opacity: 0.5,
containment: '.dropzone',
distance: 20,
tolerance: 'pointer'
});
});
How can I display a list of my files in DropZoneJS (downloaded from PHP)?
I found an example on the Internet:
$(".dropzone").dropzone({
init: function() {
myDropzone = this;
$.ajax({
url: 'upload.php',
type: 'post',
data: {request: 2},
dataType: 'json',
success: function(response){
$.each(response, function(key,value) {
var mockFile = { name: value.name, size: value.size };
myDropzone.emit("addedfile", mockFile);
myDropzone.emit("thumbnail", mockFile, value.path);
myDropzone.emit("complete", mockFile);
});
}
});
}
});
But I do not know how to adapt it in my code. 
Can I ask for help?
Does anyone know how to do it?
|
|
|
|
|
i have content page of master page i placed date picker for text when i run visual studio style worked but when i run from IIS style not working
how to slove that
|
|
|
|
|
thepast wrote: how to slove that
No idea. I can't see anything you've done. However, it sounds like you did not deploy all of the files. But it could be your code too.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
Sure. One time I did it. You can put in home mode and deploy.
|
|
|
|
|
Hi,
I am trying out a few things in JS today and I noticed something strange happening.
console.log(null >= 0); results in true 
but both
console.log(null > 0)
and
console.log(null == 0) result in false.
How is this possible?
Thanks for explaining.
|
|
|
|
|
The reason is that an equality check == and comparisons > < >= <= work differently. Comparisons convert null to a number, hence treat it as 0. That’s why null >= 0 is true and null > 0 is false.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thank you very much, Richard.
|
|
|
|
|
I spent hours trying to figure this out and thought I would post a working sample since I could not find one that was complete.
Plus I'm going out of my way to not use JQuery anymore, and since this is within an Angular V6 component why not try it in TypeScript.
So the concept is to either select a image file using the file input or drop a image file on the target and show the image selected or dropped. Then use the FileReader and extract the Base64 and assign it to the src of the image element target, or you can create a new image element if you choose and assign the new src to it.
Point being to show the user something has happened to satisfy their new for instant gratification and to solve the issue of not wasting time going to the server, doing lots or work and sending it back.
In TypeScript, reader.result can return either a string or ArrayBuffer described as string|ArrayBuffer which was confusing to me because I had to make the TypeScript Lint happy so it would compile.
This would not work and the lint complained that type ArrayBuffer could not be converted to string.
b64Image = reader.result;<br />
dI.setAttribute('src', b64Image);
This would not work either with the same complaint
b64Image = reader.result;<br />
dI.setAttribute('src', b64Image.toString());
This worked without complaint
b64Image = reader.result.toString();<br />
dI.setAttribute('src', b64Image);
Working sample in TypeScript for an Angular 6 component.
9/19/18 16:43 - I got this wrong when I posted it. Had to research it again and add the listener.
Works but really slow setting the b64 hidden text box.
onDrop(event: any) {
let dI = document.getElementById('dropImage'),
b64 = document.getElementById('AvatarB64'),
files = event.target.items || event.dataTransfer.items,
file = files[0].getAsFile(),
reader = new FileReader,
b64Image = '';
this.containerReset();
this.imageFilename = file.name;
event.dataTransfer.dropEffect = 'copy';
if (file) {
this.imageType = file.type;
reader.addEventListener('load', function () {
b64Image = reader.result.toString();
dI.setAttribute('src', b64Image);
b64.setAttribute('value', b64Image);
}, false);
reader.readAsDataURL(file);
};
reader.onerror = (error) => {
console.log('', error);
};
event.preventDefault();
event.stopPropagation();
}
One thing here is the use of arrows, something I need to read up on. I suppose I could try it and see what happens but I need to move on and write the File Button code.
reader.onloadend = function () {
reader.onloadend = () => {
If you have any suggestions feel free to comment on it. Remember this is TypeScript.
Perhaps one day CP will add discussions for TypeScript or really Angular, React and NodeJS. I'm pretty excited about it and will most likely make the move to these technologies.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
modified 19-Sep-18 21:45pm.
|
|
|
|
|
I'm missing something here on matching the file type to the string.
I tried !== and !=
It must be related to the order of if and else if in which I'm not understanding the rule.
Perhaps every thing has to be true and finally false
https://www.tutorialspoint.com/typescript/typescript_if_else_statement.htm
I've checked the heck out of the strings to make sure it can actually match.
Scratching my head on this one. Don't forget this is TypeScript and not JavaScript.
This doesn't work
if (files.length > 1) {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(1);
console.log('drag canceled for too many files');
return false;
}
else if (fileType.split('/')[1] != 'jpeg' || fileType.split('/')[1] != 'png') {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(2);
console.log('drag canceled for not being an image file = ' + fileType.split('/')[1]);
return false;
}
else {
this.containerReset();
event.target.style.opacity = '0.4';
}
This works
if (files.length > 1) {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(1);<br />
console.log('drag canceled for too many files');
return false;
}
else if (fileType.split('/')[1] == 'jpeg' || fileType.split('/')[1] == 'png') {
this.containerReset();
event.target.style.opacity = '0.4';
}
else {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(2);
console.log('drag canceled for not being an image file = ' + fileType.split('/')[1]);
return false;
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I think the problem is in your logic - in English: "if file type is not jpeg OR file type is not png" always evaluates to true. If the file type is "jpeg", then it can't be "png", so the part after the OR matches. If the file type is "png" then it can't be "jpeg", so the first part matches.
Replace the || with && and you should get the block executing when the file type is not "jpeg" AND not "png".
|
|
|
|
|
Oh your right, that did the trick.
I'm new to TypeScript and thought || would of done the job. Guess it would of failed in JavaScript as well.
This TypeScript is harder to write in.
if (files.length > 1) {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(1);
console.log('drag canceled for too many files');
return false;
}
else if (!fileType.match('^image/jpeg') && !fileType.match('^image/png')) {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(2);
console.log('drag canceled for not being an image file = ' + fileType.split('/')[1]);
return false;
}
else {
this.containerReset();
console.log('We have a valid image file')
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I'm missing something here on matching the file type to the string.
I tried !== and !=
It must be related to the order of if and else if in which I'm not understanding the rule.
I've checked the heck out of the strings to make sure it can actually match.
Scratching my head on this one. Don't forget this is TypeScript and not JavaScript.
This doesn't work
if (files.length > 1) {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(1);
console.log('drag canceled for too many files');
return false;
}
else if (fileType.split('/')[1] != 'jpeg' || fileType.split('/')[1] != 'png') {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(2);
console.log('drag canceled for not being an image file = ' + fileType.split('/')[1]);
return false;
}
else {
this.containerReset();
event.target.style.opacity = '0.4';
}
This works
if (files.length > 1) {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(1);<br />
console.log('drag canceled for too many files');
return false;
}
else if (fileType.split('/')[1] == 'jpeg' || fileType.split('/')[1] == 'png') {
this.containerReset();
event.target.style.opacity = '0.4';
}
else {
event.dataTransfer.effectAllowed = 'none';
this.containerAlert(2);
console.log('drag canceled for not being an image file = ' + fileType.split('/')[1]);
return false;
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
This is for my Angular 6 training, in which I'm making a back end SPA for creating a Portfolio of work.
I'm writing this in TypeScript and not JavaScript, because it will just get compiled into JavaScript anyways.
So if a user selects more than one image file, or if the file is not an image file, I would like to cancel the event and send a message.
I've never done this before, or have had a drag and drop event canceled on me in the past using other web sites, so I have no creative ideas on what type of signal or alert to use.
Right now I'm using event.preventDefault() but it doesn't really do anything. I can still drop the files.
And I'm turning the drop target border red which works.
onDragOver(event: any) {
event.preventDefault();
event.stopPropagation();
event.target.style.opacity = '0.4';
let files = event.target.items || event.dataTransfer.items;
if (files.length > 1) {
event.target.style.border = 'dashed 3px #EE6363';
event.preventDefault();
console.log('drag canceled for too many files');
return false;
}
else if (files[0].type !== 'image/jpeg' || files[0].type !== 'image/png') {
event.target.style.border = 'dashed 3px #EE6363';
event.preventDefault();
console.log('drag canceled for not being an image file');
return false;
}
console.log('dragged files', JSON.stringify(files, null, 2));
console.log('dragged file count', JSON.stringify(files.length, null, 2));
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
modified 18-Sep-18 15:35pm.
|
|
|
|
|
In native Javascript, calling preventDefault indicates that the drop operation is allowed.
I suspect you need to remove the preventDefault calls from the if blocks, and add it to the end of the method instead.
ondragover Event[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thanks Richard.
I ran across that link earlier and should of read in detail earlier.
The whole drag and drop thing is overwhelming at first. I could of used a NPM to do it for me but choose to write code.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
<script type="text/javascript">
var CurrentPage = 1;
function GetImageIndex(obj) {
while (obj.parentNode.tagName != "TD")
obj = obj.parentNode;
var td = obj.parentNode;
var tr = td.parentNode;
if (td.rowIndex % 2 == 0) {
return td.cellIndex + tr.rowIndex;
}
else {
return td.cellIndex + (tr.rowIndex * 2);
}
}
function LoadDiv(url, lnk) {
var img = new Image();
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
var imgLoader = document.getElementById("imgLoader");
var dl = document.getElementById("<%=DataList1.ClientID%>");
var imgs = dl.getElementsByTagName("img");
var captionText = document.getElementById("caption");
CurrentPage = GetImageIndex(lnk.parentNode) + 1;
imgLoader.style.display = "block";
img.onload = function () {
imgFull.src = img.src;
imgFull.style.display = "block";
imgLoader.style.display = "none";
captionText.innerHTML = this.alt;
};
img.src = url;
Prepare_Pager(imgs.length);
var width = document.body.clientWidth;
if (document.body.clientHeight > document.body.scrollHeight) {
bcgDiv.style.height = document.body.clientHeight + "px";
}
else {
bcgDiv.style.height = document.body.scrollHeight + "px";
}
imgDiv.style.left = (width - 1000) / 2 + "px";
imgDiv.style.right = (width - 1000) / 2 + "px";
imgDiv.style.top = "100px";
bcgDiv.style.width = "100%";
bcgDiv.style.display = "block";
imgDiv.style.display = "block";
return false;
}
function HideDiv() {
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
bcgDiv.style.display = "none";
imgDiv.style.display = "none";
imgFull.style.display = "none";
}
function doPaging(lnk) {
var dl = document.getElementById("<%=DataList1.ClientID%>");
var imgs = dl.getElementsByTagName("img");
var imgLoader = document.getElementById("imgLoader");
var imgFull = document.getElementById("imgFull");
var img = new Image();
if (lnk.id == "Next") {
if (CurrentPage < imgs.length) {
CurrentPage++;
imgLoader.style.display = "block";
imgFull.style.display = "none";
img.onload = function () {
imgFull.src = imgs[CurrentPage - 1].src;
imgFull.style.display = "block";
imgLoader.style.display = "none";
};
}
}
else {
if (CurrentPage > 1) {
CurrentPage--;
imgLoader.style.display = "block";
imgLoader.style.display = "none";
img.onload = function () {
imgFull.src = imgs[CurrentPage - 1].src;
imgFull.style.display = "block";
imgLoader.style.display = "none";
};
}
}
Prepare_Pager(imgs.length);
img.src = imgs[CurrentPage - 1].src;
}
function Prepare_Pager(imgCount) {
var Previous = document.getElementById("Previous");
var Next = document.getElementById("Next");
var lblPrevious = document.getElementById("lblPrevious");
var lblNext = document.getElementById("lblNext");
if (CurrentPage < imgCount) {
lblNext.style.display = "none";
Next.style.display = "block";
}
else {
lblNext.style.display = "block";
Next.style.display = "none";
}
if (CurrentPage > 1) {
Previous.style.display = "block";
lblPrevious.style.display = "none";
}
else {
Previous.style.display = "none";
lblPrevious.style.display = "block";
}
}
</script>
<style type = "text/css" class="modal" style="vertical-align: middle; text-align: center">
.modal
{
display: none;
position: absolute;
top: 0px;
left: 0px;
background-color:black;
z-index:100;
opacity: 0.8;
filter: alpha(opacity=60);
-moz-opacity:0.8;
min-height: 100%;
text-align:center;
width:100%;
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 1000px;
border-radius: 10px;
}
.imgg:hover{
opacity: 0.7;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#divImage
{
display: none;
z-index: 1000;
position: fixed;
top:50%;
left: -1000px;
border-radius:10px;
background-color:White;
height: 700px;
width: 950px;
padding: 3px;
padding-right:8px;
border: solid 1px black;
text-align:center;
}
.dlTable
{
border:double 1px #D9D9D9;
width:200px;
text-align:left;
}
.auto-style1 {
width: 1189px;
}
.auto-style2 {
height: 50px;
width: 1189px;
}
</style>
</head>
<body style="background-color: #CCCCCC">
<form id="form1" runat="server">
<center>
<div style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);width: 1203px; border-top-right-radius:10px;border-top-left-radius:10px; height: auto; vertical-align: top; background-color: #CECECE;">
<table class="style1" style="background-repeat: no-repeat; background-position: center center; margin-top: 0px;border-top-right-radius:10px;border-top-left-radius:10px; background-color: #CECFCE; border-collapse: collapse;" align="center">
<tr>
<td style=" background-color: #FFFFFF; text-align: center; vertical-align: top;border-top-right-radius:10px;border-top-left-radius:10px;" class="auto-style1">
<div style=" height: 348px; border-radius:15px; text-align: center; background-image: url('image/Banner.jpg'); background-repeat: no-repeat; width: 1200px;">
<div style="z-index:initial; background-image: url('bbb.png'); background-repeat: repeat; left: 0px; margin-top:-5px;height: 292px; ">
<p style="text-align: right;margin-top:-15px; "> <asp:HyperLink CssClass="a" ID="HyperLink7" runat="server" NavigateUrl="index.aspx" style="color: #003768" Font-Names="Arial">Home</asp:HyperLink> | <asp:HyperLink CssClass="a" target="_blank" ID="HyperLink1" runat="server" NavigateUrl="http://10.1.200.19:7777/webcenter/system/login.jsp" style="color: #003768" Font-Names="Arial">Login</asp:HyperLink>
</div>
</td>
</tr>
<tr>
<td align="center" class="auto-style1" style="background-position: 100%; background-color:#FFFFFF"; valign="top " >
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<div class="auto-style144" style="margin-top:10px; color: #18446B; width: 1162px;">
<asp:Label ID="Proj" runat="server" style="font-weight: 700; font-size: x-large"></asp:Label>
<br />
<br />
Project
<asp:DropDownList ID="project" runat="server" AutoPostBack="True" style="font-weight: 700; font-size: large;" Width="195px">
<asp:ListItem Value="No Porject's selected">Choose Project ....</asp:ListItem>
<asp:ListItem>Haram Project</asp:ListItem>
<asp:ListItem>Madina Project</asp:ListItem>
</asp:DropDownList>
Year
<asp:DropDownList ID="year" runat="server" AutoPostBack="True" style="font-weight: 700; font-size: medium;" Width="72px">
<asp:ListItem>2018</asp:ListItem>
<asp:ListItem>2017</asp:ListItem>
<asp:ListItem>2016</asp:ListItem>
<asp:ListItem>2015</asp:ListItem>
<asp:ListItem>2014</asp:ListItem>
</asp:DropDownList>
Month
<asp:DropDownList ID="month" runat="server" style="font-weight: 700; font-size: medium;" AutoPostBack="True">
<asp:ListItem>January</asp:ListItem>
<asp:ListItem>February</asp:ListItem>
<asp:ListItem>March</asp:ListItem>
<asp:ListItem>April</asp:ListItem>
<asp:ListItem>May</asp:ListItem>
<asp:ListItem>June</asp:ListItem>
<asp:ListItem>July</asp:ListItem>
<asp:ListItem>August</asp:ListItem>
<asp:ListItem>Spetember</asp:ListItem>
<asp:ListItem>October</asp:ListItem>
<asp:ListItem>November</asp:ListItem>
<asp:ListItem>December</asp:ListItem>
</asp:DropDownList>
<br />
<br />
<hr style="height: 0px;margin-top:10px; width: 1130px" />
<br />
<asp:DataList ID="DataList1" runat="server" FooterStyle-Height="20px" Height="375px" RepeatColumns="5" RepeatLayout= "Table" Width="975px" CellPadding="0" CellSpacing="0" AllowPaging="True">
<FooterStyle Height="20px" />
<ItemTemplate>
<table class="table" style="border-right-style:solid; border-width:2px;border-color:#18416A; margin-right:10px ">
<tr>
<th colspan="2"> <!--<span style="margin-right:30px"><%# Eval("imageid")%></span></th> -->
</span>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td>
<!-- <img class="myImg" src ='<%#Eval("attach")%>' width="300" onclick="oo" height="250" style="margin-right:20px" alt="Name: <%# Eval("Imagename")%> </br> Year: <%# Eval("Year")%> </br> Year: <%# Eval("month")%>" /> -->
<img id="imgLoader" class="imgg" onclick = "LoadDiv(this.src, this)" src = '<%# Eval("attach")%>' width ="200" height = "150" alt="Mohammed alsofi" style ="cursor:pointer; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius:8px; margin-right:10px " />
</td>
</tr>
<tr>
<td colspan="2"><span style="font-size:12px">Name:</span> <span style="font-size:12px"><%# Eval("imagename")%></span></td>
</tr>
<tr>
<td colspan="2"><span style="font-size:12px">Date:</span> <span style="font-size:12px"><%# Eval("uploaddate", "{0:dd/MM/yyyy}")%></span></td>
<tr> <td colspan="2"> <span style="font-size:12px; margin-bottom:30px ">
<asp:LinkButton ID="LinkButton1" runat="server">Dawnload</asp:LinkButton></tr>
</span></td>
</tr>
</table>
</ItemTemplate>
<SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<div>
</div>
</td>
</tr>
<tr>
<td align="center" class="auto-style2" style="background-position: 100%; background-color:#00346B; "; valign="top " >
</td>
</tr>
</table></div> </center>
<div>
<br />
</div>
<center>
<div id="divImage" >
<table style="height: 100%; width: 100%" >
<tr>
<td valign="middle" align="center" colspan = "3" style ="height:500px;" >
<img id="imgLoader" />
<div id="caption"> </div>
</div>
<img id="imgFull" alt="" src=""
style="display: none;
height: 600px;width: 950px" />
</td>
</tr>
<tr>
<td align = "left" style="padding:10px;width:200px">
<a id = "Previous" href = "javascript:" onclick = "doPaging(this)" style ="display:none"><img src="image/prev.png" /></a>
<span id = "lblPrevious"></span>
</td>
<td align="center" valign="middle" style ="width:200px">
<!-- <input id="btnClose" type="button" value="close"onclick="HideDiv()"/> -->
<asp:ImageButton ID="btnClose" runat="server" Width="50" Height="50" ImageUrl="image/close.png"></asp:ImageButton>
<img class="modal-content" id="img01">
</td>
<td align = "right" style ="padding:10px;width:200px">
<a id = "Next" href = "javascript:" onclick = "doPaging(this)" ><img src="image/next.png" /></a>
<span id = "lblNext" style ="display:none"> </span>
</td>
</tr>
</table>
</center>
</div><div id="divBackground" class="modal" >
</div>
please help me I did everything but my caption couldn't read from datalist column
|
|
|
|
|
I'm trying to pass a Javascript variable to an HTML String variable which passes it to an ActionLink. The script is getting it's value from an "input box".
@{
<!--Script outputs input value-->
<script type="text/javascript"src="http://code.jquery.com/jquery-1.6.1.min.js" >
var sData;
var sDate = function myFunction() {
var sData = document.getElementById("myText").value;
document.getElementsById("demo").innerHTML = sData;
}
</script>
string sData ="I would like to pass the value here";
<!--Demo that script works-->
<p id="demo"></p>
<p id="myData" onclick="myFunction()">
@Html.ActionLink("Click Me", "DownloadFile", new { sData }, null)
</p>
<label>Monthly Report</label>
<input type="text" id="myText" value="" name="myText" size="10" maxlength="6" pattern="[0-9]" placeholder="yyyymm" style="text-align:center" />
}
|
|
|
|
|
You don't.
The ActionLink method runs on the server, and generates HTML which is returned to the client, long before any of your Javascript runs, and long before the user has the chance to type anything into the input.
You're going to need to generate the link's href on the client.
Alternatively, wrap the elements in a <form>, change the input name to match the parameter name on your action, and replace the link with a submit button.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
1) What I'm trying to do: Uploading a file with aws s3 and then taking the filename and filetype and placing it at the end of the url to save it in sql so that every time the person logs in, it will pull the picture up by user image url
2) Problem: Not uploading and not recognizing file in filename or filetype. Coming up with undefined for filetype and filename in URL and signedURL
3) fileUploadService.js USED IN NODEJS (below)
Can anyone let me know what I'm doing wrong or anything missing?
const aws = require('aws-sdk');
aws.config.region = 'us-west-2';
aws.config.update({ accessKeyId: '', secretAccessKey: '' });
const PROFILE_S3_LINK = "https://sabio-training.s3.amazonaws.com/";
module.exports = {
getUrl: getUrl
}
function getUrl(req, res) {
const s3 = new aws.S3();
const fileName = 'C56/'+"filename"+'/' ;
const fileType = "filetype";
const s3Params = { getSignedURL looks like this : https:
Bucket: 'sabio-training', Expires=1536877443&Signature=WxSvLSzfyZKDRN9LawVOwj1ayVY%3D&x-amz-acl=public-read
Key: fileName, URL looks like this : https:
Expires: 3000,
ContentType: fileType,
ACL: 'public-read'
};
s3.getSignedUrl('putObject', s3Params, (err, data) => {
if (err) {
console.log(err);
return res.end();
}
const returnData = {
signedRequest: data,
url: `${PROFILE_S3_LINK}${fileName}${fileType}`
};
res.write(JSON.stringify(returnData));
res.end();
});
}
=========================================================================
fileUploadRoute.js
const router = require("express").Router();
const fileUploadController = require("../controllers/fileUploadController")
router.put("/", fileUploadController.getUrl);
module.exports = router;
==========================================================================
fileUploadController.js
const fileUploadService = require('../services/fileUploadService')
const responses = require("../models/responses");
module.exports = {
getUrl: getUrl
}
function getUrl(req, res) {
fileUploadService.getUrl(req, res)
.then(response => {
res.send(response)
})
.catch(error => {
res.send(error)
})
}
===========================================================================
index.js in node portion
const router = require("express").Router();
const pogsRoutes = require("./pogs.routes");
const userFromJWT = require("../filters/jwt.user");
const validateUser = require("../filters/validate.user");
const testRoutes = require("./test.routes");
const profileRoute = require("../profile/profileRoute");
const fileUploadRoute = require("../fileUpload/fileUploadRoute")
module.exports = router;
router.use("/api/pogs", pogsRoutes);
router.use("/api/upload", fileUploadRoute)
router.use("/api/profilePage", profileRoute)
router.use(userFromJWT);
router.use(validateUser);
router.use("/api/test", testRoutes);
============================================================================
USED IN REACT
Axios pulled from profile page
handleClickUpload = evt => {
evt.preventDefault()
console.log("RESULT : ", this.state);
axios.put(`${NODE_API_URL}/api/upload`, {
})
.then(response =>{
console.log(
response,"URL SIGNED REQUEST : ",response.data.signedRequest, " URL : ",response.data.url
)
})
.catch(error => {
console.log(error);
})
}
Upload button and file upload portion inside profile page
<div method="post" encType="multipart/form-data" action="/">
<input type="file" name="fileName" className="btn" />
<input type="submit" value="Upload" className="btn" onClick={this.handleClickUpload}/>
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
