Following js code is for html5 multiple files selected [duplicate] that doesn't work for chrome browser, after selecting a file homonymous several times.
For EX: selecting file admin.png for 2 or up times tandem. It only alert for first times.
DEMO (This doesn't work only in chrome browser ): http://jsfiddle.net/s9mt4/
function doClick() {
var el = document.getElementById("fileElem");
if (el) {
el.click();
}
}
function handleFiles(files) {
var d = document.getElementById("fileList");
var elementArray = document.getElementsByClassName("ImgNameUp");
var ReValue = true;
for (var i = 0; i < elementArray.length; ++i){
if(elementArray[i].innerHTML == files[0].name){
ReValue = false;
}
}
$('.ImgNameUp2').append('<div class="ImgNameUp">'+files[0].name+'</div>')
if (ReValue) {
alert('true');
} else {
alert('false');
}
}
what do i do,change in code that it working right?
Your input fields are listening to the onchange event to fire the javascript.
According to W3C's document:
onchange event occurs when a control loses the input focus and its
value has been modified since gaining focus
if you try to upload the same file, the value of file input does not change so does not fire the function. I think Chrome is the only browser to implement this "correctly".
If you want to upload twice, clear file input value:
function doClick() {
var el = document.getElementById("fileElem");
$(el).val(null); // <-- this line
if (el) {
el.click();
}
}
http://jsfiddle.net/s9mt4/2/
Related
I have a problem where i am trying to disable certain forms fields which use the SelectStatic Widget based on a tick box, i have included the javascript below.
const vlan = document.querySelector('#id_vlan');
const physical_facing = document.querySelector('#id_physical_facing');
const service_type = document.querySelector('#id_service_type');
const bd_function = document.querySelector('#id_function');
function vlan_enable(){
vlan.disabled = false;
};
function vlan_disable(){
vlan.disabled = true;
};
function service_function_enable() {
service_type.disabled = false;
bd_function.disabled = false;
};
function service_function_disable() {
service_type.disabled = true;
bd_function.disabled = true;
};
(function() {
service_function_enable();
vlan_enable();
if(physical_facing.checked){
service_function_disable();
} else {
vlan_disable();
}
})();
function pf_event() {
if(physical_facing.checked) {
vlan_enable();
service_function_disable();
} else {
vlan_disable();
service_function_enable();
}
};
physical_facing.addEventListener('change', pf_event)
When on the Page, the VLAN field is a DynamicModelFormField and will never disable, but when toggling the switch on and off the fields do not re-enable, i know the event is getting fired because i can see it in the developer tools, the disabled tag gets applied and removed with no change on the page, This may be a simple mistake but would like if someone can point me in the right direction.
below is what the page looks like
Netbox Page
Has anybody had any success doing this with the new version of netbox as it worked fine in V2 with the SelectStatic2 widget.
The product image is displayed as inline SVG and receives a new color for specific paths, depending on the dropdown selection.
"use strict";
window.onload=function(){
var dropdownColor = document.getElementById('Color');
// When a new <option> is selected
dropdownColor.addEventListener('change', function() {
var selectPathSvg = document.getElementById('pathNumber');
//get value text
var colorValue= selectElemFerse.options[selectElemFerse.selectedIndex].text;
//Clear all Classes from SVGPath
selectPathSvg .classList = '';
// Add that class to the <p>
selectPathSvg.classList.add(colorValue);
})
}
But this Javascript code works only, if the page was read in the DOM for the first time. If you reload this page with F5, this will not lead to any errors in the console, but not to the desired result.
EDIT: Nothing here worked for me. But I noticed that if I delete the `woocommerce_recently_viewed``cookie, that the systems works fine. But how to fix such a thing?
It's generally bad practice to use onload = ... You should instead try using addEventListner("load", ...)
The reason your script does not run, is because it gets compiled after the page has been fully loaded, so you should also check if the load event has already been fired.
"use strict";
if(document.readyState === "complete") onLoad();
else addEventListener("load", onLoad);
function onLoad(){
console.log("Doing on load stuff here...");
}
Try this instead and see if it works:
window.addEventListener('DOMContentLoaded', (event) => {
var dropdownColor = document.getElementById('Color');
// When a new <option> is selected
dropdownColor.addEventListener('change', function() {
var selectPathSvg = document.getElementById('pathNumber');
//get value text
var colorValue= selectElemFerse.options[selectElemFerse.selectedIndex].text;
//Clear all Classes from SVGPath
selectPathSvg .classList = '';
// Add that class to the <p>
selectPathSvg.classList.add(colorValue);
})
});
I am trying to set values on an angular page through a chrome extension I create so I can easily complete some repetitive angular forms I have to fill it up many times a day. (Change the angular page's code is not an option, the new values have to be injected or "typed" somehow)
On my tests, I can see the values been updated on the DOM and displaying on the page, however when I press the submit button the bound angular variables have no values.
Bellow is the code inject on the DOM by the extension, It has a little added complexity as it has everything I tried many different things such as to simulate typing using a timer, setting focus, selecting the field using select, etc.
// listen for checkForWord request, call getTags which includes callback to sendResponse
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.action === "checkForWord") {
TypeIntoInput("inputFieldPasswordRegister", "Password123!")
TypeIntoInput("inputFieldConfirm", "Password123!")
var inputs = document.getElementsByTagName('input');
for(var i=0; i<inputs.length; i++){
if(inputs[i].getAttribute('type')=='button'){
inputs[i].disabled = false
}
}
return true;
}
}
);
function TypeIntoInput(inputBox, valueText) {
var input = document.getElementById(inputBox);
input.select();
input.focus();
input.value="";
var text = valueText;
var l=text.length;
var current = 0;
var time = 100;
var write_text = function() {
input.value+=text[current];
if(current < l-1) {
current++;
setTimeout(function(){write_text()},time);
} else {
input.setAttribute('value',input.value);
var e = document.createEvent('KeyboardEvent');
e.initKeyEvent('ENTER', true, true, window, false, false, false, false, 13, 0);
// Dispatch event into document
document.body.dispatchEvent(e);
}
}
setTimeout(function(){write_text()},time);
}
I'm calling the following method to set and then remove an input event listener on a DOM element from my Google Chrome extension's content script:
//From the global scope
gl = {
setEventIfNotDoneAlready: function(elmt)
{
if(elmt.doneAlready)
return true;
if(!elmt.myEventSet)
{
elmt.addEventListener('input', gl.onMyInputEvent, true);
elmt.myEventSet = true;
}
return false;
},
onMyInputEvent: function(elmt)
{
elmt.target.doneAlready = true;
elmt.target.removeEventListener('input', gl.onMyInputEvent, true);
console.log(">>Input fired!");
}
};
and then the method above is called as such:
var objAll = document.getElementsByTagName("*");
for(var i = 0; i < objAll.length; i++)
{
if(objAll[i].isContentEditable)
{
if(gl.setEventIfNotDoneAlready(objAll[i]))
{
//And so on...
}
}
}
I need to point out that the code above is injected into arbitrary pages that the Chrome browser user navigates to. (This is done from a Chrome Extension.)
This approach seems to work fine on most pages, except in some cases the removeEventListener doesn't do anything and my onMyInputEvent continues to be called like if nothing was done.
Any idea why?
Please go here to see an iframe based web app.
Click on the map of Australia, choose a city, then buy some tickets.
Now you will see the cart form located on the lower right corner.
The problem is in IE8, I cannot delete checked rows from the table;
whereas in other browsers such as FireFox3.6, Opera10, Safari4 and Chrome4, this
action is all right.
Below is the related javascript. It doesn't use jQuery, as part of the requirement
is no framework allowed! And iframes are the my best bet, ajax will simply kill me under this restriction.
/* cartForm.js */
function toDeleteRoutes() //this function is executed before form is to be submitted.
{
if(document.getElementsByClassName('delete_box').length > 0) //there're rows to delete
{
document.getElementById('cartForm').action ="./deleteRoutes.php";
document.getElementById('cartForm').target ="section4";
return true; //this enables the form to be submitted as usual.
}
else return false; //there is no more row in table to delete!
}
function toSendEmail() //this function is executed before form is to be submitted.
{
document.getElementById('cartForm').action ="./sendEmail.php";
document.getElementById('cartForm').target ="section3";
document.getElementById('delete_btn').disabled = true; //disable delete button now
return true; //this enables the form to be submitted as usual.
}
function toCancelPurchase()
{
document.getElementById('cartForm').action ="./cancelPurchase.php";
document.getElementById('cartForm').target ="section4";
return true; //this enables the form to be submitted as usual.
}
I don't know which part is wrong, or this is just because IE8 screws all?
You are using the document.getElementsByClassName method, and it is not available on IE.
You should include a custom function to have this functionality.
Personally I like a slightly modified version of the Dustin Diaz implementation:
function getElementsByClassName(node,classname) {
if (node.getElementsByClassName) { // use native implementation if available!
return node.getElementsByClassName(classname);
} else {
return (function getElementsByClass(searchClass,node) {
if ( node == null )
node = document;
var classElements = [],
els = node.getElementsByTagName("*"),
elsLen = els.length,
pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;
for (i = 0, j = 0; i < elsLen; i++) {
if (pattern.test(els[i].className)) {
classElements[j] = els[i];
j++;
}
}
return classElements;
})(classname, node);
}
}
Check the following article, there are plenty implementations that you can use:
getElementsByClassName Speed Comparison