We Keep Coding

Changing Text of HTML Button Using Outside JS Variable

In my main HTML file, I create a variable using this script:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
//Creation of answerjson not shown
var choiceOne = answerjson[0].choice;
});
Later in my HTML, I create a button within a div using this code:
<div id= "one"><button class="button" id = "b1"></button></div>
How can I display the value of choiceOne as the label on button b1? I've searched online, but only found answers to this problem when the button is not in a div.

var choiceOne = "Some Text";
// jQuery
$("#b1").text(choiceOne);
// Regular JavaScript
document.getElementById("b2").innerHTML = choiceOne;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one"><button class="button" id="b1"></button></div>
<div id="two"><button class="button" id="b2"></button></div>

Like this:
$('#b1').html(choiceOne);
but you need to do this in
$(document).ready(function() { });
so you are sure all of the DOM is ready and loaded ... not sooner

Access the button from inside your javascript and change the text on it using the following command:
document.getElementById("b1").innerHTML = choiceOne;
This is in regular JS. You can also use JQuery to select the container.

How to get formatted html code from edited text in summernote

I am using summernote text editor. I want to get html formatted of text edited in editor. In summernote editor toolbar having a code view button. when click on the button we can see the html code of edited text. Now, I want html code to get as string or stored in variable. How it possible?
Please help me.
reference : github code is https://github.com/summernote/summernote

Add the below lines to index.html
<div class="container">
<div id="summernote" class="summernote"><p>Hello World</p></div>
<input type="submit" value="submit" onclick="myFunction()"/>
<script>
function myFunction() {
var MyDiv2 = document.getElementsByClassName('note-editable');
m = MyDiv2[0];
alert(m.innerHTML);
}
</script>

You have method summernote with argument 'code' for this.
Example:
<div class="summernote"></div>
<script>
$('.summernote').summernote();
</script>
Then Type something in field created from div and type in console:
$('.summernote').summernote('code')
You should see the same result as in example in #john answer

tinyMCE error whe trying to get content

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)

Newbie to jQuery and get function

I am completely new to jQuery. I can't find any good documentation on the get function and was wondering if I could get some help.
I have an HTML page called me.html with just a single div called me. I want to use the following page to get the contents within the div. Even a google in the right direction would help. Thanks so much
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="data.js"></script>
</head>
<body>
<form id="form" runat="server">
<div>
<div id="me">
</div>
</div>
</form>
</body>
</html>

you don't need to use get(). This simple script should do it
<script>
var contentsOfMe = $('#me').html();
</script>

get is used for loading data from an url. You seem to be wanting to get the contents of a div
as in $("#me").text()

What about using the great documentation provided at http://api.jquery.com/jQuery.get/
EDIT. If you want to just get the text, use var myText=$('#me').html();, and if the html, use var myHtml=$('#me').html();

You will find the documentation for the function get here : http://api.jquery.com/jQuery.get/
But get is to perform an ajax request get on your server so I don't think that's what you need.
In jquery, most of the time you will "select" an element using jquery selector : $("#id")
This will select $(), this will say you are selecting an element using his id $("#name_of_the_id").
Then, you will have an object which will represent the selected element.
If you want to get all the html inside this element do :
function getHtmlFromElementId(id)
{
var element = $("#" + id);
var html = element.html();
return html;
}
Printing the return of this function will print all html code inside the element selected.
If you are seaching for a good tutorial on jquery, the w3schools' one is really good:
http://www.w3schools.com/jquery/jquery_examples.asp

How to refer to javascript variable from p:dialog header attribute

I have a variable header_title in java script
<script type="text/javascript">
var dialog_label;
function update_dialog_label(arg){
dialog_label = arg;
}</script>
Now, here is how I want to use dialog_open
<p:dialog widgetVar="nodeDetail" width="520" header="{dialog_label}">
What is the right way to use dialog_label to set header ?
Thanks.

If you prefer to use a javascript var instead bean property:
jsf code:
<p:dialog id="infoDialog" widgetVar="infoDialog" header="Local title" width="400">
something
</p:dialog>
<input type="button" value="showDialog" onclick="showDialog()"></input>
code A:
<script type="text/javascript">
var globalTitle = "Global title";
function showDialog(){
var header = $("#infoDialog".concat("_title"));
header.text(globalTitle);
infoDialog.show();
}
</script>
code B:
<script type="text/javascript">
var globalTitle = "Global title";
function showDialog(){
var header = document.getElementById("infoDialog".concat("_title"));
header.innerHTML = globalTitle;
infoDialog.show();
}
</script>
and the original title is ignored... you can update globalTitle...

I don't believe that you can bind attributes to variables in JavaScript as you have shown. However, if the p:dialog element is like other HTML elements, you may be able to achieve what you want by setting the header directly from JavaScript each time the dialog label is updated. First, give your dialog an ID:
<p:dialog id='dialog' widgetVar="nodeDetail" width="520" header="{dialog_label}">
Now, in your function update_dialog_label(arg), add the following line at the very end:
nodeDetail.header = dialog_label;
Now, every time your update function is called, the dialog header will be updated. Hope that helps.
EDIT: I'm not familiar with PrimeFaces, but I googled this, and it may get on the right path:
http://forum.primefaces.org/viewtopic.php?f=3&t=14538

By inspecting the generated code in the browser, I successfully modified the title of the <p:dialog> with the following javascript:
$('span#infoDialog_title.ui-dialog-title').html(globalTitle);
and to display the dialog :
PF('infoDialog').show();
Hope this helps!