get updated changed html from textarea - javascript

long time reader first time asker....
If I have a textarea with html text in it (I am trying to verify certain elements have an id) and I send that code to a function how do i update that textarea with the new changes?
I have tried wrapping it in a div from previous suggestions I read here, but its not showing me the updated html.
Here is my fiddle https://jsfiddle.net/gk6yLh77/
function runfunc(){
var uniqueIdFind = '<div>'+jQuery('#pages_htmlcode_content').val()+'</div>';var curDateEpochSec='12112';
if(jQuery('#content-wrapper',uniqueIdFind).length==1){
jQuery('#content-wrapper',uniqueIdFind).find('[onclick], [href]').not('link').not('a[nostat],[statproc],a[href="#top"]').each(function(index){
if(!jQuery(this,uniqueIdFind).attr('id')){console.log('id======dd_'+curDateEpochSec+'_'+index);jQuery(this,uniqueIdFind).attr('id','dd_'+curDateEpochSec+'_'+index);}
});
jQuery('#pages_htmlcode_content2').val(uniqueIdFind);
}else{
alert('erros')
}
}
I put a console write in the function and can see the id's being added, but for the life of me I can not figure out how to get those changes.
here is the sample html to put into the first textarea
<html lang="en-US">
<head>
</head>
<body id="com">
<div id="top" class="landing-page">
</div>
<div id="content-wrapper">
<div id="content-main">
asdasad
</div>
</div>
</body>
</html>
It just spits out the original code :(
Thanks

You neeed to wrap your test element in $()
example:
if(jQuery(uniqueIdFind).find('#content-wrapper').length==1)

Related

How to use keypress event in an iframe input from its parent page?

Assume I have an iframe in my HTML webpage that contains a part of my HTML data. It has an input for a search text box. I want, when I write something inside the input, using onkeypress event, I can show the data in the span.
How can I do this?
I read many different suggestions but none of them worked correctly for me!
Note that pages are at same domain but I don't have access to the iframe page code!
Can anyone help me writing it?
Here is the simplified code of what I need:
$(document).ready(function() {
$('#iframeDoc').ready(function(){
$(this).contents().on('keypress', function(event) {
// add pressed keys to span });
});
$('#iframeDoc').attr("src","JavaScript:'iframe content'");
});
Main page HTML:
<html>
<body>
<iframe id="iframeDoc" src="iframepage.html"></iframe>
</body>
</html>
iframepage html:
<html>
<body>
<input type="text" />
<span id="result"></span>
</body>
</html>
A generic function to capture any keyup events within the iframe, e.g.
$(document.getElementById('frame-id').contentWindow.document).keyup(function(e){
//code here
});
Separately you can access elements in iframes with code like (note that I added an ID to your input element):
$('#iframe').contents().find('#element_id');
So putting them together, could you not do something like:
$(document.getElementById('frame-id').contentWindow.document).keyup(function(e){
if($('#iframe').contents().find('#element_id').is(":focus")){
//code here
}
});
Fiddle of what I think is working example for your code:
https://jsfiddle.net/42j45kmn/7/

Javascript get text from input and copy it to a span

I'm trying to make a template for a copy and paste it have a input and I want to put some text in it and press a button that says update and copy the text from the input to somewhere in the template
My attempt:
<!DOCTYPE HTML>
<html>
<head>
<title>Donovan_D Minecraft - Youtube Description
Template</title>
</head>
<body>
<!--Start Template-->
<div>===================================<br>
My Channel:<br>
https://youtube.com/c/DonovanDMinecraft<br>
===================================<br>
Twitch:<br>
http://twitch.tv/donovan_dmc<br>
Twitter:<br>
http://twitter.com/Donovan_DMC<br>
===================================<br>
Sub2Janabell:<br>
https://youtube.com/channel/UC0NTNba35ADUstIoLm
YLiiA<br>
===================================<br>
My <span style="text-decoration:underline;" id="v">1.9,
1.10, 1.11</span> Skyblock/Guilds Server:<br>
IP: play.mcpsb.co<br>
Server store:<br>
http://store.mcpsb.co<br>
Server Website:<br>
https://www.mcpsb.co<br>
===================================<br>
Thanks for <span style="text-decoration:underline;"
id="sub">970</span> Subscribers! make sure to like,
comment, subscribe, and Stay Awesome!
===================================<br>
<!--End Template-->
<hr>
NOT PART OF TEMPLATE<br>
</div>
<b>Version:</b><br>
Change: <input id="vr"><br>
<button onclick="ver()">Update Version</button><br>
<hr>
<b>Subscriber Count:</b><br>
Change: <input id="cs"><br>
<button onclick="csub()">Update Subscriber
Count</button><br>
<hr>
<script type="text/javascript">
function ver() {
document.getElementById("v").textContent =
document.getElementById("vr").value;
}
function csub() {
document.getElementById("sub").textContent =
document.getElementById("cs").value;
}
</script>
</body>
</html>
[I'm trying to do it twice]
Am I doing somthing wrong here?
Solved, one more thing, is there a way to see if the input is the same as is in the span or if the input is empty? And I only want numbers used in them... is there a way to block other characters/replace themy once they are typed?
Aswell for the subscriber Ammount I want to get live numbers from akshatmittal.com or some other live counts service for youtube Subscribers. Is there a way to get the live Subscriber Count without php, ajax or anything besides javascript and html
The problem is that you are trying to get the data out of your text boxes with .innerHTML. Form-field values need to be gotten with .value.
Additionally, if the data being typed into the text boxes will not contain any HTML that needs to be parsed, you should use .textContent to set that data into your <span>s instead of .innerHTML since there isn't any HTML.
.value is for getting/setting form-field values (checkboxes, radio buttons, text boxes, etc.) or attribute values.
.innerHTML is for getting/setting non-form-field element content that will contain HTML markup. When using this to set content, any HTML in the value being set will be parsed by the browser.
.textContent is for getting/setting non-form-field element content that will not contain HTML markup. HTML markup will be ignored. .textContent is the better choice when no HTML will be gotten/set because it performs better than .innerHTML (doesn't have to parse anything).
<!DOCTYPE HTML>
<html>
<head>
<title>Donovan_D Minecraft - Youtube Description Template</title>
</head>
<body>
<h3>To View HTML Click Here </h3><br>
<!--Start Template-->
<div>===================================<br>
My Channel:<br>
https://youtube.com/c/DonovanDMinecraft<br>
===================================<br>
Twitch:<br>
http://twitch.tv/donovan_dmc<br>
Twitter:<br>
http://twitter.com/Donovan_DMC<br>
===================================<br>
Sub2Janabell:<br>
https://youtube.com/channel/UC0NTNba35ADUstIoLmYLiiA<br>
===================================<br>
My <span style="text-decoration:underline;" id="v">1.9, 1.10, 1.11</span> Skyblock/Guilds Server:<br>
IP: play.mcpsb.co<br>
Server store:<br>
http://store.mcpsb.co<br>
Server Website:<br>
https://www.mcpsb.co<br>
===================================<br>
Thanks for <span style="text-decoration:underline;" id="sub">970</span> Subscribers! make sure to like, comment, subscribe, and Stay Awesome!
===================================<br>
<!--End Template-->
<hr>
NOT PART OF TEMPLATE<br>
</div>
<b>Version:</b><br>
Change: <input id="vr"><br>
<button onclick="ver()">Update Version</button><br>
<hr>
<b>Subscriber Count:</b><br>
Change: <input id="cs"><br>
<button onclick="csub()">Update Subscriber Count</button><br>
<hr>
<script type="text/javascript">
// Get/set form-field values using the .value property
// Get/set non-form-field values with either .textContent or .innerHTML
function ver() {
document.getElementById("v").textContent = document.getElementById("vr").value;
}
function csub() {
document.getElementById("sub").textContent = document.getElementById("cs").value;
}
</script>
</body>
</html>
Try the following script changes to get the input value and change the textContent of the target element.
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
<script type="text/javascript">
function ver() {
document.getElementById("v").textContent = document.getElementById("vr").value;
}
function csub() {
document.getElementById("sub").textContent = document.getElementById("cs").value;
}
</script>

How to delete dom element from jquery object

i want to delete a particular class from my object as my requirement is to delete that dom data before displaying content. I have written a sample code but not able to get why that is not working. I jquery's remove is also not working. Please help me to get it solve. Thanks in advance
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// complete html
var test;
test = $('#issue_detail_first_row').html();
var x = $(test).find('#issue_detail_nav').not('.p1');
$('#sett').html(x);
});
</script>
</head>
<body>
<div id="issueDetailContainer">
<div id="issue_detail_first_row">
<div>
<div id="issue_detail_nav">
<div>test</div>
<div id="gett">
<div class="p1">
this content need to be deleted 1
</div>
</div>
<div class="p1">
this content need to be deleted 2
</div>
</div>
</div>
</div>
<br/><br/><br/><br/>
<div id="sett">
</div>
You need to remove the content from the DOM directly.
$("#issue_detail_first_row .p1").remove();
That will select the .p1 elements and remove them from the DOM
you can use remove function on javascript object.
If you want to preprocess it before displaying.
example
var a =$("#issue_detail_first_row").html();
var jhtml =$(a)[0];
$(jhtml).find('.p1').remove();
alert($(jhtml).html());
now use jhtml .
demo
http://jsfiddle.net/WXPab/14/
It seems that you're trying to duplicate a section, but without the .p1 elements.
You could use the clone()[docs] method to clone the section, the remove()[docs] method to remove what you don't want, and then insert its HTML.
$(document).ready(function() {
var test = $('#issue_detail_first_row').clone(); // clone it
test.find('.p1').remove(); // find and remove the class p1 elements
$('#sett').html( test.html() ); // insert the new content
});
Working example: http://jsfiddle.net/YDZ9U/1/
Only thing is that you'll need to go through and update the IDs in the clone, so that they're not duplicated on the page.

jQuery .append() not appending to textarea after text edited

Take the following page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"/>
</head>
<body>
<div class="hashtag">#one</div>
<div class="hashtag">#two</div>
<form accept-charset="UTF-8" action="/home/index" method="post">
<textarea id="text-box"/>
<input type="submit" value ="ok" id="go" />
</form>
<script type="text/javascript">
$(document).ready(function() {
$(".hashtag").click(function() {
var txt = $.trim($(this).text());
$("#text-box").append(txt);
});
});
</script>
</body>
</html>
The behavior I would expect, and that I want to achieve is that when I click on one of the divs with class hashtag their content ("#one" and "#two" respectively) would be appended at the end of the text in textarea text-box.
This does happen when I click on the hash tags just after the page loads. However when I then also start editing the text in text-box manually and then go back to clicking on any of the hashtags they don't get appended on Firefox. On Chrome the most bizarre thing is happening - all the text I type manually gets replaced with the new hashtag and disappears.
I probably am doing something very wrong here, so I would appreciate if someone can point out my mistake here, and how to fix that.
Thanks.
2 things.
First, <textarea/> is not a valid tag. <textarea> tags must be fully closed with a full </textarea> closing tag.
Second, $(textarea).append(txt) doesn't work like you think. When a page is loaded the text nodes inside the textarea are set the value of that form field. After that, the text nodes and the value can be disconnected. As you type in the field, the value changes, but the text nodes inside it on the DOM do not. Then you change the text nodes with the append() and the browser erases the value because it knows the text nodes inside the tag have changed.
So you want to set the value, you don't want to append. Use jQuery's val() method for this.
$(document).ready(function(){
$(".hashtag").click(function(){
var txt = $.trim($(this).text());
var box = $("#text-box");
box.val(box.val() + txt);
});
});
Working example:
http://jsfiddle.net/Hhptn/
Use the val() function :)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="hashtag">#one</div>
<div class="hashtag">#two</div>
<form accept-charset="UTF-8" action="/home/index" method="post">
<textarea id="text-box"></textarea>
<input type="submit" value ="ok" id="go" />
</form>
<script type="text/javascript">
$(document).ready(function(){
$(".hashtag").click(function(){
var txt = $.trim($(this).text());
$("#text-box").val($("#text-box").val() + txt);
});
});
</script>
</body>
</html>
Does that help?
The reason append does not seem to work is because the value of the textarea is made up of the child node, but by treating it as multiple seperate nodes the screen won't update, according to my Firebug. Firebug will show me the updated child nodes, but NOT the text I typed manually into the textarea, whereas the screen shows me the manually typed text but not the new nodes.
You can reference by value of textarea.
$(document).ready(function () {
window.document.getElementById("ELEMENT_ID").value = "VALUE";
});
function GetValueAfterChange()
{
var data = document.getElementById("ELEMENT_ID").value;
}
works fine.
if(data.quote) $('textarea#message').val($('textarea#message').val()+data.message +' ').focus();

Get updated value from a textarea and insert it into a div with jQuery?

here's an easy one (that I'm struggling with)! I have a textarea, a button, and an empty div. All I want to do is insert the updated contents of the textarea into the div onClick of the button. Here's what I've got so far:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function get_text() {
$("#preview").replaceWith( $("#editor").val() );
}
</script>
</head>
<body>
<form>
<textarea name="editor" id="editor">GrumbleCakes</textarea>
<input type="button" value="Preview" onclick="get_text();" />
</form>
<div id="preview"></div>
</body>
</html>
It works the first time you click the button... with the value that was in the textarea on page load ("GrumbleCakes"), but that's it. It won't work with any updated text.
You can set the innerHTML or text content of the preview div by using the html or text functions:
$("#preview").html($("#editor").val());
.replaceWith actually replaces the DOM element. So the div is removed and replaced with the text. Subsequent calls to the function will no longer find the div, since it's been removed.
I think you want to use
.html($("#editor").val()).
Both
$('#preview").html($("#editor").val())
and
$("#preview").text( $("#editor").val())
should work.
However, .html will allow anyone to inject html or javascript into your site leaving it wide open for cross-site scripting attacks...
jikes!!
man you are replacing div with the contents of the textarea. use this function instead:
function get_text(){
var t=$("editor").val();
$("#preview").text(t);
}

Categories