In Javascript, I keep seeing posts about how one should not try to use onBeforeUnload or unload() in jQuery, citing security issues. Could someone explain in greater detail what these issues are?
On that note, I have also found that neither of these work in any browser I've tried. Even something simple like this:
$(window).unload(function(){
alert('hello');
});
Is this intentional, or no?
You might have mixed it up with the issues concerning usability??
I use it as native js
window.onunload = function(e) {
return 'Dialog text here.';
};
You con't use an Alert inside your function for simple raison that onunload is a pop-up so the display your text (HELLO) just but it in the return or try this:
window.addEventListener("beforeunload", function(event) {
event.returnValue = 'hello';
});
Related
Need your help on this.
<A HREF=javascript:printDoc()>Link</A>
function printDoc()
{
window.print();
}
I am using a hyperlink to call a JavaScript function that prints the page. It works perfectly on Chrome, but not on Internet Explorer.
What can be the possible solution?
this kind of function calls is deprecated. Probably use
Link
Inline javascript in general should be avoided, you'd be better of with something like
Link
var link = document.getElementById('someButton');
link.addEventListener('click', function (e) {
e.preventDefault();
printDoc();
});
I've put in a call to preventDefault() there but realistically if your using a <a> tag for something that isn't a link you should consider a button or span
Which is preferable, assuming we don't care about people who don't have JavaScript enabled?
Or
Is there any difference?
Or there any other ways I'm missing besides attaching an event to the anchor element with a JavaScript library?
The nice thing about onclick is you can have the link gracefully handle browsers with javascript disabled.
For example, the photo link below will work whether or not javascript is enabled in the browser:
foobar
it's better to use the onclick because that's the way the things should be.
The javascript: was somekind of hackish way to simulate the onclick.
Also I advice you to do some non intrusive Javascript as much as possible, it make the code more easy to read and more maintainable!
href="#" has a number of bad side effects such as showing # in the browser footer as the destination URL, and if the user has javascript disabled it will add a # at the end of their URL when they click the link.
The best method IMHO is to attach the handler to the link in your code, and not in the HTML.
var e = document.getElementById("#myLink");
e.onclick = executeSomething;
This is essentially the pattern you'd want to follow:
Write your HTML markup
Attach event handlers from JavaScript
This is one way:
<a id="link1" href="#">Something</a>
<script type="text/javascript">
// get a reference to the A element
var link1 = document.getElementById("link1");
// attach event
link1.onclick = function(e) { return myHandler(e); };
// your handler
function myHandler(e) {
// do whatever
// prevent execution of the a href
return false;
}
</script>
Others have mentioned jQuery, which is much more robust and cross-browser compatible.
Best practice would be to completely separate your javascript from your mark up. Here's an example using jQuery.
<script type="text/javascript">
$(function() {
$('a#someLink').click( function() {
doSomething();
return false;
});
});
</script>
...
some text
Yes I would agree to use onclick and leave the href completely out of the anchor tag... Don't know which you prefer to do but I like to keep the 'return false' statement inside by function as well.
The main difference is that:
The browser assume by default the href attribute is a string (target url)
The browser knows that in a onclick attribute this is some javascript
That's why some guys specify to the browser "hey, interpret javascript when you read the href attribute for this hyperlink" by doing ...
To answer the question, that's the difference!
OTOH what's the best practice when using javascript events is another story, but most of the points have been made by others here!
Thanks
How would I change the below to jquery? It works in IE but not Firefox so I am hoping if I change it to jquery it will work for both.
THIS
function subform() {
if (parent.option_view.document.vform_.dispatchEvent('onsubmit') != false) {
parent.option_view.document.vform_.submit();
}
}
AND THIS
img class="save_bttn" src="/images/save.gif" height="16" width="16" border="0" onclick="subform()"
IS INSIDE ONE CHILD FRAME
and
It is trying to init in another child frame that is why its going to parent option_view.
*note: I was not trying to scream with the caps I was just trying to show where talking was and where the javascript is
Maybe:
$("#vform_").submit();
?
fireEvent is a IE only feature. I don't think including JQuery just to fix this is the best solution. (why add more download time/process time if you can avoid it). Switch to using The W3C equivalent: dispatchEvent.
Take a look at http://www.howtocreate.co.uk/tutorials/javascript/domevents on how to use EventListener...
There are two ways I would suggest you do this, the first with jquery, the second without:
$('.save_bttn').bind('click', function(e) {
if (parent.option_view.document.vform_.dispatchEvent('onsubmit') != false) {
parent.option_view.document.vform_.submit();
}
});
The other is:
<img class="save_bttn" id='somebutton' ... />
document.getElementById('somebutton').onclick = function(e) {
// if(...)
}
I would think that your using this subform() function means that there is something flawed in your approach. I am not certain why you have needed dispatchEvent, as you could have just submitted directly from the onclick event handler, but these should work, or, at least, be close enough so that someone here can correct me. :)
I try to put an event on document loading but not works...
I'd put an alert box, but never seen it...
document.addEventListener ("load",initEventHandlers,false);
function initEventHandlers ()
{
document.getElementbyId ('croixzoom').addEventListener ('click',fermezoom,false);
alert ("Hello, i\'m a eventHAndlers")
}
function fermezoom (){
document.getElementbyId ('zoom').style.visibility = 'hidden';
document.getElementbyId ('fondzoom').style.visibility = 'hidden';
}
Thanks for you help
The document does not have an onload / load event, try attaching it to 'window':
window.addEventListener ("load",initEventHandlers,false);
What about:
window.onload = initEventHandlers;
This will work for you.
Updated
As a recomendation, not a direct solution to your problem:
You might want to consider using a framework if you haven't already.
Maybe look at jQuery which should take a lot of the pain out of what you are trying to do.
Then you could wrap it up in syntax like:
$(document).ready(function() {
// put all your jQuery goodness in here.
});
You might not want the additional layer on top of Javascript though.
I hope that helps!
HI,
I am developing a web page using asp.net.
I am using some links in my web page. For that I have used some code like this.
Test
and in the ChangeLoc() method I have written __doPostBack event.
This works fine in IE7 installed in my machine. But in IE6 in another machine it does not invoke the __doPostBack event.
Edit
When I change the void(0) in href it works fine.
I would like to know whether it is a bug with IE or a JavaScript problem.
function ChangeLoc( param, arg )
{
__doPostBack ( param, arg )
}
href and onclick both get fired when you click an element, you are overwriting the onclick event with void()
change to
test
or with jQuery.
$(function(){
$("#linkId").click(function(event){
ChangeLoc();
event.preventDefault();
});
});
Do you get an error? If so, what error do you get in IE6? Can you post the code for ChangeLoc()? Also, try changing your markup to the following and see if you get the same result:
Test
Edit: removed 'javascript:' from the onclick
You can also use unobtrusive javascript syntax:
test
<script type="text/javascript">
document.getElementById("chngLink").onclick = function(e) {
if (e && e.preventDefault) {
e.preventDefault();
}
ChangeLoc('TEST','');
return false;
};
</script>
it is not good to use <a>-element for javascript functions call.
Use styled <span onclick="my_function()" class="looks_like_hyperlink">...</span>