TinyMCE Unable to get property 'setContent' of undefined or null reference - javascript

I know this topic has been covered many times here but no matter which approach I take I either get a error such as "Unable to get property 'setContent' of undefined or null reference" or the line executes but nothing happens.
Here's what I know.
tinymce initializes and is a valid object.
The html variable has the propper HTML which it get from a parent window.
jQuery is loaded and functional.
In addition to the code below I have also tried.
tinyMCE.activeEditor.setContent(html);
tinymce.editors[0].setContent(html);
$('textarea#XRMeditor').val(html); * Before initialization
I have tried all methods before and after tinymce intializes (just in case).
<!DOCTYPE html>
<html>
<head>
<script src="sage_jquery.min.js" type="text/javascript"></script>
<script src="tinymce_/tinymce.min.js" type="text/javascript"></script>
<script>
var html = window.parent.document.getElementById("descriptionIFrame").contentDocument.getElementsByTagName('body')[0].innerHTML;
debugger;
//$('textarea#XRMeditor').val(html);
tinymce.init({
selector: 'textarea#XRMeditor'
});
tinymce.get('XRMeditor').setContent(html);
</script>
</head>
<body>
<textarea id="XRMeditor">Easy (and free!) You should check out our premium features.</textarea>
</body>
</html>

I suspect this issue is that you are trying to talk to TinyMCE before its initialized on the page.
Your get() call is in the head of your page and I would doubt that when the browser processes your script that TinyMCE has initialized. You can use an "init" handler to delay when this call happens:
tinyMCE.init({
//your regular init parameters here...
setup: function(editor) {
editor.on('init', function() {
//load your content here!
tinymce.activeEditor.setContent(html);
//or
tinymce.editors[0].setContent(html);
});
}
});

Related

run internal script after external script has been loaded via defer

It is well known to everyone that using defer is an efficient way to minimize the loading time of a website.
In my project, I am using Vue (included in the header using defer) and in a circumstance, I want to use a component that is created by another person. When I try to do Vue.Component(...) in the body of the HTML, it says Vue is undefined. It seems that my script in the body is running before the external script has been loaded. Is there any way to fix this issue?
I tried to do document.onload, but the function itself is not working.
PS: Just to be clear, the external script is referring to my js file where Vue is defined and I am not talking about the third party library at all.
Instead of document.onload you need to use window.onload or document.body.onload.
But an even better way is to wait for the load event on <script> tag:
<html>
<head>
<script id="vue-script" src="vue.js" charset="utf-8" defer></script>
</head>
<body>
<script type="text/javascript">
function onVueLoaded() {
Vue.render();
}
if ('Vue' in window) {
onVueLoaded();
} else {
var script = document.getElementById('vue-script');
script.addEventListener('load', onVueLoaded);
script.addEventListener('error', () => console.warn('failed to load Vue.js'));
}
</script>
</body>
</html>
Here I also added a handler for the error event if you wanted to explicitly handle loading errors.

Sometimes jQuery plugin is not loaded

I am using jQuery a lot, but sometimes I get stuck because my browser cannot see the jQuery library, or maybe loads the library after running the my JavaScript code.
Pseudo-code to explain my question:
<html>
<head>
I always load CSS here
I always load jquery here
</head>
<body>
<p class="link-style3"><span id="my_tag"><span>Bize Hemen Yazın</span></span></p>
<script>
$(function() {
$('#my_tag').click(function(e) {
alert('tesrt');
});
});
</script>
</body>
</html>
I always put my stuff in the order like below, but this doesn't work now. When I click the <span id="my_tag">, it doesn't do anything, and doesn't return any error.
what should I do?
Here is the entire code jsfiddle
Try to avoid some syntax errors like(suggestable only)
<script type="text/javascript">
$(function() {
$('#my_tag').click(function() {
alert('tesrt');
});
})
</script>
and put your code at the top after you load the js files
A few things you can do:
inspect your document (network pane in devtools) to see if everything
is loading correctly
Move your scripts to the bottom of the page
use $(document).ready(function(){ ... });

sammy.js get handler hiding errors

While using sammy.js library of versions 0.7.4 (also 0.7.1) it was found that if some error happens during execution of get handler function, nothing is printed to console.
For example in the following code snippet nothing will be printed to console though no function with name notExistingFunction exists:
<html>
<head>
...
<script src="/path/to/jquery-1.5.2.min.js"></script>
<script src="/path/to/sammy-0.7.4.min.js"></script>
...
</head>
<body>
<script>
$(document).ready(function() {
var sammy = Sammy(function() {
this.get('#someAnchor', function() {
// this function doesn't exist
notExistingFunction();
});
});
sammy.run();
// this should lead to execution of above handler
window.location.hash = '#someAnchor';
});
</script>
...
</body>
</html>
This really complicates troubleshooting of pages, did someone experienced this as well? Is this expected behavior or a bug? Are there any workarounds for this?
Thanks a lot in advance
Turned out to be easier than I thought - after inspecting sources of sammy.js it was found that somewhy raise_errors flag is set to false by default which manages error reporting.
So, modifying part above code to:
<html>
<head>...</head>
<body>
<script>
...
sammy.raise_errors = true;
sammy.run();
...
</script>
</body>
</html>
starts showing nice errors.

i'm unable to call the parent function from within iframe

i've seen the other posts in regard to this, but the following method is not working for some reason.
onclick="parent.testing();"
now for the full story. i have an index.html that houses all the JS files. also within the index, i have an empty 'div' tag. with jQuery, i'm appending a page1.html file to the empty 'div'. so the index kinda looks like this:
<html>
<head>
<script files>
<script>
ready { function testing(){do stuff;} }
</script>
</head>
<body>
<div><iframe src="page1.html" (added via jQuery)></div>
</body>
</html>
now in the page1.html file, i'm trying to call a function when a link is clicked. but i'm receiving the following error:
Uncaught TypeError: Cannot call method 'testing' of undefined
i've also tried the following but they didn't work:
onclick="window.testing();"
onclick="window.frames[0].testing();"
Your parent page script isn't valid JavaScript, but assuming ready { ... }:
<script>
ready { function testing(){do stuff;} }
</script>
...is a simplification supposed to represent a document ready handler you are declaring testing() as a local function within that ready handler so it can only be accessed from within that ready handler. You need to make testing() global in the parent page:
<script>
$(document).ready({ /* your on ready stuff here */ });
function testing(){ /* do stuff; */ }
</script>
...and then you should be able to call it from the iframe using parent.testing().
If I understand your question, your problem it's your function is not called, right? So maybe a solution is to put this in your "page1.html"
<script type="text/javascript" src="your_js_file"></script>

noty not working on init

Im complete noob to Javascript, but very keen to learn more.
I have a flex application, that I am messing with the HTML wrapper, to try and pop up an alert to point user to help.
I found a great jQuery plugin called noty, that emulates the header alerts that you also see in SE-sites.
<head>
<link rel="stylesheet" type="text/css" href="custom/css/jquery.noty.css"/>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>
<script type="text/javascript" src="custom/js/jquery.noty.js"></script>
<script type="text/javascript" language="JavaScript">
// basic alert
//if (!confirm("Yo.\n\nAccept?"))
// window.location.href = "custom/rejected.htm";
noty({text: 'yo!'});
</script>
</head>
Not getting any errors in firebug, but alert is not firing either.
I know its something basic, and will need some additional logic to tell it to fire at runtime, right?
What have I done wrong or what code am I missing?
Thanks
Full code here. Let me know via comments if you need more info.
I don't know Noty, but if it's a visual effect than it certainly depends on the DOM being scriptable and nodes being rendered. What's happening is that noty is firing before the DOM is scriptable.
A core concept in jQuery is using the "document ready" function. Consider it a "page is built, now I can manipulate it" function. People like to be fancy and use shortcut syntax (there are a few variations), but I prefer explicit and obvious syntax, so I use the standard:
$(document).ready(function() {
// Code here executes when DOM is scriptable
});
Just put the noty code inside there and it should work, I'm guessing:
$(document).ready(function() {
noty({text: 'yo!'});
});

Categories

Resources