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.
Related
I have a difficult question to explain and I'm way out of my comfort zone as far as expertise in Javascript, TrueType, Angular and MxGraph are concerned... Hope to be able to explain.
I have an Angular component displaying and MxGraph. I was able to integrate MxGraph with Angular following this link (How to integrate mxGraph with Angular 4?). Even if I use Angular 7, the solution still works...
The graph is displayed correctly on the page and everything works fine, including my override of the function graphHandlerMouseUp, which I do with this code:
// Save the position of the mouse when releasing the button: used for
// detecting the target in a drag and drop
mx.graphHandlerMouseUp = mx.mxGraphHandler.prototype.mouseUp;
mx.mxGraphHandler.prototype.mouseUp = function( graph, evt ) {
currentdropX = evt.graphX;
currentdropY = evt.graphY;
mx.graphHandlerMouseUp.apply(this, arguments);
}
When I run this page for the first time, no problem happens.
Then through a button I call a page with another component (through routing). If from this page I go back to the first component (again through a routerlink) the page and the component with the MxGraph loads correctly, BUT when I use this function (i.e., release the mouse button).
It seems to me a recoursive problem, as when I put a console output like this:
// Save the position of the mouse when releasing the button: used for
// detecting the target in a drag and drop
mx.graphHandlerMouseUp = mx.mxGraphHandler.prototype.mouseUp;
mx.mxGraphHandler.prototype.mouseUp = function( graph, evt ) {
currentdropX = evt.graphX;
currentdropY = evt.graphY;
// INIFINTE LOOP HERE
console.log("Test");
mx.graphHandlerMouseUp.apply(this, arguments);
}
The "Test" is written a number of times which is continuously growing. Yet, if I understood, this was the correct way of overriding the function. Of course on the first load of the page, "Test" is displayed once. Passing to another component and then back on this it is displayed an "infinite" number of times (until I reach the: "ERROR RangeError: Maximum call stack size exceeded")...
I tried also to remove that override, and besides the obvious lack of the functionality, the very same problem happened to the function "mxDragSource", which is overridden with the same approach.
As I said: I'm not expert enough in javascript, truetype, MxGraph or Angular, so any hint, even if obvious, is very welcome!
Thanks!
The first time you run your code, you store mx library's mouseUp event in a variable and you assign a new function to mouseUp event in which you call the old mouseUpEvent.
The second time you run your code, you store your current mouseUp event (that you have modified) and you assign a function in which you call the old mouseUpEvent, which is the same you stored previously. There goes your recursion !
What you need to do is override the third-party function properly, so you don't execute your code twice.
How to do it ?
You can create a mixin and use this mixin in your componentB/ If you have no idea what is it and how to do it, please reproduce your problem in a stackblitz I'll be glad to help you to implement it.
so I am working on a really small chrome extension. There is a webpage and I want to click the buttons on this webpage. After I click all of them I want to click the next page button and keep doing the same thing.
I have no problem finding the buttons or the nextpagebutton. I am also able to do it using setInterval functions but I feel like it is kind of a hacky way to do this.
The below code is what I have so far
function clickButtons(){
var followButtons = $('.buttonClass');
var numberOfButtons = followButtons.length;
for(var i=0; i<numberOfButtons; i++){
followButtons[i].click();
}
setTimeout(nextPage, 500);
}
function nextPage(){
var nextPageBtn = $('.nextPageButtonClass');
nextPageBtn.click();
setTimeout(clickButtons,500);
}
so my question is
1. My for loop to click all the buttons is not working. Is there a better way to click every button class?
2. I need to call the second function after the first one. And when the second one is finished, I need to call the first one again and they must follow each other constantly. I tried setting a timeout and calling the other one ın both functions. But it is not working. How can I do this?
This code basically doesn't do anything. And I have been scratching my head. Sorry I am a huge javascript noob
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.
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?