Testing if an upload field will accept "click" - javascript

So, I would like to be able to have people click on a link, and the an input field with a file will open. But I only want this to happen if the browser has support for it. As pointed out in this answer, chrome supports this. Firefox 3.6 does not, but Firefox 4 should.
I know you can frequently test for support of features in javascript, but I'm unsure how to test for this feature.
If you'd like to see what I mean, the below code shows the feature when clicking on the link. You can also play with this on my page.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Upload Field Click Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var clicker = document.getElementById('clicker');
var uploader = document.getElementById('uploader');
clicker.addEventListener("click", function(e) {
uploader.click();
e.preventDefault();
}, false);
});
</script>
</head>
<body>
<form>
<input type="file" id="uploader">
</form>
Should click the uploader
</body>
</html>
Things that do not work:
testing !uploader.click
seeing if uploader.click() throws an exception

You could use JQuery to dynamically write the HTML into the document at the appropriate place
$("#mylinkID").after('Whatever');`
and the link would be added after the element that contained the ID "mylinkID". If no support for JS, the link doesn't get displayed.

Related

When I click on button, nothing happens

I have following HTML,
$(document).ready(function() {
$('#searchMovieBtn').click(function(e) {
e.preventDefault();
console.log('search');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="searchMovieBtnBox">
<button class="btn btn-primary" type="button" id="searchMovieBtn">Search</button>
</div>
When I click on button, nothing happens, it seems like event is not triggering.
It is a caching issue. When you was developing and testing your JQuery code, your old code remained into the browser cache. Browser cached it to load page faster in next uses. In order to solve this problem you have 3 options.
Delete your browser history
Refresh your browser by pressing Ctrl + F5 (Preferred for developing purpose)
Tell browser that this JQuery code has changed by adding a version for it. It is used when you are publishing your code on the server because you can't ask your clients to delete their browser history or load your page by pressing Ctrl + F5
Here is how you could add version to your JQuery code:
<script type="text/javascript" src="js/script.js?v=1"></script>
Look at v=1. Next time when you updated your JQuery code change it to v=2 to tell browser that your code has been changed.
You can try the next thing,
First of all, your HTML markup I think it might be wrong as you are not pointing out correctly the folders.
I attached all the css and js bootstrap + jquery files through a CDN.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"</script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<title> jQuery button click event working?</title>
</head>
<body>
<div id="searchMovieBtnBox">
<button class="btn btn-primary" type="button" id="searchMovieBtn">Search</button>
</div>
</body>
</html>
Therefore,your script.js stays as it is.
For me it has worked like this. I got the message printed onto my console.
Hope that helps you.
Make sure you don't have another element in the HTML with the same id.

How to show file dialog with JavaScript once the page is loaded in Chrome

I want to show the file dialog once the page is loaded.
I tried using JS to trigger the click event on the file input in jQuery document ready event. But this approach only works in IE11, it doesn't work in Chrome (41.0.2272.118).
How can I make it work in Chrome?
Here is my code which doesn't work in Chrome but work in IE:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body >
<input type="file" id="a" />
<script>
$(document).ready(function () {
Go();
});
function Go() {
var input = $('input');
input.click();
console.log('Gooooooooooooooo');
}
</script>
</body>
</html>
IE will allow you to trigger a .click event on a type='file', but most other browsers will not, for security reasons. However, there is a solution that might work for you.
No straight ways of triggering it with onload().
Onload is only supported by the <input type = "image"> tag. See here.
+1 #william.taylor.09's proposition.

How to display variables from external JavaScript in HTML. Internet Explorer 7

I realize this is a horribly newbie question, but Ive been trying to fix it for days trying different methods so I just wanted to ask what would you do.
I am attempting to create a web program to use at work, and I have this setup:
Windows 7
IE 7 - Cannot Upgrade.
The "website" is not a webhost, basicly I have a folder on my desktop with html/css/js files and I use IE to run the scripts, no host.
I want to keep a set of vars, mostly strings, in an external JS file and pull the JS into different HTML pages. I want it to write on load of the document.. not on ready. It does not have to be user dynamtic.
Also, When I make the js file, does it have to have a header.. like HTML has doctypes?
I really appreciate your help as I am trying to learn and will cont on my own from here. My setup is much different than most, and im not sure which part was causing my problem so I finally broke down and posted.
When you write your JavaScript file it doesn't have to have any header or doctype. For example you can have a variables.js file that looks just like this:
var x = "abc";
var y = "def";
and have many HTML files that include variables.js like this:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>title</title>
</head>
<body>
<!-- page content -->
<script src="variables.js"></script>
<script>
alert(x);
</script>
</body>
</html>
and your variables should be available there. Any script that is included after the reference to your variables.js should have access to everything that was included before without the need to listen to any events.
If you need to listen to the events then I suggest to use jQuery or some other JavaScript framework. An example for jQuery would be:
$(window).load(function() {
alert(x);
});
A more advanced example of changing the DOM elements:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>title</title>
</head>
<body>
<p>Select variable:</p>
<p>
Show x
Show y
</p>
<p>Value:</p>
<p id="value"></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="variables.js"></script>
<script>
$('#show-x').click(function (e) {
e.preventDefault();
$('#value').html(x);
});
$('#show-y').click(function (e) {
e.preventDefault();
$('#value').html(y);
});
</script>
</body>
</html>
If it's not a global variable, you can't display/print/access or whatever you call it because it has a local scope, defined in a function.
You can probably only use a debugger simply to debug it

Dijit first tutorial

I know this shall be a very silly question but some years have passed since the last time I developed some javascript.
I'd like to brush on that and so I decided to learn some Dojo.
The problem is that I can't manage to get this simple Dijit example working
As far far as I understand it should produce a button with a Click Me label but the only thing I get is an empty button. It seems the script is not executed. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Dijit</title>
<!-- load Dojo -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dijit/themes/claro/claro.css">
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
</head>
<body class="claro">
<button id="btn"></button>
<script>
require(["dijit/form/Button", "dojo/domReady!"], function(Button) {
var button = new Button({
label: "Click Me!",
onClick: function(){ console.log("First button was clicked!"); }
}, "btn");
button.startup();
});
</script>
</body>
</html>
If you're loading the page using a file:// URL (or double-clicking the file), it won't work due to the schema-less URI's you're using to load the stylesheet and dojo.
Try adding the protocol "http" before the leading pair of slashes in the respective link & script tags.
See also Can I change all my http:// links to just //?

Is this a bug or intended design of FireFox?

In FireFox, using JavaScript, when a user presses enter to select "ok" on an alert Window the onkeyup get fired. In Internet Explore this does not happen.
This HTML code demonstrates what I'm saying. Open it, type a character in the text field and select "ok" by pressing enter. Try it in FireFox and IE.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JS example</title>
<script type="text/javascript">
function popup()
{
alert("bam")
}
</script>
</head>
<body>
<form>
Each inputted character causes an alert window:<input type="text" onkeyup="popup()" />
</form>
</body>
</html>
Is this as designed or is this a problem? How do you prevent FireFox from firing again?
EDIT: I found it on bugzilla, does bugzilla have a "vote-up" or equivalent feature? This through me astray when trying to trouble shoot and I was looking for infinite loop/recursion in the function that was being called.
This is because Firefox destroys its alerts much more quickly than other browsers, and it's possible for the focus to return to your field while the Enter key is still down. It's possible to reproduce this in other browsers by holding the Enter key down a bit longer.

Categories

Resources