A very short summary of "why" I need this. I am using PlUpload which lets you upload files using Ajax while providing you back events like percentage, completion, etc. You instantiate the object, then call the "init" (telling it on which ID to "link to") and then add all the event listeners. Since the page which needs the object is created at run time and cannot include JS, I simply created a DIV (which I will make invisible when everything works...) in the main page with the links inside.
This is the link:
<a id="browse" href="javascript:;">Browse</a>
If I click it directly, it works.
When I create the new subpage in real-time, I want the link to be called when the user clicks on an image, like this:
<img onclick="document.getElementById('browse').click(); return false;" src="whatever.jpg">
But it doesn't seem to be working. If I use any other "clickable link" rather than the "browse", it works, so there is no apparent error in the syntax.
Please note that if I modify the link like this:
<a id="browse" onclick="alert('Hello'); return false;" href="javascript:;">Browse</a>
Then I can see the "Hello" popup when I click on the image.
I am a beginner in JS/HTML, so if this is an obvious problem... Sorry ;)
Or if you know of a better solution to the general problem (without jQuery please), I would be grateful :)
This is the init part of the PlUpload:
var uploader = new plupload.Uploader({
browse_button: 'browse',
url: 'newupload.php',
});
uploader.init();
Embed the element inside element and you can click on the image which will do the same effect.
<img src="..."></img>
Instead of using the click() method try using this:
$('#browse').trigger("click");
this should trigger the event of the link instead of listening to the event and if you dont want to use jQuery you can simply do this:
document.getElementById('browse').onclick();
Happy coding!
Related
On a page (we'll call it: domain.com/subdirectory/page.html) I have a link like this:
Link
The new window opens perfectly, but the problem is, the pre-existing window gets redirected to {domain.com}/{subdirectory}/0 and I can't figure out why it's adding the 0 to the subdirectory and trying to go there.
I have tried moving the window.open to the onclick and making the href "void(0)" and even changed it to a span with an onclick, but I get the same results no matter which option I try. All I want is for the new window to pop up and for nothing to happen to the page you're already on.
The same thing happens in IE9 and in Chrome.
The reason I am using the window.open and not target="_blank" is because I also want to remove the menu and other stuff from that window to save space.
Answer Discovered
When I summarized the problem, I simplified my code too much as to make it impossible for anyone to answer (not by intention of course). I apologize for this.
Here's the actual window.open command (minus the URL): window.open('[hidden url]'_blank',height='400px',width='450px',location=0,menubar=0,resizable=0,status=0,titlebar=0,toolbar=0);
The problem was the "location=0". When I read a tutorial on window.open, it said to set this to 0 if I didn't want the URL shown. Personally, I didn't care, but I figured, the more real estate for information display the better. As it turns out, "location" is a URL and not a boolean property.
Once I removed the "location=0" it began functioning as expected/desired.
Thank you for trying to help.
Use an onclick and return false from the event handler:
Link
I also recommend separating your Javascript from your HTML. If you just have the one link you could do something like:
<a id="linkid" href="someurl" target="_blank">Link</a>
Then somewhere before your closing </body> tag and after that link tag:
<script>
document.getElementById('linkid').onclick = function(){
window.open('someurl','_blank');
return false;
}
</script>
You need to put it in an onclick event. You need to also add in return false; to stop the browser from following the link.
Link
jsFiddle of it working.
Here's another, slightly cleaner way to do it:
<a id="link" href="#">Link</a>
<script type="text/javascript">
var link = document.getElementById("link");
link.onclick = function() {
window.open('someurl','_blank');
return false;
}
</script>
I don't know your scenario, but this is probably the ideal way to do it:
<a target="_blank" href="someurl">Link</a>
Clean and simple, and it does the exact same thing.
When I summarized the problem, I simplified my code too much as to make it impossible for anyone to answer (not by intention of course). I apologize for this.
Here's the actual window.open command (minus the URL): window.open('[hidden url]'_blank',height='400px',width='450px',location=0,menubar=0,resizable=0,status=0,titlebar=0,toolbar=0);
The problem was the location=0. When I read a tutorial on window.open, it said to set this to 0 if I didn't want the URL shown. Personally, I didn't care, but I figured, the more real estate for information display the better. As it turns out, location is a URL and not a boolean property.
Once I removed the location=0 it began functioning as expected/desired.
You should try to learn JavaScript. Its really powerful and the basic things aren't very hard to learn.
There is an JavaScript object named window with an attribute (variable) called location. That is the URL of your page so, with the window.open(..., location = 0, ...); you were setting the URL of the page you wanted to open as http://the_page_you_are_calling_from_url/0.
So... yes, you were correct that location was the problem.
If you wish, take a look at Mozilla window API
I have an
<a href= ./index2.html>
button in my index.html but now I want to change it so it also calls a function when it gets clicked, so I tried
<a href="./index2.html;javascript:randomFunction();"
but it doesn't work, how can I make an element make switch html page and call a function at once? Thanks!!
Assuming that you want to run the JS on the current page:
The quick and dirty method that you shouldn't use is to add an onclick attribute.
<a href="index2.html" onclick="randomFunction()">
The clean approach is to bind an event handler with JS.
reference_to_anchor.addEventListener('click', randomFunction);
(See the documentation linked above for details, and for work arounds to lack of support in older versions of IE).
(See also Progressive Enhancement and Unobtrusive JavaScript).
This will run the JavaScript on the page on which the link appears before the link is followed.
If, on the other hand, you want the JavaScript to run on the destination page:
You have a rather more complicated problem to deal with.
A new page means a new execution environment. Client side code on one page can't trigger client side code on the next.
I'd approach that problem by having a server side script generate index2 and include <script>randomFunction();</script> if a particular query string was present on the URI.
make it call the desired function via onclick event, at the end of the function do a:
window.location=url;
or if you want to change page and then call a function on the new one use a normal a tag to go to the new page, then:
window.onload=function(){
//do something
}
You can use onclick="javascript:randomFunction()"
For instance:
<a href="./index2.html" onclick="randomFunction()">
use onclick event to call a function
you can use onclick event of javascript.
function randomFunction(){
// do needfull code here.
}
For some reason IE won't trigger an onclick event. I have a link in my webpage which should renew a captcha image, but no matter what I try, the onclick event won't trigger. I even tried this to test the onclick event:
<a href="#" id="rc" onclick='alert("test"); return false;'>change image</a>
But nothing happened. I also tried to add the onclick event using js in the window.onload event, same result. All other javascript scripts do work, so js is working. Does anyone has any idea why this doesn't work?
by the way, the event doesn't work in any version of IE, and it does work in any other browser.
Edit: If you want to see the full source, go to: http://www.rosegardenvoorburg.nl/Contact?stackoverflow
The page is in Dutch, but the sourcecode is (of course) HTML, so you must be able to understand that.
edit2: I've found a solution myself, and you're never gonna believe what's wrong:
When I'm logged in to the control panel, a div is added at the top of the page, similar to the one shown in ie7 (which tells you you're browser is too old). However, when I don't add a border to that div, the captcha refresh button doesn't work. This doesn't make any sense at all, but at least I've found a solution...
Try with the below:
<a href="javascript:void(0);" id="rc" onclick='alert("test"); return false;'>change image</a>
Also have a look at Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?
You are doing it in the wrong order
FIRST add the onload, THEN change the source
var cImg;
function renewCaptcha(){
cImg = new Image();
cImg.onload=function(){document.getElementById("captcha").src = cImg.src;};
cImg.src='/Img/captcha/securimage_show.php?' + Math.random();
}
Few tips to ponder!
check if javascript:alert("test") on your ie address bar pops up the message.
Also check and make sure that javascript option is not turned off.
You may also want to reset your ie settings and see if it work.
Also try to see if same works on your fellow colleague's computer.
I'm using the jQuery dialog plugin.
The dialog div is set up (but not opened) on page load:
$(document).ready(function(){
$('#foo').dialog({autoOpen:false});
});
Then a hyperlink is supposed to open the dialog:
Show dialogue box
But this opens the dialog then a fraction later redirects to a page with the URL javascript:$('#foo').dialog('open');!
I have tried returning false:
Show dialogue box
But then the link doesn't respond at all when I click on it.
I know this must be to do with one of JavaScript's infamous subtleties but I can't work it out.
Can anyone help?
Then a hyperlink is supposed to open the dialog:
Show dialogue box
But this opens the dialog then a fraction later redirects to a page with the URL javascript:$('#foo').dialog('open');!
That shouldn't be happening. The pseudo-protocol javascript: doesn't involve a page load, and certainly not one via HTTP. I don't recommend it (I'd use jQuery's click handler instead), but it should work.
I have tried returning false:
...
But then the link doesn't respond at all when I click on it.
That also shouldn't be happening.
Your code as quoted is fine (works here, for instance: http://jsbin.com/inixa5), so the problem must lie in some other part of the page.
Update: Okay, that's weird, IE6 and IE7 didn't like that; I think it's because dialog returns a value. You can get around that either by wrapping up your call to open the dialog in a function and doesn't explicitly return anything:
Click Me
<script>
$("#foo").dialog({autoOpen: false});
function showDialog(selector) {
$(selector).dialog('open');
}
</script>
Or (and this is mega-hacky) by making sure the last expression in the javascript: block is undefined:
Click Me
<script>
$("#foo").dialog({autoOpen: false});
</script>
Or by using onclick:
Click Me
<script>
$("#foo").dialog({autoOpen: false});
</script>
But in any case, strongly recommend hooking things up with a DOM2 style event handler:
<a href="#" name='openSesame'>Click Me</a>
<script>
// This _can_ be immediately after the anchor, but I'd put it in
// a separate, since .js file for the page that you load just before
// the closing body tag.
$("#foo").dialog({autoOpen: false});
$("a[name=openSesame]").click(function() {
$("#foo").dialog('open');
return false;
});
</script>
Live example (Obviously, you can use any selector that makes sense, you don't have to give the anchor a name [or id].)
One of the nice things about this is that you can then have the anchor take the user somewhere meaningful and/or useful if JavaScript is disabled (something called progressive enhancement).
Change the link to:
<a href="javascript:void(0)" onclick="$('#foo').dialog('open')">
Show dialogue box
</a>
Best avoid putting javascript in the href.
Even better would be giving it a class and than adding a click event to it through jquery.
My doubt is actually pretty simple. I have an image of a V890 server and on mouseover of that image i want to call a lightbox,which shows the specs of that server.
I cant get the code to work. Also never used 'onmouseover' function before so dunno how to write the code.
I have found a useful lightbox called 'lightwondow'.
<strong>Monster Fixed Page</strong> - This page is just plain to big for the browser window unless you maximize a 30 inch monitor.
I need to add a mouseover to this code.
Any help would be appreciated.
Thanks.
Anand.
i think the lightbox is usually load at the onclick event, you have to change that to be able to lauch it onmouseover.
Open the file lightbox.js an change the line:
anchor.onclick = function () {myLightbox.start(this); return false;}
with:
anchor.onmouseover= function () {myLightbox.start(this); return false;}
By the way i think you ahve to add the rel attribute to the anchor:
rel="lightbox"
HTH!