I faced a very interesting issue.
I'm trying to set the focus on a input field using Javascript (no jQuery, I tried that also but not worked) using window.onLoad.
Just take a look at this fiddle : setFocusOnLoad
It's working fine in chrome browser but not in Firefox. Is there any issue in Firefox? How can I resolve it.
Edited:
Here is the code I copied in html file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function onloadFocus(){
var name = document.getElementById('name');
// name.value='window.onload called';
name.focus();
}
window.onload=onloadFocus();
</script>
</head>
<body>
<div><input type='text' value='' id='name' name='name'></div>
</body>
</html>
Try adding a slight delay:
function onloadFocus(){
setTimeout(function() {
document.getElementById('name').focus()
}, 10);
}
Update jsFiddle
You must wrap the function-call into a function, otherwise it will be called immediately, not onLoad(the input is still unknown at this time):
window.onload=function(){onloadFocus();}
you should use window.onload=onloadFocus; instead of window.onload=onloadFocus(); because in case of window.onload=onloadFocus(); onloadFocus will run immediately and at that time input field may not be available.
jsfiddle
I got the solution for it. If you want to focus in Firefox. Write the focus function at the starting of the script tag.
<script type="text/javascript">
document.getElementById('name').focus();
// rest of the code here.
</script>
Hope this will help you.
Related
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.
What i want to do is simple. When i click the image, i want some message to appear.
Afterwards, when i click it again i want it to disappear. I have problems iplementing it
due to my lack of jQuery knowledge. I would appreciate some help with the following code, as well as some other implementations. I know i can do something with class="hidden" and have jQuery add/remove it but oh well.
This is what i'm trying to work with.
<!DOCTYPE html>
<html>
<head>
<script>
function greet(){
a = document.getElementById('here');
if (a.trim().length==0){
a.innerHTML = 'message!';
}
else{
a.innerHTML = '';
}
</script>
</head>
<body>
<img src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt" onclick="greet()"/>
<p id='here'></p>
</body>
</html>
EDIT: seems like i should use a.value, but i must be doing something else wrong too.
If you are using jQuery it is very simple; just use this as your JavaScript (don't forget to link the jQuery main library - I like the Google CDN for that). Just use the toggle function:
function greet() {
$('#here').toggle();
}
Also it is better to register the onClick through jQuery rather than your html (for examplesee this SO question). So that would be like this for the whole page instead :
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document).ready(function() {
$("#greet").click(
function () {
$('#here').toggle();
}
);
$("#here").hide();
}
</script>
</head>
<body>
<img id="greet" src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt"/>
<p id='here'><!--MESSAGE SHOULD BE HERE--></p>
</body>
</html>
Working example in jsFiddle.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
Ok. I need fresh eyes because I'm still on this s***d problem for one hour!
Here is my simple HTML code (testssio.html) that include javascript script:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var ssio = document.getElementById('ssio');
ssio.html = "it finally works!";
</script>
</head>
<body>
<div id="ssio"></div>
</body>
</html>
But it doesn't work! Using the debugger, I get:
Uncaught TypeError: Cannot set property 'html' of null /testssio/:6
Does anyone get it? I know it's not the correct place to look for debugging help, but I'll be crazy if I don't get it! So please, any help?
Tahnks in advance.
The reason for this is that scripts in the head load before the page is rendered. This means your content is not yet rendered and therefore not a part of document.
If you want to see this work, try moving your script below the element renders, like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="ssio"></div>
<script type="text/javascript">
var ssio = document.getElementById('ssio');
ssio.innerHTML = "it finally works!";
</script>
</body>
</html>
A more standardized way of doing this is with events. Many people use jQuery but it can be done with plain js. This would mean changing your script like this:
<script type="text/javascript">
function WinLoad() {
var ssio = document.getElementById('ssio');
ssio.innerHTML = "It finally works!";
}
window.onload = WinLoad;
</script>
This way you can still leave it in the <head>.
Also, using .html is from jQuery. It is generally used as .html(content). If you want to use the plain javascript version use .innerHTML = content.
I mention jQuery so much because it is a highly used API. This quote is from their site:
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
Your code is running too early before the DOM is loaded and thus document.getElementById() doesn't find the element in the document yet.
You can either move your script tag down to right before the </body> tag or you can wait for the DOM to load before running your code with either the window onload event or a DOMReady event.
There are two errors here. First, you need to put the SCRIPT tag after the element. Second, it's not .html, but .innerHTML. So here is the corrected code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="ssio"></div>
<script type="text/javascript">
var ssio = document.getElementById('ssio');
ssio.innerHTML = "it finally works!";
</script>
</body>
</html>
you can use something like this
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.onload= function(){
var ssio = document.getElementById('ssio');
ssio.html = "it finally works!";
}
</script>
</head>
<body>
<div id="ssio"></div>
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.
OK guys this is intreting,
I'm testing this page
http://static.nemesisdesign.net/demos/ie8-strange/test.html
on IE8 / windows XP.
This is the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-language" content="en">
<title>Test</title>
</head>
<body>
<div id="thisgivesmeanerror">test</div>
<script>
thisgivesmeanerror = 'test';
alert('this alert won\'t be fired on my IE8, what about yours?');
</script>
</body>
</html>
If I open this page with IE8 I get an error.
If I change the code of the script to:
<script>
// note that I added var prefix
var thisgivesmeanerror = 'test';
alert('this alert won\'t be fired on my IE8, what about yours?');
</script>
It works fine.
This happens only on IE 7/8, didn't test it on IE6.
What do you think?
Does it happen to you also? Or is it just my browser that has gone crazy?
Addition
You're saying that is just not using the var prefix that cause the error?
I'm sorry guys but you're wrong, you didn't take time to test the code.
I uploaded a test2 page
http://static.nemesisdesign.net/demos/ie8-strange/test2.html
with the follwing cocde
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-language" content="en">
<title>Test 2</title>
</head>
<body>
<div id="thisgivesmeanerror">test</div>
<script>
thisdoesntgiveanyerror = 'test';
alert('This alert will be fired correcly');
</script>
</body>
</html>
That works fine.
So what is actually causing the error? The variable name without the var prefix having the same name as the ID of the DIV element.
Isn't this strange?
May be the answers to this SO-question can help?
You should always precede your variable declarations with var to specify their scope or you might observe inconsistent behavior between different browsers.
use var to declare variables instead of just plugging their name
I'd say the JavaScript interpreter in IE is slightly stricter than on FireFox and others, meaning the script returns an error when it comes to the variable definition line. Putting var in will ensure it actually is a variable.
It's very good practice to declare all your variables with var
James
EDIT
I can't get to IE at the moment, but I can recommend you change your <script> tag to <script type="text/javascript">.