TinyMCE remains hidden (uvw-dialog-open) - javascript

Ok i've developed a nice tinymce-solution, where i create and destroy all the tinymce-instances programmatically through js - so, i know it is maybe not the daily-usage of a tinymce implementation - but basically it works like a charm.
Now, before i will give you specific example code - i will explain my strange issue: A friend of me is an extreme power-user of the online-tool i made and he is creating/destroying hundrets of tinymce-instances during the day...
Sometimes, after hours of work, he has the behavior, that tinymce won't show up when he hit "edit"-button. I never made it, to reproduce that on my own - but one day, in a teamviewer-session, i was able to have a look into his screen and page (with firebug), when the error already happened.
So, badly i was not able to make a full debugging through the javascript-code (because when you hit one times f5 in this situation, the error disappears and it will take some other hours to get it again) -> i realized, that, when the error was happened -> everything in the tinyMCE-object itself seems ok -> also everything in the DOM-rendering seems ok -> BUT, from some strange css-import-file, there was suddenly a definition like this:
html.uvw-dialog-open object, html.uvw-dialog-open iframe, html.uvw-dialog-open embed {
visibility: hidden;
}
This is causing that a main-panel of tinymce won't show and nothing of tinymce is visible anymore.. killing and recreating of the instance won't fix the bug in this moment, you must press f5 and after a reload, you even can't find this css-definition again (or, at least, i was not able over teamviewer and his shitty, small laptop)
So, the only thing that came in mind was an ugly hack in my own css, telling this:
html.uvw-dialog-open object, html.uvw-dialog-open iframe, html.uvw-dialog-open embed {
visibility: visible !important;
}
And, since then... it was quite for weeks -> but today, my friend calls me again, telling me, that he can't see tinymce, AGAIN.. i was almost in tears, you can imagine :D
Ok.. after writing and re-reading all these lines -> i realize that my fix won't work... both are the same definitions and if they appear on the same level (file, not inline).. probably last-match-wins i guess, what would be the newly, lazy loaded tinymce-file.. so it will definitly be better, to make an inline visibility:visible; over the init_instance_callback of tinymce...
But, in my desperation, i thought i will write everything down here on stackoverflow -> maybe someone knows the real cause of this issue and.. you guys are the most awesome devs out there i know :D

Jebbie,
Thoughts more than a definitive answer ...
Sounds like a memory leak issue due to lots of javascript/DOM activity in a long-lifed page.
You've probably done nothing wrong and you're unlikely to track down the actual cause, however certain measures are available to you :
Try making your tinymce instances reusable rather that destroying and creating new every time.
Periodically have the page request a re-serve - it may be a challenge to reproduce the entire document state - DOM and javascript environment - in the re-served page.
Lots of work and no guarantees I'm afriad.

Related

Why is some of my JQuery loading right away, and other parts are taking over ten minutes to load on a page (or never loading)?

I'm developing a web-page, basically from scratch. I have a .html file, .css file, and .js file that includes only JQuery. I am only running this locally on my own machine, and for some reason, now only some of my Javascript loads. For instance, I have some hidden s that when hovered over, they are displayed with JQuery calls. These seem to work fine as they always have. I have a scrolling sidebar that has hidden sub-menu items, and this usually loads fine as well. I have a hidden div that displays a definition list on a button click, and when you hover over the , the should slideDown. If I wait about 10-15 minutes this will start working. But obviously that is a problem.
Also, in Chrome's 'Developer Tools' I don't see any errors under the sources tab. I checked the 'Pause on caught exceptions' box, (this is where my knowledge ceases) and in jquery.min.js:formatted, it pauses and highlights e.querySelectorAll("*,:x"), and when I resume, it does the same thing here, c.call(e, "[s!='']:x"),
Hoping someone can not only answer my question, but explain what's going on here in the caught exceptions. By the way, I did not write jquery.min.js:formatted.
Thanks in advance!
I copy/pasted my link to fontawesome and the JQuery library is up to date. Someone said something about the possibility of an infinite loop, but I'm not keen on what that is, I'll look into it.
Showed some code above. Not sure how helpful it is.
My expected output would obviously be for my JQuery to work, but it is not.
No error messages in the Console.
I actually figured it out, sorry I can't post working examples bc it's proprietary.
I was missing a closing } bracket...
But the way I figured this out was through opening up Chrome's 'Developer Tools' and switching into the 'Sources' tab.
- From here, underneath the stop sign with a pause symbol, it displayed exceptions in the code where something breaks.
This was much easier than scanning the code with my eyes. Sorry if this was a basic answer, it really helped me a lot.

How important is JavaScript efficiency

So, I'm working with a lot of JavaScript. Because I still have my student license, I'm using PhpStorm to develop. Okay, so I basically have to use JavaScript for almost everything (don't say this is bad, this isn't my idea). This means loading items, filling a table, opening a dialog to add a new item, opening a dialog to edit an item. Everything has to work without page refreshes or other pages. However, PhpStorm always say something about jQuery inefficiency. I kind of wonder how important it is.
For example,
$('#add-item .footer BUTTON')
PhpStorm says this is inefficient. I know I can rewrite it to
$('#add-item').find('footer').find('BUTTON')
Also, when I use $('#add-item'), I can cache it like:
var addItemElem = $('#add-item');
The question is, how important is this actually? Will you really experience a lot of difference? Just so you know, this is for a backend admin panel and not for a website which customers can see.
If the answer is that it's really important, at which rate should I 'cache' elements? I'd assume having a lot of variables isn't really good either (but I can be wrong at that).
And if it's really important, does it matter when I use something like this:
$(document).on('click', '#add-item .footer BUTTON', function(){/*...*/});
Or how can I solve it then?

console.trace or stack trace to pinpiont the source of a bug in javascript?

I've used some complex javascript (jQuery) to create an editor of sorts where users can drag, drop and resize different divs. The problem is that sometimes, for seemingly no reason, divs that contain text suddenly get "frozen" or "stuck" on the containing div and cannot be dragged around, despite still maintaining a class list that includes ui-draggable, right after I mention:
$this.draggable( "option", "disabled", false );
So technically there's no reason why the dragging should stop. I used Ctrl+Shift+K to use the web console of firebug but when I drag things around that doesn't trigger anything on the console, and the fact that I can't drag one particular around also doesn't show anything up. I've tried profiling but these things just tell how much time is spent in a certain script. How can I possibly figure out why an element's drag just gets turned off and cannot be turned on again? I can't put breakpoints because I don't know where in the code something's going wrong. It almost seems arbitrary. Is there any way to to simply see what's happening on the stack in realtime?
Edit
In Firebug we can see an entire list of properties for an object, much more than what fits in this little screenshot below. Does anyone have any idea which object properties I should concerned with, that pertain to an issue like mine? I'm really lost on how to diagnose the problem.
#Allendar - too many bindings was indeed the issue. I followed up with this question: Am I binding events over and over again in this jQuery code? and with the help of Visual Event, I got rid of bindings that I was doing over and over again, and then it worked fine.

Firebug can't choose script

I messed something up. In firebug I select the scipts tab, then click on inline and select the script I would like to step through with some break points. I am reasonably sure I have done this with the script before.
Now after removing and reinstalling firebug, clearing cache etc., scratching my head, when I select any of the scripts, the script briefly shows up and then immediately drops back to the HTML page that includes the script. If I'm quick, when I select the script I can scroll down and when I stop, it scrolls up, on it's own, line by line and when it reaches the top it goes back to the HTML page that has included the script
So from the screenshot, there are some js scripts below (cropped them out, didn't want to share the names). I've tried checking and un-checking inline with now result. I have a feeling it's related to my swiss cheese knowledge of js and web programming.
I hate to answer my own question, but I don't want to leave this post incomplete, so feel to improve on the answer. I don't plan to give myself the check unless there appears to be no further activity. I found a bug fix at issue #5134, and installed the 1.10.0a6 update found here and one last thing, the auto-scrolling stopped when I toggled the "Break on next" button pictured below. (the yellow pause button below the firebug.
Im not sure how can further can I assist without having to see the live site or some codes that may point to some explanation. However, here are some tricks that might help.
I use FirefoxAurora that comes with a tab called Changes. or maybe I install the Firebug extension somewhere. I forgot. But googling it up, this may be it Firediff.
The tab looks like the image attached and it will Diff the changes inside a page and then you might have a clue what's going on. It's detect element/attributes changes (not sure about inline script).
P/s: Somehow it doesn't work now, forgot how I've tested before. The url above have more explanation on this. But do check it out. Its been useful to me last time.

Eclipse keeps jumping to the start of the document

I have been using Eclipse for some weeks now and I start getting used to it.
However, one thing really annoys me:
When editing JavaScript (I didn't try any other language yet), the editor window keeps jumping to the start of the document I am editing.
This mostly happens when the code currently contains syntax errors and mostly while / after deleting lines.
Especially constructs like { = and sometimes unterminated strings / comments seem to cause this problem.
When it happens, only the view scrolls to the top of the document - the cursor stays where it was before the "jump" occurred.
Anyone having an idea on how to fix this?
I believe the problem described above is related to this bug:
https://bugs.eclipse.org/bugs/show_bug.cgi?id=318095
The work around is to disable the "Link with Editor" option from the Project Explorer. Which is to say make sure the icon with two arrows facing in opposite directions at the top of the file tree is not enabled. Disabling this option resolved the issue for me.
Looks like a problem with the implementation of the JavaScript editor. Most probably the jump occurs when the JavaScript-Parser is not able to parse your document and throws an exception. You might consider to report a bug to the eclipse project (maybe there is already such a report?).
As a workaround you might consider to adapt your way of typing the code a bit. Try to write the code in a way that does not confuse the parser (for example it might help to immediately close a newly created comment and THEN write the content instead of open the comment, write the content and finally close the commend). Same for strings, blocks ...
I am having the same problem. I had this line of code in my file and I could consistently reproduce the issue:
$.preload(preloadImages
, {
base:assetsUrl+'b/images/',
ext:'.png'
});
I changed it to the following and I no longer have the problem.
$.preload(preloadImages, {
base:assetsUrl+'b/images/',
ext:'.png'
});
I get this Phenomenon, when i'm editing in a Java-Class while still residing in a Debug-Process. The Debugger recognises the Change and reevaluates the Code and jumps back in order to be able to reexecute only the changed Code.
Hii i got solution goto
Window->Preferences->search autosave
and disble it and hit apply and close button.
this worked for me !

Categories