How to replace an element by textarea using javascript - javascript

What I am making is basically is a user profile that has a text box for description added by the user about himself/herself. Although I have a separate page where the user can edit the profile, but I want to provide a feature that when a user hovers over his description box then he sees an edit button.
If the user clicks that button, then he/she can edit the description field there itself, and the backend will be updated using Ajax. The ajax call and the backend processing is simple, but how can I replace the html with a textarea and submit button and again put back the original html using javascript.
Here is what my html look like
<div id="personalText" >
edit
<p id="descText">{{profile.desc}}</p>
</div>
When somebody clicks editButton I want to replace the html inside personalText with a textarea containing the original text in descText, and an update button. And when the user edits the text and click update, I will update the backend model and again put the <a> tag and the <p> tag.
Can anybody help. I seem to know how to do parts of it, but can't figure out how I will replace the original structure on update click.

Instead of creating/destroying DOM elements an option would be to have the edit <textarea/> hidden.
<div id="personalText" >
<div class="display">
edit
<p id="descText">{{profile.desc}}</p>
</div>
<div class="edit" style="display:none;">
<input type="submit" value="Update"/>
<textarea>{{profile.desc}}</textarea>
</div>
</div>
Then your jQuery can simply toggle the elements and handle your ajax post.
$("input[type='submit']").on("click", function() {
$.ajax({
url:"/your/url/"
}).success(function(){
$(".display, .edit").toggle();
$("#descText").html($("textarea").val());
});
return false;
});
Example on jsfiddle

$('#editButton').click(function(){
var text = $('descText').text();
var textArea = $('<textarea></textarea>');
textArea.value = text;
$('#personalText').replaceWith(textArea);
});

Related

How to create a jQuery click handler based on a matching pattern?

I have multiple reason codes (For ex: RC1, RC2...). For each of these reason codes, I want to give the user a text box in which they can enter some comments. Also give them the option of adding multiple text boxes for each reason code.
To allow the user to add a dynamic text box, I have a button which allows the user to do so. If there was only one reason code, I can easily just just append a text box to the pre-existing text box using jquery (Using something like this: JQuery adding class to cloned element).
However since I have multiple reason codes(over 200) it doesnt make sense of having button for each reason code in Jquery. Is there a way for me to search by a basic identifier.
I have pasted the contents of the HTML file generated by my JSP file.
<div id="Reasoncode1">
<div id="inputTextBox_Reasoncode1">
<input type="text" placeholder="Add some text"/><button class="button_Reasoncode1">
+</button>
</div>
</div>
<p>
Reason code2
</p>
<div id="Reasoncode2">
<div id="inputTextBox_Reasoncode2">
<input type="text" placeholder="Add some text"/><button class="button_Reasoncode2">
+</button>
</div>
</div>
My Jquery attempt is:
$(".button_Reasoncode1").click(function() {
$('#Reasoncode1').clone().insertAfter('#inputTextBox_Reasoncode1');
});
$(".button_Reasoncode2").click(function() {
$('#Reasoncode2').clone().insertAfter('#inputTextBox_Reasoncode2');
});
I dont want to do this for each and every reason code, i was wondering if there is a better approach to this.
My JSFiddle: https://jsfiddle.net/mvp71L61/
Assuming all buttons are statically added to the DOM,
$("button[class*='button_Reasoncode']").click(function() {
var rCode = $(this).attr('class').match(/\d+/g)[0];
$("div[id='Reasoncode'+rcode]").clone().insertAfter("input[id='inputTextBox_Reasoncode'+rcode]");
});

Escape HTML tag in <textarea>

I have one <textarea> tag in my website where the user can put there HTML code and see its preview. My problem is when the user enter code below mention in my <textarea> my preview functionality getting fail :
<html>
<textarea>Some code to show</textarea>
</html>
So question is how can I escape this html code in my <textarea> tag as I know the problem is coming because </textarea> tag.
Any solution on this please.
Edit
Question is about using </textarea> within a textarea.
Problem visible here: http://jsfiddle.net/hrP6F/
EDIT: for your purpose this would do:
<textarea>
Outside Textarea
<textarea>Inside Textarea</textarea>
</textarea>
source: How can I embed a textarea inside of another textarea in HTML?
Or use contenteditable like someone already mentioned -> click
FIRST ANSWER: Im not sure I understand perfectly but still. You want to display the code inside text area somewhere else for instance?
You could do that on click like this (I reckon you are not statically putting nested text areas in html?):
HTML:
<textarea id="textarea" >Something code to show</textarea>
<button onclick="show()">show</button>
<div id="showArea"></div>
JS:
function show(){
var t = document.getElementById('textarea').value;
document.getElementById('showArea').innerHTML = t;
}
This is of course if what you want is to display html that is inside textarea. you could also put another textarea inside first one and it will work.
If you want the results to display dynamically you could use
<textarea id="textarea" onkeyup="show()">Something code to show</textarea>
This works even if you put your code (html and text area) inside text area - it displays it, I tested it
You can add a output div for preview purpose. Below is the jQuery script
HTML
<textarea placeholder="Enter your html"><b>test</b></textarea>
Run
<div class="op"></div>
JS
$('.run').click(function(){
$('.op').html($('textarea').val());
return false;
});
DEMO

Appending textarea data on pressing Enter key to a comment post

I am creating a commenting system whose structure is like below:
<div id="main_comment_DIV_id_no">
//Some user comment
</div>
<div "reply_DIV">
<textarea name="reply_comment" id="reply_comment" rows="1" style="width:100%">
</textarea>
</div>
I want to append the textarea data to the main comment (also updating the database) part on pressing the Enter key.
I can easily accomplish this if there is only one (or few) DIVs, but here I have n numbers of DIVs so I am searching for a solution to append the nth reply data to the nth main_comment_DIV only.
Any help will be highly useful?
Here is the logic. That might help you.
When you click on enter, call ajax function and pass reply_comment with it. In php side, add that comment into the database and fetch all messages from database. On ajax success,
$('#main_messages_container').html(null);
$('#main_messages_container').html(res);
This will give you all updated messages with the new one. You don't need to append any div container in this case.
DETAILED ANSWER:
$('#enter_key_button').on('click',function(){
$.ajax({
type: 'post',
url: 'process.php',
data: {textarea : textarea},
success: function (res) {
//alert(res);
$('#main_messages_container').html(null);
$('#main_messages_container').html(res);
}
});
});
You can try with the keyup event and jquery class selector. You should not use id as selector, because you said you have n number of main comment dive, so id of n number of divs should not be same.
<body>
<script type="text/javascript">
$(document).ready(function(){
$('[name="reply_comment"]').keyup(function(e){
if(e.which === 13){
var comment = $(e.currentTarget).val(),
commentDiv = $('.main_comment_DIV_id_no');
//you have the comment here, so you can call an ajax request to update it in the database.
$(e.currentTarget).val("");
//if the blank div where you want to add the comment is already present, then write
$(commentDiv[commentDiv.length-1]).text(comment);
// Else no need to add the blank div initially, just create a new div and add the comment there.
$(commentDiv[commentDiv.length-1]).after('<div class="main_comment_DIV_id_no">'+comment+'</div>');
}
})
})
</script>
<div class="main_comment_DIV_id_no">
Some user comment
</div>
<div class="main_comment_DIV_id_no">
Some user comment2
</div>
<div class="main_comment_DIV_id_no">
</div>
<div id="reply_DIV">
<textarea name="reply_comment" id="reply_comment" rows="1" style="width:100%" ></textarea>
</div>
</body>

JS-Linking to an anchor inside the document in the onclick() event

I have a problem on the following code, imagine the rest is okay (html, head, body etc)
What I want to do is, when you click on one of the buttons the hidden text/images in the section show or hide, the code does that just fine. The problem is I also want it to take you to an anchor in that newly appeared section when you click on the button, and I cant seem to do that.
Here's the code on the HTML
<h2 class="especial">TITLE</h2>
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
<p class="normal"><input type=image src="images/img_beta/buttonimage2.png" onclick="show_section2();">Section2</p>
<hr>
<div id="Section1" style="display:none">
<a id="Section1_anchor"><h2 class="especial">Sect1TittleHere</h2></a>
<p class="interior">Blablah this is the content of section1</p>
</div>
<div id="Section2" style="display:none">
<a id="Section2_anchor"><h2 class="especial">Sect2TittleHere</h2></a>
<p class="interior">Blablah content of section2</p>
</div>
And here's the JS function that controls the onclick event, I have one for each section, but they are all the same.
<script language='javascript'>
//Variables
var sect1_guardian=0, sect2_guardian=0, sect3_guardian=0;
function show_sect1(){
if (sect1_guardian == 0) { document.getElementById("Section1").style.display="block";
sect1_guardian=1;
//Close the other sections if opened
document.getElementById("Section2").style.display="none";
document.getElementById("Section3").style.display="none";
//Reset guardians
sect2_guardian=0;
sect3_guardian=0;
}
else {
document.getElementById("Section1").style.display="none";
sect1_guardian=0;
}
}
Where and how should I add the link to the anchor? If i tried adding it to the button tag and the onclick event. I do something like this
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
Because the onclick event is in the image and I don't want the text to be hiperlinked. Clearly I'm loosing something/doing something wrong, probably an humiliating mistake, but I ask for suggestions and corrections.
If it's exactly a copy paste of your code, the onclick handler is called 'show_section1()' and the function is called 'show_sect1()'. Notice sect != section :) .
Should we look further?
You can have the html you proposed and do something like this:
window.location = document.getElementById("Section1").parentNode.href;
Replace 'Section1' with your particular section.
Allright, I found a solution, it was far easier and probably nobody said it because I was presenting the problem in the wrong way, but perhaps this will help somebody.
I wanted to make the button take you to an anchor in the document, right?
The code above worked well, you clicked on the button and it showed hidden text, or hide it.
Now, adding the following to the button code, it does the anchor thingy also.
<p class="normal"><input type=image src="images/img_beta/buttonimage1.png" onclick="show_section1();">Section1</p>
I just added a tag to link the button, and used the HTML id (which I already used for the JS) to function as an anchor. I hope to have explained it clearly, and that it helps somebody!
Key was, use the html id as an anchor

Data only to click the div

Good morning, everyone.
I have a doubt. I have a list of div. textarea with text inside it and inside. text for a button event. Want to get only the data from the textarea div that the person clicking the button.
I would be very grateful for the help. thanks
Example code.
<div class="text">
<textarea id="texts" class="texts" rows="5" cols="45" name="textarea"> </ textarea>
<div class="bt" id="1234556">
<div class="button"> Send </div>
</div>
</div>
$('.button').click(function() {
var text = $('#texts').val();
// do something with text
alert(text);
});
Working demo at http://jsfiddle.net/PPcxm/
As long as you have the same structure (and presuming you have more than one example on the page as the button is a class and textarea is an id, the following would work:
$(".button").click(function()
{
var text = $(this).parent().prev().val();
});
Since you have a list of div.text your best bet is to query based upon the structure of your DOM.
$(".button").click(function() {
var $textArea = $(this).parents(".text").find(".texts");
//Do something with $textArea.Val();
});
What we simply do is call .parents() on the current div.button which will allow us to get the div.text element. From there you can simply find your textarea.texts element and get the corresponding value.
Code example on jsfiddle.

Categories