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');
Related
I'm working on a project where I have to change the text inside a button, but the button is not allowed to have an ID. I'm wondering how to accomplish this.
If it helps, I am using Kendo UI, which I believe is how the button is given its onClick method using data-bind:
<button class="some-css-classes" data-bind="click: myJavascriptFunction">Text I want to change</button>
You can avoid adding more attributes by just targeting the existing data-bind attribute and change the text inside like this:
var x = document.querySelector('[data-bind="click: myJavascriptFunction"]');
x.innerHTML = "Hello World";
jsFidldle: http://jsfiddle.net/AndrewL64/z7t31psn/1/
Or if you don't want to create an extra variable:
document.querySelector('[data-bind="click: myJavascriptFunction"]').innerHTML = "Hello World";
jsFidldle: http://jsfiddle.net/AndrewL64/z7t31psn/2/
One workaround might be using a data-id attribute.
<button data-id="unique_id">Text I want to change</button>
and then
document.querySelector('[data-id=unique_id]').innerHTML = 'something';
or
$("[data-id=unique_id]").html('something')
if you're using jquery
You can get it by a class
<button class="test">
Test Button
</button>
document.getElementsByClassName('test')[0].innerHTML="Text Changed"
document.getElementsByClassName("class1 class2 class3")[0].innerHTML = "test" replace zero with the appropriate index. This may require updating if the website markup is modified.
In my angular component,
<div contentEditable="true" id="mytext" ></div>
<button type="button" (click)="goSee()">SEE ME !</button>
In class,there is goSee() method because I want to change selected text(later url) to a real clickable href.
goSee()
{
var startIndex = window.getSelection().getRangeAt(0).startOffset;
var endIndex = window.getSelection().getRangeAt(0).endOffset;
var slicedText = document.getElementById("mytext").innerText.slice(startIndex, endIndex);
document.getElementById("mytext").innerHTML.anchor(slicedText);
}
Entering url to "mytext" and selectedText works,,But NO hyperlink and clickable link appears .... Please Suggest me and Thank you all in advance..
First, you have to use link method to create anchor with the href attribute. Second, innerHTML is a property and you have to set it. Assuming that slicedText is a url you want to put into href attribute, you can achieve what you're trying to do like this:
var existingLinkText = document.getElementById("mytext").innerHTML;
document.getElementById("mytext").innerHTML = existingLinkText.link(slicedText);
Also, if your template is part of the component's template, I would suggest to use ElementRef to get access to the DOM instead of global document.
How to get the html of element itself using Jquery html. In the below code I would like get the input element inside div using JQuery as shwon below
<div id="content">content div</div>
<input type='text' id="scheduledDate" class="datetime" />
$(function() {
console.log($('#scheduledDate').html('dsadasdasd'));
$('#content').html($('#scheduledDate').html());
});
EDIT:
Can I get the $("#scheduledDate") as string which represent the real html code of the input box, because my final requirement is I want to pass it to some other SubView( I am using backboneJS) and eventually use that html code in a dust file.
My original requirement was to get that input field as string so that I can pass it to some other function. I know, if I keep it inside a DIV or some other container, I can get the html by using .html method of JQuery. I dont want use some other for that purpose. I am just trying to get html content of the input box itself using it's id.
If you want to move the input element into div, try this:
$('#content').append($('#scheduledDate'));
If you want to copy the input element into div, try this:
$('#content').append($('#scheduledDate').clone());
Note: after move or copy element, the event listener may need be registered again.
$(function() {
var content = $('#content');
var scheduledDate = $('#scheduledDate');
content.empty();
content.append(scheduledDate.clone());
});
As the original author has stated that they explicitly want the html of the input:
$(function() {
var scheduledDate = $('#scheduledDate').clone();
var temporaryElement = $('<div></div>');
var scheduleDateAsString = temporaryElement.append(scheduledDate).html();
// do what you want with the html such as log it
console.log(scheduleDateAsString);
// or store it back into #content
$('#content').empty().append(scheduleDateAsString);
});
Is how I would implement this. See below for a working example:
https://jsfiddle.net/wzy168xy/2/
A plain or pure JavaScript method, can do better...
scheduledDate.outerHTML //HTML5
or calling by
document.getElementById("scheduledDate").outerHTML //HTML4.01 -FF.
should do/return the same, e.g.:
>> '<input id="scheduledDate" type="text" value="" calss="datetime">'
if this, is what you are asking for
fiddle
p.s.: what do you mean by "calss" ? :-)
This can be done the following ways:
1.Input box moved to the div and the div content remains along with the added input
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
$("#content").append($inputBox);
});
2.The div is replaced with the copy of the input box(as nnn pointed out)
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
var $clonedInputBox = $("#scheduledDate").clone();
$("#content").html($clonedInputBox);
});
Div is replaced by the original input box
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
$("#content").html($inputBox);
});
https://jsfiddle.net/atg5m6ym/4485/
EDIT 1:
to get the input html as string inside the div itself use this
$("#scheduledDate").prop('outerHTML')
This will give the input objects html as string
Check this js fiddle and tell if this is what you need
https://jsfiddle.net/atg5m6ym/4496/
well, i have TEXTAREA in a form.
<textarea name="content_en"></textarea>
and also i have three buttons near this textarea:
<button class="button_en>EN</button>
<button class="button_ro>RO</button>
<button class="button_ru>RU</button>
i want to do this:
to change textarea name when i press a button without page refreshing or something like that.
so this is to put different content in different columns from a row from database. (Content in different languages under same ID)
You can do this:
Change the class of the buttons and move atual class to other param like 'data-txt':
<button class="button-change-txt" data-txt="en">EN</button>
<button class="button-change-txt" data-txt="ro">RO</button>
<button class="button-change-txt" data-txt="ru">RU</button>
Then, add a class to textarea:
<textarea class="txt-content" name="content_en"></textarea>
So, add an event to ".button-change-txt" class:
$('.button-change-txt').click(function(){
var txt = $(this).attr('data-txt'); //STORE THE data-txt INTO A VARIABLE
$('.txt-content').attr('name','content_'+txt); //CHANGE THE TEXTAREA NAME
})
Some would recommend using the "on" method instead of the "click" method, seeing as the .click() method simply points to .on('click'), thus:
$('.button-change-txt').on('click', function(){
var txt = $(this).attr('data-txt');
$('.txt-content').attr(name,'content_'+txt);
});
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.