Develop Reference

Retrieve dynamic value from DIV in Javascript to perform logic

I am new to both Java and HTML, I have a DIV that is populated with a dynamic value
<div id=test>
<span
Test="TBinaryText"
SITENAME="test site"
OBJECTNAME="Temperature"
OBJECTTYPE="0"
INSTANCE="1"
DEVICE="1"
PROPERTYID="85"
INCLUDEUNITS="1"
ARRAYINDEX="-1"
STYLE="position:absolute;top:73;left:188;height:16;width:34;z-index:43;overflow:hidden;font- family:Arial;font-size:8pt;font-weight:700;font-style:normal;mask:0.1;">???
</span>
</div>
In the script I am storing the DIV as part of an Array (simplified for posting)
var trial = [
['string',43,23,1,test]
]
I want to use the value of the 'test' DIV to perform logic to determine the pin color of a marker on a map. If I alert the element of the array that contains the DIV it displays [Object] and not the content or value. I found and implemented a jQuery plugin to display the content, this works to perform the logic if the content of the DIV is a static number.
var color =0;
$(trial[4]).each(function(){color= $(this).output()});
alert([color]);
if (color <5 ){ icon= pinImageBlue} else if (color>11) {icon=pinImageRed} else {icon= pinImageGreen}
However when I populate the DIV as above the alert will display the code and not the actual value. Currently to get the plugin to work I am using jQuery 1.3.2 as the newer versions error out. For the mapping i am using the google v3 API and the infobox API.
The plugin that allows the content of the DIV display is:
(function($){
$.fn.output=function(d){
return (this.is(":text")) ? this.val(d) : this.html(d)
}
})(jQuery);
Is there a way to access the actual value of the code in the DIV and not the code itself?

Yeah you are looking for .text()
Here's a jsfiddle where I run your code and grab the value. I did it using jQuery 1.8.3

Changing data-content of a button class used in popover

I have a button class which I am using for twitter popover, my code is as follow:
<button class="btn btn-success" id="chaticon" data-original-title="Users Online" data-content="<a href='#'> OMGTEST </a>">
And what I want to do is to modify the data-content via javascript,
Naively I tried to do:
document.getElementById("chaticon").data-content = "new content";
and it didn't work, any ideas on how I can do this?

Use the built in accessors for HTMLElement.
getAttribute(attributeName)
setAttribute(attributeName,newValue);
like this:
var yourElement = document.getElementById("chaticon");
var dataVal = yourElement.getAttribute("data-content");
var newData = "new data";
yourElement.setAttribute("data-content",newData);
here is a simple demo: http://jsfiddle.net/hpfk3/
edit
You should probably have included jquery and popover in the question instead of just asking about a button element. Since these are available, you can change the content like this:
//store chat icon jQuery object
var chatIcon = $("#chaticon");
//change data attribute on element
//change jquery data object content
//call setcontent method
chatIcon.attr("data-content","new data").data('popover').setContent();
//target the popover element and restore its placement definition
chatIcon.data('popover').$tip.addClass(chatIcon.data('popover').options.placement);

Try setting the attribute
document.getElementById("chaticon").setAttribute('data-content','new content');

Dojo: TabContainer - how to place menu button in the header?

is it possible to place a button in TabContainer header on the left side ?
I want to place it next to First Tab.
Thanks for help :)

You are going to have to create your own tab controller widget. The steps would be as follows:
Create MyTabController that extends dijit.layout.TabController
Create a template for MyTabController that has a place for the button
Update MyTabController javascript to create the button
You can use your new controller widget in one of two ways. If it were me, I'd also create my own tab container widget that extends dijit.layout.TabContainer and overrides the _makeController function to instantiate the new controller.
Alternatively, you could pass in the _makeController function when instantiating the TabContianer widget
var tc = new dijit.layout.TabContainer({
_makeController: function(srcNode) {
...
}
}, node);
You can look at the dijit.layout.TabContainer source to see what needs to be done in the _makeController function.

How to change dojo/dijit tab title programmatically?

For example, given the dijit.ContentPane tab below, how do I programmatically change the title "Summary" to something else?
<div id="summaryContent" class="tabClass" dojoType="dijit.layout.ContentPane" title="Summary" selected="true">
I tried:
dojo.byId('summaryContent').title
document.getElementById('summaryContent').style.title
...as well a bunch of other combinations, but it doesn't work? Any ideas?

Just two small mistakes: first, to get a dijit instance (e.g. the dijit.layout.ContentPane javascript object, not the DOM node) you have to use dijit.byId, and secondly, setting a property on a dijit is done with the set method. So:
dijit.byId("summaryContent").set("title", "My new awesome title");
.. should do the trick.

This is what worked for me, not only for title but for any property:
First include "dijit/registry" (https://dojotoolkit.org/reference-guide/1.10/dijit/registry.html)
Then in code do:
var summaryContent = registry.byId("summaryContent");
summaryContent._set("title", "new title here");
//Set something like the icon
summaryContent._set("iconClass", "summary-icon");

Get the instance of the div by using "dijit.byId".
As you have created the instance by using dijit ("dijit.byId"), so use the method 'set' to set the value to the property.
Code:
dijit.byId("summaryContent").set("title", "New Title");
*New Title: is the title which you want to set.

How to get the content of a Tinymce textarea with JavaScript

i have an array of content then how we get content of Tinymce textarea in javascript

I solved it with code:
// Get the HTML contents of the currently active editor
tinyMCE.activeEditor.getContent();
// Get the raw contents of the currently active editor
tinyMCE.activeEditor.getContent({format : 'raw'});
// Get content of a specific editor:
tinyMCE.get('content id').getContent()
the activeEditor is current editor,but i use tinyMCE.get('editor1').getContent() can not get the value of my editor, hope it can help you
Tinymce API: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent

lets say your mce textarea instance is:
<textarea id="editor1" ....></textarea>
then you get the content as follows:
var content = tinyMCE.getContent('editor1');
if you mean you have multiple instances of mce editor on one page and you want to get content then try this approach:
var inst, contents = new Object();
for (inst in tinyMCE.editors) {
if (tinyMCE.editors[inst].getContent)
contents[inst] = tinyMCE.editors[inst].getContent();
}
the above code adds each editor content into an array

I had the same problem. I have solved using this code:
tinyMCE.get('editor1').getContent();
Source: spocke is the author

You may use:
tinymce.get(editorid).getContent();

In my case (v4.3.12), none of the above worked, so I did a workaround:
Html code:
<div id="wrapper">
<textarea id="editable_container" name="editable_container"></textarea>
</div>
JQuery code:
var iframe = $('#editable_container_ifr');
var editorContent = $('#tinymce[data-id="editable_container"]', iframe.contents()).html();
console.log(editorContent);
Where editable_container is my tinyMCE editor's placeholder textarea, the editable area's iframe id is generated from adding a _ifr postfix to the placeholder's id, and the content-editable container (which contains the formatted text), has an id tinymce with a data-id attribute of the placeholder's id.

Use the getContent() method from the TinyMCE API.
Let’s say you have initialized the editor on a textarea with id=”myTextarea”. First access the editor using that same id, then call getContent(). For example:
var myContent = tinymce.get('myTextarea').getContent();
Or, instead of accessing the editor by id, you can access the active editor:
var myContent = tinymce.activeEditor.getContent();
If want to get the TinyMCE content without the HTML tags, you can pass in a parameter to indicate that you want the result in plaintext. For example:
var myContent = tinymce.get('myTextarea').getContent({format: 'text'});
More info and examples here: https://www.tiny.cloud/blog/how-to-get-content-and-set-content-in-tinymce.

tinymce.get('editorId').setContent(response.data);

This work for me for version 4 (9.8):
var Content = tinyMCE.editors['Your_ID'].getContent();

tinymce.activeEditor.getContent();

For version 4.1.9, this is what worked for me:
$(function(){
$('button').click(() => {
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>
Notes:
.get() requires an ID, not a class
tinymce.get() or tinyMCE.get() both work -- uppercasing the MCE does not matter

If you are more familiar with (and are using the jquery wrapper), you can also do this using this:
$('#editor1').tinymce().getContent();
Where (editor1) is your selector.