I have a textarea in which I put HTML code, and then dynamically preview this HTML inside the preview div:
<div id="preview">
</div>
<textarea id="fooBar">
<div style="background-color:green;"></div>
</textarea>
jQuery code looks like this:
$(document).ready(function () {
var html = $('#fooBar').text();
$('#preview').html(html);
$('#fooBar').on('keyup', function() {
var html = $(this).text();
$('#preview').html(html);
});
});
The problem is that changing HTML code doesn't do nothing. Console log on html variable always shows the same initial content, it's not being changed.
How do I solve this, and why is that so?
Just change the text() to val().
$(document).ready(function () {
var html = $('#fooBar').text();
$('#preview').html(html);
$('#fooBar').on('keyup', function() {
var html = $(this).val();
$('#preview').html(html);
});
});
I think you should use val() instead of text(). val() is used for form elements like textarea in your case, whereas text() is HTML elements. I hope this will work
<div id="preview"></div>
<textarea id="fooBar">
<div style="background-color:green;"></div>
</textarea>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function () {
var html = $('#fooBar').val();
$('#preview').html(html);
$('#fooBar').on('keyup', function() {
var html = $(this).val();
$('#preview').html(html);
});
});
Related
I am having a problem here about copying a text that displays from div (the display comes from jquery) to another div (using javascript).
Here is my code:
<body onload="copyDiv();">
<div id="first_div"></div>
<div id="second_div"></div>
</body>
<script>
// this function provides text for first_div
$(document).ready(function() {
$("#first_div").html('Testing');
});
// this function copies the text that comes from first_div to second_div
function copyDiv() {
var firstDivContent = document.getElementById('first_div');
var secondDivContent = document.getElementById('second_div');
secondDivContent.innerHTML = firstDivContent.innerHTML;
}
</script>
My expected output is, the jquery will provide the text for the first_div, and the javascript function will copy the text from first_div into the second_div. Thanks in advance
Both tasks should be on load and in order:
$( document ).ready(function(){
$("#first_div").html('Testing');
$("#second_div").html($("#first_div").html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<div id="first_div"></div>
<div id="second_div"></div>
</body>
By pure JavaScript as per your question content.
function copyDiv() {
var firstDivContent = document.getElementById('first_div');
var secondDivContent = document.getElementById('second_div');
secondDivContent.innerHTML = firstDivContent.innerHTML;
}
<body onload="copyDiv();">
<div id="first_div">Testing</div>
<div id="second_div"></div>
</body>
I want to Use TypeID in another tag. would please help me?
<script>
$(ItemType).change(function () {
var TypeID = $(this).val();
});
</script>
<div class="form-group">
#if(TypeID==1){
do something
} else {
do something
}
<div>
I am working on an add-on for Confluence. I am using Apache Velocity and Js.
When I print out my template, I get no return from my JS file where I am using jQuery. How can I establish the communication between those two correctly? Thank you!
My JS
jQuery(function ($) {
var initmyConfluenceMacro = function ()
{
$(".myConfluenceMacro").each(function()
{
var html = "wadup";
var dayDates = $(this).find("input.dayDates").val();
html = html + dayDates;
$(this).html(html);
});
};
$(document).ready(function()
{
initmyConfluenceMacro();
});
});
MY Velocity Template.vm
#requireResource("confluence.web.resources:jquery")
#requireResource("com.atlassian.tutorial.myConfluenceMacro:myConfluenceMacro-resources")
My variables : $myCustomVar
My variable js:
<div class="myConfluenceMacro">
<fieldset class="parameters hidden">
<input type="hidden" class="dayDates" value="YO! Was up dude?">
</fieldset>
</div>
I managed it. Like this, it is working, and I get the HTML back!
JS
$(document).ready(function(){
$(".myConfluenceMacro").each(function(){
$(this).html("Hello <b>world!</b>");
});
});
VELOCITY
<script type="text/javascript">
#include( "templates/currencyDetail.js")
</script>
<body>
<div class="myConfluenceMacro">
</div>
I have created the input fields but when i click the first two ,it does well until when i request the third which comes between the first two and also other also comes between.can some help me please.
here is my javascript code:
<script type="text/javascript">
$(document).ready(function() {
it to after "after-add-more" div class.
$(".add-more").click(function(){
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
</script>
$(document).ready(function() {
$(".add-more").on('click', function(){
var html = $(".copy-fields").clone();
$(".after-add-more").after(html[0]);
});
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class = "add-more">ADD</button>
<div class = "after-add-more"></div>
<div class = "copy-fields"><input type = "text" /></div>
</div>
Because you are trying to copy the html content of class .copy-fields, Use clone() instead html() and then use html[0] for insert after as following:
$(document).ready(function() {
$(".add-more").click(function(){
var html = $(".copy-fields").clone();
$(".after-add-more").after(html[0]);
});
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
I have a very basic input/output structure in HTML:
<textarea id="input" onkeyup="sendCode()">
Hello World!
</textarea>
<div id="output"></div>
And I have JS function that should pass everything from input to output:
var input = document.getElementById("input");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = input.innerHTML;
}
The sendCode() function works when I call it manually, but it seems that onkeyup event not firing in this textarea.
Here is jsfiddle: http://jsfiddle.net/mudroljub/y5a2n8ab/
Any help?
UPDATE: jsfiddle is updated and working now.
Use value since it's not a content text but a value property
var input = document.getElementById("input");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = input.value;
}
And a working demo here
I would first like to point out that this will not run because the code runs before the HTML exists, so first off, put these lines inside a function:
window.onload= function anyname() {
var input = document.getElementById("input");
var output = document.getElementById("output");
}
Secondly, try using either:
editor.onkeyup = "sendCode()"
in your script area or at the top of the new function i created:
editor.addEventListener(keyup,sendCode,false)
Basically when a key goes up in that area it calls the sendCode() function. The false is if you don't want to use capture which I think is default anyway but just to be safe.
Basically java script is not that dynamic.So a better option is to
use jQuery.
[Note:- "jquery-2.2.2.min.js" given in src, in script tag,
is Jquery Library file codes can be copied from following link :http://code.jquery.com/jquery-2.2.2.min.js]
Just copy the contents from above link,into a textfile , save it by the name "jquery-2.2.2.min.js"
or any other name as you wish.The src of script should contain the same.
The "jquery-2.2.2.min.js" should be in the same directory where
you have the html file. Otherwise full path to be mentioned.
Here is the answer to your question.
<html>
<head>
<title>Dynamic TextArea</title>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("textarea").keyup(function(){
sendCode();
});
});
function sendCode(){
document.getElementById("output").innerHTML =
document.getElementById("input").value;
}
</script>
</head>
<body>
<form>
<textarea id="input">
Hello World!
</textarea>
</form>
<span id="output"></span>
</body>
</html>
If you have any doubts please ask.
I am sure once you learn to use jQuery you would forget javascript.
Where do you define the sendCode() function? It might not exist at the point where you create your text area.
This snippet should work:
<textarea id="editor">
Hello World!
</textarea>
<div id="output"></div>
<script type="text/javascript">
var editor = document.getElementById("editor");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = editor.value;
}
editor.addEventListener('keyup',sendCode);
</script>