tinyMCE error whe trying to get content - javascript

I am getting this error : Uncaught TypeError: Cannot read property 'getContent' of undefined
if (tinymce.editors.length > 0) {
alert('editor exist')
var myEditor = tinyMCE.get['rteCaseHeading'].getContent();
$("#bookId").html(myEditor);
}
In Html :
<textarea class="mceEditor" id="rteCaseHeading" rows="10" cols="100" style="height: 300px"> </textarea>
I also have specified : editor_selector : "mceEditor",during tinyMCE init.
I have referred various links/questions on this error and implemented.
This somehow still throws error though length of editors is greater than zero.
Someone , please suggest am struggling since more than 2-3 hrs with this issue.
[UPDATE]
I referred this link
and added the below code : http://jsfiddle.net/9euk9/49/
ed.on('change', function () {
ed.save();
});
Still, no luck.
Thanks a lot!

Enclose your <textarea> inside <form></form> tags.
Checkout the below code,
HTML
<form method="post" action="action_page">
<textarea class="mceEditor" id="rteCaseHeading" rows="10" cols="100" style="height: 300px">testtestet</textarea>
</form>
<button onclick="content()">Get content</button>
Javascript
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "mceEditor"
});
function content(){
alert(tinyMCE.get('rteCaseHeading').getContent());
}
Working Fiddle - http://jsfiddle.net/kqa13zz4/52/
Note: In fiddle, I have written the function content() function as window.content = function()... since fiddle accepts function declaration in that way only.
Hope this helps!

You are not calling the get() method correctly. You have this:
var myEditor = tinyMCE.get['rteCaseHeading'].getContent();
...it should be this:
var myEditor = tinyMCE.get('rteCaseHeading').getContent();
The way you have things written you are trying to access an array on the tinyMCE object - but the get is a method not an array - it is a method on the tinyMCE object hence the need for parenthesis and not square brackets.
https://www.tinymce.com/docs/api/tinymce/root_tinymce/#get
(the method call is the same for TinyMCE 3 and 4)

Related

Dynamic form using HTML and JQuery

I am trying to make a dynamic form using HTML and CSS. I am adding parts of my code below. I can not figure out why the code is not working.
JavaScript:
<script>
$(document).ready(function(e) {
var labelfiled = '<div><label>Label</label><input type="text" name="label[]"></div>';
var valuefiled = '<div><label>Value</label><input type="text" name="value[]"></div>';
var labdiv = $(".labdiv");
var valdiv = $(".valdiv");
var addbutton = $(".add_more");
$(addbutton).click(function(){
$(labdiv).append(labelfiled);
$(valdiv).append(valuefield);
});
</script>
HTML:
<form>
<div class="col-md-6 labdiv">
<div><label>Label</label>
<input type="text" name="label[]">
</div>
</div>
<div class="col-md-5 valdiv">
<div>
<label>Value</label>
<input type="text" name="value[]">
</div>
</div>
<button class="add_more">Add values</button>
</form>
If someone can help it would be great.
I also would like to know how I can process the data when I submit this into a javascript variable in the from of a array. Like for example if i have 2 inputs for value in the from, I want to store them in a javascript array and then convert it into a JSON.
Form must be in method="POST" and if you get in into php function :
if(!empty($_POST) && isset($_POST){ /*try something with $_POST*/ }
Try this
$(".add_more").click(function() {
var postData = {
field1: $("#id_field1").val(),
field2: $("#id_field2").val()
};
$.ajax({
dataType: "json",
data:JSON.stringify(postData),
url: URL,
method: 'POST'
});
});
A few things that may improve your learning:
jQuery and you code
All jQuery code should be wrapped in this...
$(document).ready(function() {
// jQuery
});
On the var's you have created, you have already initialised them as jQuery elements. Therefore, when you reference them again, you do not need (for example) $(addbutton) as addbutton will do. See amended code below)
<script>
$(document).ready(function(e) {
var labelfiled = '<div><label>Label</label><input type="text" name="label[]"></div>';
var valuefiled = '<div><label>Value</label><input type="text" name="value[]"></div>';
var labdiv = $(".labdiv");
var valdiv = $(".valdiv");
var addbutton = $(".add_more");
addbutton.click(function(){
labdiv.append(labelfiled);
valdiv.append(valuefield);
});
});
</script>
The console
On checking the console...
Say, for example, if you write the JS code console.log(1 + 1) in your page somewhere as you want to see that sum. Due to you writing client side code, when your web page loads (and depending where you have put the console.log()) if you check the developer tools in your chosen browser i.e. Chrome or IE, there is a console section where you can see the result of what you printed (i.e. using that example, it would be 2). This console in the browser will also print out errors that it detects (i.e. $ is not defined - if you are trying to reference jQuery but the library isn't included), it's a good tool for web developers (hence the name ;)) for debugging client side code.
Adding elements to array
Code for getting input values on submit of a form: (jQuery)
var array = [];
$("form").on("submit", function() {
$("input").each(function() {
array.push($(this).val();
});
});
I would suggest that you go and read a book/tutorial on jQuery code as well as the basic concepts of web development :)
Examples:
jQuery
For reference to basics if you get stuck, the link above is more reliable:
- w3schools

Tinymce get content

I try to get the content of tinymce, like this:
var hallo = tinyMCE.activeEditor.getContent();
alert(hallo);
but every time I get this message:
Uncaught TypeError: Cannot read property 'getContent' of null
I am using tinymce 4.
Thank you
You can get tinyMCE content by calling the the method triggerSave in the following way
tinyMCE.triggerSave();
after declaring this method you can get the contents by selector for example:-
var contents = $("#myTextArea").val();
or
var contents = tinyMCE.get('myTextArea').getContent();
Cannot read property 'getContent' of null often means that TinyMCE is unable to find your textbox which means there is something wrong in the reference to textarea's class.
<form method="post" action="somepage">
<textarea id="myTextArea" class="mceEditor">I should buy a boat. </textarea>
</form>
<button onclick="content()">Get content</button>
Take note of mceEditor class which we will now inform the TinyMCE editor about :
<script type="text/javascript">
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "mceEditor" //<<<----
});
</script>
And now simply get the contents of that textbox on the button click.
function content() {
alert(tinyMCE.get('myTextArea').getContent());
}
Here is working DEMO
Further to Shabaz's answer...
For TinyMCE version 4.1.9, I discovered the following:
tinyMCE.get('bobt').getContent(); and tinymce.get('bobt').getContent(); BOTH WORK (that is, uppercase the MCE does not matter)
bobt in my example code is an ID, not a class
The triggerSave() call is unnecessary - all that is important is for the textarea to have an ID, and to use the ID in the get('#YOUR_ID').getContent() call.
Full Example Code (non run-able):
$(function(){
$('button').click(() => {
//tinyMCE.triggerSave();
const out3 = tinyMCE.get('bobt').getContent(); //*MUST* be an ID, not a class
alert(out3);
$('#out').html(out3);
});
});
<textarea id="bobt" class="tinymce"></textarea>
<div id="outx"><button>Get it</button></div>
<div id="out"></div>

jquery 1.9 .html() on div not working in Chrome ? Neither does innerHTML?

I'm using this code :
function updateList(searchStr){
$.ajax(getSearchURL(true) + searchStr).done(function(data) {
$("#div_list").html($(data).find("#div_list").html());
});
};
to update my div #div_list with new data.
When I'm doing that in FF, it works flawlessly. However, in chrome, it fails with the following message in the console :
Uncaught TypeError: Cannot call method 'replace' of undefined
I divided the code in 2, like so :
function updateList(searchStr){
$.ajax(getSearchURL(true) + searchStr).done(function(data) {
var test = $(data).find("#div_list").html();
$("#div_list").html(test);
});
};
Chrome tells me the var test line is the one at fault.
After playing around a bit, I discovered that
$(data).find("#div_list")
Is indeed defined, as an alert on this will give [object Object]
So I said, hell, i'll just use normal non-jquery methods then, and tried:
function updateList(searchStr){
$.ajax(getSearchURL(true) + searchStr).done(function(data) {
$("#div_list").html($(data).find("#div_list")[0].innerHTML);
});
};
This also failed, with the same TypeError.
Can someone point me in the right direction ?
Thanks a lot.
EDIT : A sample answer
<?xml version="1.0" encoding="UTF-8"?>
<html>
<div version="2.0" id="div_list">
<script type="text/javascript">
dojo.require('dijit.TitlePane');
</script>
<div id="XXX">
<table>
<thead>
<tr>//Some rows
</tr>
</thead>
<tr>More rows with data
</tr>
<tr class="footer">
<td colspan="7"><span class="new"><a href="/items?form"><img title="Create new Item"
src="/resources/images/add.png" alt="Create new Item" /></a></span></td>
</tr>
</table>
</div>
</div>
</html>
EDIT2: Using console.log for $(data).find("#div_list") gives
[div, prevObject: st.fn.st.init[1], context: document, selector: "#div_list", jquery: "1.9.0", constructor: function…]
Also, changing the datatype to "html" does nothing.
Ok, so I figured a simple way of doing what I wanted.
I turns out that using the $.load() method of jquery parses everything as HTML. That way, even if InnerHTML is not defined for XML in Chrome (which is I think the reason why the code wasn't working in chrome), it still works.
I got the same exception but in my case i were using the xml parse from jquery and what i wanted is to get the String from the parse to update the file/string.
$(xmlParsed).find(selector).text(value);
$root = $(xmlParsed).find('root');
where the exception appear in:
$root.html()
The way it works is:
xmlFile = (new XMLSerializer()).serializeToString($root.context)
Changing the class selector into ID selector works for me. Don't know the reason.
Ex.
<div class="abc"></div> to <div id="abc"></div>

Unable to get value of textarea

Here is my code:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="container">
<textarea name="message' id="myarea">This is it</textarea>
<br/>
<input type="button" id="savebutton" value="Go" /> <p id="fuck"></p>
</div>
<script>
$('#savebutton').click(function() {
var text = $('#myarea').value();
alert(text);
});
</script>
On click I get error:
Uncaught TypeError: Object [object Object] has no method 'value'
It's .val(), not .value().
If you do your development with your developer console open, you'll see there's a TypeError. This should be the first place you look when something isn't working.
Two things, use val() instead of value(). And
<textarea name="message' id="myarea">This is it</textarea>
is invalid. Use
<textarea name="message" id="myarea">This is it</textarea>
instead. Note the name="message'.
The proper jQuery function is val(), not value().
That said, a unicorn has just been brutally murdered due to your code. Try Vanilla JS instead:
document.getElementById('savebutton').onclick = function() {
var text = document.getElementById('myarea').value;
alert(text);
};
EDIT: You also have mismatched quotes in your textarea's attribute values. Correct those, otherwise even this won't work ;)

html span id as javascript function argument

I'm trying to create a copy to clipboard IE javascript function but my code isn't working. How should I format my parameters and pass the argument?
/*invisible storage*/
<textarea id="storageBox" STYLE="display:none;">
</textarea>
<p id="abc">I WANT TO COPY THIS TEXT</p>
<button onClick="Copy(abc);">Copy</button><br />
<script type="text/javascript">
function Copy(txt) {
storageBox.innerText = txt.innerText;
Copied = storageBox.createTextRange();
Copied.execCommand("RemoveFormat");
Copied.execCommand("Copy");
}
</script>
Major karma for anyone who can write this using zclip or show me a similar example as well!!
The following changes should help:
... onclick="Copy('abc');"...
storageBox.value = document.getElementById(txt).innerText
I think. You weren't very specific in saying what doesn't work or even for what reason you're trying to hijack the clipboard (what if the user has important stuff in there?)
First, you need to pass the parameter as a string:
<button onClick="Copy('abc');">Copy</button><br />
In your function, you need to get the element from the DOM based on this ID (as a string):
function Copy(txt) {
storageBox.innerText = document.getElementById(txt).innerText;
...
Though I commented your script working fine, there is something to fix in the HTML. If you set display: none, execCommand() can't copy the content. So you'll need to do this:
<textarea id="storageBox" style="width: 0px; height: 0px; border: 0px;"></textarea>

Categories