We Keep Coding

How can we populate textarea value when textarea is initilized as ckeditor

Well i have been working on CKEDITOR with HTML FORMS and backend is asp.net core v3.1. I have used asp tag helpers in rendering and binding html forms.
Following is the code :
<div class="form-group">
<label asp-for="Content" class="control-label"></label>
<div class="input-group">
<textarea asp-for="Content" class="form-control" required placeholder="Content"></textarea>
<span asp-validation-for="Content" class="text-danger"></span>
</div>
</div>
I have two pages create and edit which creates the first form entry to database and update the values respectively.
So when i load edit page all the values are loaded but CKEditor values are not loaded after all it is bound to textarea.
Values are not displaying in HTML CKEDITOR content area.
CKEDITOR INITILIZE CODE IS BELOW
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
$(function () {
CKEDITOR.replace('Content');
})
</script>
}

The API documentation has documented methods for this:
Set Data
setData.
CKEDITOR.instances.editor1.setData( '<p>This is the editor data.</p>' );
Insert Element
insertElement.
var element = CKEDITOR.dom.element.createFromHtml( '<img src="hello.png" border="0" title="Hello" />' );
CKEDITOR.instances.editor1.insertElement( element );
Insert Text
insertText.
CKEDITOR.instances.editor1.insertText( ' line1 \n\n line2' );
Insert Html
insertHtml.
CKEDITOR.instances.editor1.insertHtml( '<p>This is a new paragraph.</p>' );
I think what you need is setData as the other methods append text/html at the cursor position.

Jquery - Only the first data hid in the div element

I am new to Jquery and currently encountering an issue in my code. I need to hide an asterisk whenever the html form loaded. However, only the first asterisk hid. The TD tag is inside a for loop statement
HTML Code:
<td style="..." rowspan="0">
<div id="divhasvalue">
<label style="...">*</label>
</div>
</td>
Jquery code:
$(document).ready(function(){
$("#divhasvalue").hide();
});
Output in the Form:

You have to use the class instead of id. Give the same class to the divs you want to hide

Jquery: get text from dynamically generated button in new div

Here is some dynamically generated content with jquery.
<div id="response">
<button id="high" class="btn-key-main">high</button>
<button id="last" class="btn-key-main">last</button>
</div>
How do I get the content of the button that is clicked (high or last) in a div with id="solution"?
Here's what I tried:
$("#response").on("click", 'button.btn-key-main', function() {
$("#solution").html($(this).val());
});
Solved by #slicedtoad and #smerny
.val() should've been .html() or .text()
$("#solution").html($(this).html());

http://jsfiddle.net/o4fyqvk7/
$("#response").on("click", 'button.btn-key-main', function() {
$("#solution").html($(this).text());
});

$('.selector').val is documented here: http://api.jquery.com/val/
If you want the text of a button use $('.selector').text() http://api.jquery.com/text/
Often it's a good idea to add a values to your buttons.
Just use the HTML value='' attribute.
Then you can do things like change the visible language on the button without breaking JS.

show button only if following div tag has some value

I have following html code - which displays a button and user clicks on it - it display
some text below.
<div>
<button class="btn-default btn-primary show-answer-button">Show</button>
<div class="answer"></div>
</div>
But sometimes, when user clicks the button, there is no text . (so it displays nothing).
I would like to display this button only when the "answer" has some text. How to achieve this ?
I tried following (adding a id='answer-part' and insert a line at js file) but it didn't work:
<div id="answer-part">
<button class="btn-default btn-primary show-answer-button">Show</button>
<div class="answer"></div>
</div>
and add this at .js file
$('.answer-part:empty').hide();

Try using the length property and contents() together:
$('button.btn-default.btn-primary.show-answer-button').click(function () {
if ($(this).next().contents().length) $(this).next().show()
})
jsFiddle example

$('.answer:empty').hide().prev('button').hide();

You can do it like this:
$('.show-answer-button')[$('.answer').text() ? "show":"hide"]();

Code running successfully but not showing output in the browser

Below is my code.
HTML :
<div id="vis">
</div>
JavaScript:
$('#vis').find('.set_texts').wrapInner('<div class="new_text">');
($('#vis').find('.new_text').text("NEW TEXT VALUE"));
When I run this code in 'inspect element' I can see the below code as output but nothing is showing in the browser. I want to show 'NEW TEXT VALUE' in the browser,how?
<div id="vis">
<div class="new_text">NEW TEXT VALUE</div>
</div>

<text> is not a valid HTML tag, you can use <div>,<p>,<span>... instead:
$('#vis').find('.set_texts').wrapInner('<span class="new_text">');
$('#vis').find('.new_text').text("NEW TEXT VALUE");

instead of this
$('#vis').find('.set_texts').wrapInner('<text class="new_text">');
use this
$('#vis').find('.set_texts').wrapInner('<span class="new_text">');

first you need to change html.
html:
<div id="vis">
<div class="set_texts"></div>
</div>
you do not have .set_texts element in your selected div(#vis). so wrapInner() is not adding any div.
you also have extra ) in the second line of jquery.
try this jquery:
$(document).ready(function(){
$('#vis').find('.set_texts').wrapInner('<div class="new_text">');
$('#vis').find('.new_text').text("NEW TEXT VALUE");
});
working demo
let me know if you have any question.