Develop Reference

Update html with js instead of creating new file

at this moment my script downloads html file with name(1), name(2) etc. I wonder if I can change this script to update local file and add value instead of downloading. Or second option can I somehow force html to look for file "INCFINDERdb("highestvalue").html" ?
function save() {
var htmlContent = [document.getElementById('saveinc').value];
var bl = new Blob(htmlContent, {
type: "text/html"
});
var a = document.createElement("a");
a.href = URL.createObjectURL(bl);
a.download = "INCFINDERdb.html";
a.hidden = true;
document.body.appendChild(a);
a.innerHTML = " random ";
a.click();
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('click-me3').addEventListener('click', save);
});
<input type="text" id="saveinc">
<button class="button" id='click-me3'> Save INCs to ignore </button>
<div class="info-box">
IGNORUJEMY TE CI
<iframe src="/INCdb/INCFINDERdb.html" title="description"></iframe>
</div>
Later on I want to add remove option also with update does document.removeElement will work?

chrome.downloads.onDeterminingFilename.addListener(function (item, suggest) {
suggest({ filename: '..', conflictAction: 'overwrite' });
});
Fixed my problem

Save <img> to File Share using AJAX

I am trying to somehow save my image generated with <input type="file" id="file_capture" capture="user" accept="image/*"/> through vb.net ajax and save the file into a file share folder.
I need image capture so that if the user is on their phone it will screen capture.
I have tried jquery-webcame with no luck and have ended with only HTML Capture working up to the point when I need to save the file.
So far the image src looks something like this data:image/jpeg;base64,/...
When I pass the src into ajax I tried to read it using Net.WebClient but I am unsure how to get the address of the img when all I have is the src value to use for My.Computer.Network.DownloadFile
VB.NET
<System.Web.Services.WebMethod(EnableSession:=True)> Public Shared Function SaveImage(ByVal src As String) As String
Try
Dim client As Net.WebClient = New Net.WebClient
Dim destination = "\\serverName\FolderShareName\"
client.DownloadFile(src, destination)
Catch ex As Exception
End Try
Return "Pass"
End Function
HTML
<label class="cameraButton" style="min-width:150px;">Capture File
<input type="file" id="file_capture" capture="user" accept="image/*"/>
</label>
<div id="imageHolder" class="col-sm-12" style="border:1px solid red;text-align:center;min-width:150px;" runat="server">
</div>
JAVASCIRPT [I created it this way so multiple images can be uploaded]
$('#file_capture').change(function () {
AddNewImage(this);
});
function AddNewImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var id = $("#imageHolder > div > img").length
var fullid = "uploadImage" + id++;
var DIV = document.createElement("DIV");
DIV.className = "imgWrap"
DIV.ID = "imgWrapID" + id++;
DIV.style.display = "inline-block";
DIV.style.padding = "10px";
document.getElementById('imageHolder').appendChild(DIV);
var img = new Image(200, 200);
reader.onload = function (e) {
img.src = e.target.result;
img.id = fullid
}
reader.readAsDataURL(input.files[0]);
var btn = document.createElement("BUTTON");
btn.innerHTML = "x";
btn.className = 'top-right';
btn.name = DIV.ID
btn.title = fullid
btn.onclick = function () {
$("#" + this.name).remove();
$("#" + this.title).remove();
$(this).remove();
return false;
};
DIV.appendChild(btn);
DIV.appendChild(img);
}
}
client.DownloadFile(src, destination)
clearly won't accept the 64bit src value of the image so I need to somehow convert it to a address.

how to use url parameters in html? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
I get URL parameters using Javascript but i can't use those variables in my html.
the JS code is this:
<script>
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("name");
console.log(c);
</script>
and my URL is localhost:8000/something?name=ABC.here i can get the value of name and show it in the browser console but when i try to set the value of an input tag in my HTML it doesn't do it and raises some errors.
my JS and html is like:
<script>
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("name");
document.getElementById("user").value =url.searchParams.get("name");
</script>
<input id="user" value"">
this should have changed the value of the input tag but doesn't.

if your #user input is call before the DOM content is loaded,
document.getElementById("user").value
javascript can't find it so he try to set "value" of an undefined element
try this :
<input id="user" value="">
<script>
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("name");
document.getElementById("user").value = c;
</script>

If you only have one URL parameter this will work. Just make sure that your input element is defined first.
A working copy JsFiddle static input
HTML
<input id="user" value="">
JS
var url = "localhost:8000/something?name=ABC" //replace with code to get url
var name = url.substring(url.indexOf("=") + 1);
document.getElementById("user").value = name;
If you need the input element to be defined after you get the URL parameter:
A working copy JsFiddle dynamic input
HTML
<div id="myDiv"> </div>
JS
var url = "localhost:8000/something?name=ABC" //replace with code to get url
var name = url.substring(url.indexOf("=") + 1);
var parent = document.getElementById("myDiv");
var input = document.createElement("input");
input.value = name;
parent.appendChild(input)

Javascript - is there at good way to create a link

I have a field i my webshop that i would like to change to a link
<span id="m-product-customdata-data-" class="m-product-customdata-data-title">http://www.coaxconnectors.dk/searchresultcable.asp?CCType=-TL505&action=searchConnector </span>
Is there any way i Javascript to change this to a url?

Use this it will help you.
var a = document.createElement('a');
var linkText = document.createTextNode("my title text");
a.appendChild(linkText);
a.title = "my title text";
a.href = "http://example.com";
document.body.appendChild(a);

How can I generate a list of modified hyperlinks based on user input

I'm trying to modify a list of URLs using either HTML or Javascript. I collected a list of sites that will embed any YouTube video. They look like this:
http://music-dump.com/id/00000
http://youtube-id.com/download/00000
etc.
I want to generate a list of new hyperlinks with the "00000" replaced with the userInput. The list should generate from a button click or on-the-fly user typing. So far I found this:
<script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('userInput').value;
var lnk = document.getElementById('lnk');
lnk.href = "http://music-dump.com/id/" + userInput;
lnk.innerHTML = lnk.href;
}
</script>
Type the youtube code and click Open! <a href="" id=lnk>link</a> <br>
<input type='text' id='userInput' value='' />
<input type='submit' onclick='changeText2()' value='Open'/>
But this will only generate one link. I want a huge list. Is it possible?

Is this what you want?
Type the youtube code and click Open!
<div id="links">
</div>
<input type='text' id='userInput' value='' />
<input type='submit' onclick='changeText2()' value='Open'/>
And the javascript:
var links = [
"http://music-dump.com/id/00000",
"http://youtube-id.com/download/00000",
"http://example.com/v/00000"
];
function changeText2() {
var userInput = document.getElementById('userInput').value;
links.forEach(function(link) {
link = link.replace("00000", userInput);
var a = document.createElement("a");
a.href = link;
a.innerHTML = link;
document.getElementById('links').appendChild(a);
});
}
http://jsfiddle.net/u7hfuagw/2/

You need to keep track of your links in a list (hardcoded in your javascript file or retrieved from a service via XHR request for example). Then, for each link, insert a <a> tag in the DOM. Once the links are inserted, you only need to listen to the value of the input to update the href values ;)
HTML file:
<input type="text" id="userInput" placeholder="Start typing an ID...">
<ul id="links"></ul>
JS file:
(function () {
'use strict';
// the "huge" list of links
var linksCollection = [
'http://music-dump.com/id/{id}',
'http://youtube-id.com/download/{id}'
];
init();
function init() {
var li, a;
// for each link in the collection, we are going to create
// a <a> element within a <li> element
for (var i = 0; i < linksCollection.length; i++) {
li = document.createElement('li');
a = document.createElement('a');
a.href = linksCollection[i].replace('{id}', 0);
a.innerHTML = a.href;
li.appendChild(a);
document
.getElementById('links')
.appendChild(li);
}
document
.getElementById('userInput')
.addEventListener('keyup', handleInput);
}
function handleInput() {
var inputElement = document.getElementById('userInput');
var links = document.getElementById('links').childNodes;
var aElement;
for (var i = 0; i < links.length; i++) {
aElement = links[i].getElementsByTagName('a')[0];
aElement.href = linksCollection[i].replace('{id}', inputElement.value);
aElement.innerHTML = aElement.href;
}
}
})();
Link to the plunker: http://plnkr.co/edit/C1b6ccnpFrnNhDAsqxTF
PS: in the source code above, <a> are placed in a <li> tag for a better visual rendering. Feel free to place the <a> in other tags or to add class names for the styling. For example:
li = document.createElement('li');
li.className = 'list-item';