I have a method that is instantiated on page load. The method fires two events, window.onload and image.onclick. The problem is only one of the event works at any given time (i.e.: if I comment image.onclick method, window.onload method works). How do i get both to work?
This works fine in Firefox (Mozilla) but not in IE
Example
test.method = function()
{
window.onload = this.doSomeWork;
for (i = 0; i < images.length; i++) {
var image = images[i];
image.onclick = this.imageClickEvent;
}
}
The problem us that you can only have one onload event.
I recommend that yuu should try the addEvent method found here:
http://ejohn.org/projects/flexible-javascript-events/
There's not really enough information in the question to figure out what's going wrong, but things to look at include:
is the code in the doSomeWork() or imageClickEvent() expecting to receive a ‘this’ that points to anything in particular? Because it won't, when you peel a method off its owner object to assign to an event handler.
is there another method writing to window.onload, or image.onclick, that you might be overriding?
after you fire the test.method on page load, you overwrite your window.onload with a new value: this.dosomework, so within the time frame of the body load, you call the first function, then immidiately overwrite, then second function takes over, and carries out... did you try to push the window.onload statement way to the bottom of the test.method? my guess if the function block is too long, the second window.onload is never gonna be carried out, because the window has already finished loading, its milliseconds, but thats all it takes
apparently in firefox the function is carried out before it gets overwritten, or maybe appeneded to the current onload, not sure about technicalities. again, try to push onload to the bottom and see what happens
you should not really call an onload function within any other function that is called after body load, because no matter how careful you are you cannot depend on the fact that the loading time frame is long enough to contain both events, you should append to window.onload before the body tag is called (or finished) to make sure the event is caught.
Look at the code on a page with Firefox 3. Then open the Firefox Error Console (Ctrl Shift J) to see which line is breaking. Then update your question with the new info.
Perhaps you should be adding an event listener here, and not trying to capture window.onload?
Related
I'm writing because I need to solve this problem. Until recently, the code was working just fine and I've been using it for quite a long time, but yesterday, when I was testing the page, everything changed.
The idea is click on an image with an anchor tag that is going to redirect the user to another page and in doing so, a confirm dialog box should pop up to ask the person whether they want that. I haven't changed anything in the code, so I'm not getting what's happening. Here's the code:
// **JavaScript**
function confPopUp() {
for (var i = 0; i < 6; i++) {
document.getElementsByClassName("redPic")[i].onclick = redConf;
}
}
function redConf() {
var conf = confirm(
"You're about to be redirected to our social media page. Do you accept?"
);
if (conf) {
return true;
} else {
return false;
}
}
window.onclick = confPopUp;
<!-- **HTML** //THERE ARE 5 MORE ELEMENTS WITH THE CLASS NAME "redPic". -->
<img class="redPic" src="images/instagramLogo.png" alt="Instagram Logo">
The problem is that I'm testing it, right now, and it's not working properly, a the day before yesterday it was working fine, only one click and now, it's working as double-click.
I'd appreciate your help, thanks.
When the page first loads, you're setting a single event handler:
window.onclick=confPopUp;
Later, when there's a click anywhere in the window, that runs your confPopUp function, which hooks up the click handlers on the .redPic elements.
Later, if you click a .redPic element, your redConf function runs.
If you want the .redPic elements to have their handlers hooked up on page load, call confPopUp instead of making it a click handler. Change:
window.onclick=confPopUp;
to
confPopUp();
Be sure this code is running after the .redPic elements exist. There are several ways to do that, pick the one that suits your target browsers and preference:
Put the code in a script tag at the end of the document, just before the closing </body> tag. This works with all browsers, no matter how old.
In even vaguely-modern browsers, call confPopUp from a DOMContentLoaded event handler:
document.addEventListener("DOMContentLoaded", confPopUp);
In modern browsers, add a defer attribute to your script tag.
In modern browsers, add type="module" to your script tag to make your script a module. That defers it just like defer does, and puts it in strict mode (which is a good idea), and put the code in it in module scope rather than global scope (which is really crowded).
So why did it seem to work yesterday? Presumably, because you were clicking the window without realizing it, triggering that initial event handler that hooked up the .redPic elements. Today it just happened that you didn't click the window before trying to click a .redPic element, so you discovered this problem. The problem's been there all along.
I am having a problem on a WordPress site. I have a function which slides down a certain <div>. It is:
jQuery(function($){
$(document).on('click','.tb_usertask_title',function(){
var title = $(this);
var key = title.data('key');
var msg = $('#tb_msg_'+key);
msg.slideDown('fast');
}
});
After executing this function, the <div> slides up again immediately. I think this might be due another script, but I have absolutely no idea how to find which function does this. Is there any way of finding this out? Things I have tried:
Adding breakpoints in my function. This showed me that the folding up happened outside my function.
Using Firebug to break on HTML change. This however redirected to jquery.js, but I did not know how to find out which function triggered the jQuery.
Using Firebug to list the events of my onclick event, but this only showed my function.
These didn't work for me. I also searched for a way to do a function backtrace in Firebug, but without any success.
Use unminified version of jQuery (just for the test and because its more easy to debug).
Look for the dispatch function.
Put a breakpoint in the function where there is an apply usage.
After the code breaks use the F11 to navigate to the binding function.
I have a function which is called on a click of a button and it takes a long time to create and append to the DOM some elements so I would like to display a PopupPanel with a "loading" icon while the function finished what it has to do. Please note that my function does not make a call to the server, it only creates some elements in the UI which take a long time to compute, so I don't have an onSuccess() event or a callback function to work with.
So I have my PopupPanel:
pp = new PopupPanel();
pp.setTitle("loading....");
pp.setGlassEnabled(true);
Then on the click handler I have the following code:
public void onClick(ClickEvent event) {
pp.show();
functionWhichTakesaLongTimeToExecute();
pp.hide();
}
Since JavaScript is single-threaded I was expecting that the PopUp will appear, then functionWhichTakesaLongTimeToExecute() executes and then the PopUp to be hidden but what happens is that functionWhichTakesaLongTimeToExecute() executes first, taking a long time to append the elements to the DOM, and only after it has finished doing its job is the PopUp shown and then hidden.
It is as if like the code was:
functionWhichTakesaLongTimeToExecute();
pp.show();
pp.hide();
What bothers me even more is that if I add a Window.alert("test") after pp.show() this will break the flow until the OK button in the alert is pressd and this causes the PopUp to appear before the alert and before functionWhichTakesaLongTimeToExecute() is called.
So the following code works as expected:
pp.show();
Window.alert("test");
functionWhichTakesaLongTimeToExecute();
pp.hide();
Can somebody please explain to me why the PopUp is not displayed before the functionWhichTakesaLongTimeToExecute() is called but instead it "waits" for functionWhichTakesaLongTimeToExecute() to execute and only after that it gets to be displayed and why adding a Window.alert("test") causes it to be displayed properly?
PS: I have tested the code in both IE8 and Chrome and the behavior is the same.
This is how you can do it:
pp.show();
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
#Override
public void execute() {
functionWhichTakesaLongTimeToExecute();
pp.hide();
}
});
I explain it here: GWT: Timer and Scheduler Classes
I have had some issues while using setGlassEnabled as well. Can you check by removing the setGlassEnabled(true) line from your code and see if it works?
Also one more thing that I happened to note is that, you have not added any widgets to your PopupPanel. In the source code for PopupPanel it is mentioned that you mustattach a child widget to your PopupPanel object before show is called.
http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/client/ui/PopupPanel.java
Do try both of these and let me know if either of it works.
So, I'm working on a rich-text editor using contenteditable.
I have a function called "dveditor". I do var editor = new dveditor(); pass in some settings, and it replaces the content of a div with stuff.
But it runs twice.
If I remove the editor = new editor(); It does not run at all.
But if I call it once, it's run twice. I replace the code in the function with only an alert and same thing happens. So the function is not calling itself.
Any ideas what might be wrong? I'm kinda clueless. At least when I know that I'm only calling it once. I mean, if I remove the call to it, it stops completely.
Thanks in advance.
My website consists of two frames, let's say upperFrame and lowerFrame.
On the document ready of the page in lowerFrame, it access one of textbox located on the page of upperFrame.
Sometimes, since the upperFrame do NOT complete its loading, lowerFrame get the undefined while it access the upperFrame.
Let me know if there are Any solutions/checking to prevent this problem?
How about updating 2 vars in the parent of both frames: topReady and bottomReady. At the top and at the lower frames you set them to call a function that checks if both of them are true. If not it sets the appropriate var to true and once the 2nd frame will be calling the function it will trigger whatever action you want to.
Edit:
Another option is to try and use
$(window.parent.upperFrame).ready(function(){
alert('upperFrame loaded')
});
try jQuery .load() function
The load event is sent to an element
when it and all sub-elements have
been completely loaded. This event can be sent to any element associated
with a URL: images, scripts, frames, iframes, and the window
object.
Here is the sample code
Edited:
put code below in document ready of lower iframe.
$(function(){
$('#UpperIframeID', window.parent.document).load(function(){
var valueOFTextbox = (this).contents().find("#textboxID").val();
});
});
</script>
If it doesn't work in IE then put conditional statement and for IE use .ready() function.