So i'm trying to add some text to a textarea when a user clicks on an edit link. The user will click the edit link, which will then show a pop-up box with a textarea that shows the user their current comment.
There are going to be multiple instances of .comment-block with various different texts, as this text will be a user input comment. I want to take the .text text from the specific .comment-block depending on which .edit link was clicked. So if one comment-block has the text of "hello" and the other has text of "world", i want to take either "hello" or "world" and put it in the textarea, depending on which edit link was clicked from within the parent comment-block.
Hope that makes sense.
<div class="comment-block">
<div class="row">
<div class="col-xs-1">
<img src="/graphics/blank-avatar.jpg">
</div>
<div class="col-xs-11">
<p>
<span class="name">David Johnson</span>
<span class="text">Nice selection of images! Well done!</span>
<span class="edit">Edit</span>
</p>
<div class="date-posted">
Posted at 14:10 on 23rd September 2014
</div><!-- .date-posted -->
</div><!-- .col-xs-10 -->
</div><!-- .row -->
</div><!-- .comment-block -->
The JS
$("span.edit").click(function() {
//Get the text
var text = $.trim($(".comment-block p span.text").text())
//Create a text area selector (container, rather)
var textarea = $("#community-message-alt");
//Give the textarea a value
$("textarea", textarea).val(text);
textarea.show();
});
Something like this?
$(".edit").click(function(){
var text = $(this).parent().find(".text").first().html();
$("#ta1").html(text);
});
DEMO FIDDLE
You can do something like this:
$(".edit").click(function(){
var text = $(this).prev(".text").text();
var textarea = $("#community-message-alt");
textarea.text(text);
textarea.show();
});
Related
How can i get formatted HTML of selected part instead of simple text
Here is a script that add content to <div class="container"> </div> when we select some text and press Get Selection button, with every time class mySlides Okay
But here is all text goes in one by one only in this structure, even though we select any HTML text like <p> <h2> etc part.
<div class="container">
<div class="mySlides"> Some Text </div>
<div class="mySlides"> Some other </div>
<div class="mySlides"> Some another </div>
</div>
But Now i want a little change here, my requirement is When i select text then it should be get with formatted rendered HTML Just Like This.
<div class="container">
<div class="mySlides"> Some Text </div>
<div class="mySlides">
<h3>This is heading 3</h3>
<p>
Select any part of this sentence
and press the button. Select any part of this sentence
and press the button. Select any part of this sentence
and press the button
</p>
</div>
<div class="mySlides"> Some another </div>
</div>
i also checked this but i am not able to get solve my issue.
means simple i want rendered HTML format of selection.
My Whole Code IS Here:
const keySelected = new Set();
document.addEventListener('keydown', (e) => {
keySelected.add(e.which);
if(keySelected.has(17) && keySelected.has(90)){
getSelectedText();
}
});
document.addEventListener('keyup', (e) => {
keySelected.delete(e.which);
});
// Function to get the Selected Text
function getSelectedText() {
var selectedText = '';
// #### create a new element with variable (nw) #### //
var nw = document.createElement("div"); // Element's tag
nw.className = "mySlides"; // Element's class name
// some applied style
// window.getSelection
if (window.getSelection) {
selectedText = window.getSelection();
}
// document.getSelection
else if (document.getSelection) {
selectedText = document.getSelection();
}
// document.selection
else if (document.selection) {
selectedText =
document.selection.createRange().text;
} else return;
// #### get the Selected text appended to body #### //
nw.innerHTML = selectedText;
document.getElementsByClassName('container')[0].prepend(nw); // Append element to body
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"> </div>
<button id="mybtn" onclick="getSelectedText()">Get Selection</button>
<p>
Select any part of this sentence
and press the button. Select any part of this sentence
and press the button. Select any part of this sentence
and press the button
</p>
<h3>This is heading 3</h3>
<p>
Select any part of this sentence
and press the button. Select any part of this sentence
and press the button. Select any part of this sentence
and press the button
</p>
Plz Help Me How to do that.
I am struggling to find a way to get the name of the parent ID in a string. The code is part of a chat app written in Javascript and jQuery. Each time someone enters a message, the string outputs a block with username and text with a Close-x box before the username. When someone clicks the Close-x, it needs to grab the ID name of the parent div(json.innerdiv). The div with ID named json.outterdiv is the ID which allows me to delete the whole block message where as the json.innerdiv allows me to remove text, change text or just hide/show text. I tried searching on here for answers but all I ever get is undefined or null results.
My code:
var bubble = $('<div class="bubble-container" id="'+json.outterdiv+'"><span class="bubble"><div class="bubble-text" id="'+json.innerdiv+'"><p><div class="close-x" onclick="DelBubble(this)"></div>Some text</p></div></div>');
function DelBubble(clicked_id) {
alert($(this).parent().attr('id'));
}
Pass the event to onclick then get the closest of a class selector using jquery:
var bubble = `
<div class="bubble-container" id="2">
<span class="bubble">
<div class="bubble-text" id="3">
<p>
<div class="close-x" onclick="DelBubble(event)">
Close
</div>
Some text
</p>
</div>
</div>`;
$('body').append(bubble)
function DelBubble(e) {
const bubbleTextId = $(e.target).closest('.bubble-text').attr('id');
const bubbleContainerId = $(e.target).closest('.bubble-container').attr('id');
console.log({bubbleTextId,bubbleContainerId})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I am trying to add 3 onclick popups to one page. But it seems as soon as I add the second one the first one stops working. I renamed them different and still wont work. Please help.
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("mypopup");
popup.classList.toggle("show");
}
</script>
<span class="tooltip" onclick="myFunction()">
<div class="amount">$234.41</div>
<span class="tooltiptext" id="myPopup">This is how much money our community has raised to help provide meals and support to animal charities in our local communities.</span>
</span>
<!----------------------------------------------------------------------------------------------------------------------------------- Fur Baby Of The Month -->
<span class="tooltips" onclick="myFunction()">
<div class="furbm">
<img src="https://www.capebretoncares.com/images/icons/amazon.png">
</br>
</div>
<span class="tooltipstext" id="mypopup">Fur Baby Of The Month
</br>
<img src="https://www.capebretoncares.com/images/search-icons/duck.png">
</br>
congratulations "Fluffy"
</span>
</span>
Your span content were not valid HTML - you cannot wrap a div in a span - and </br> is the wrong way around - should be <br/> if you want the XHTML slash
Here is the recommended way
target the container (delegate/delegation)
use the class of the clickable element
use a data- attribute to name the element you want to access when clicking
Alternatively use erlative addressing by wrapping each item in a yet another container div and use tgt.closest(".parentClass").querySelector(".popupClass") to access the popup
Here I use the data-attributes - as you can see it does not matter if the popup is a span or a div in this case.
window.addEventListener("load", function() { // on page load
document.getElementById("container").addEventListener("click", function(e) { // clicking anything in the container
const tgt = e.target;
if (tgt.classList.contains("tooltip")) { // we clicked a tooltip
const show = tgt.dataset.pop; // getting the data-pop content
document.getElementById(show).classList.toggle("hide");
}
})
})
.hide {
display: none;
}
<div id="container">
<span class="tooltip" data-pop="myPopup1">Look</span>
<div class="amount">$234.41</div>
<span class="tooltiptext hide" id="myPopup1">This is how much money our community has raised to help provide meals and support to animal charities in our local communities.</span>
<hr/>
<span class="tooltip" data-pop="myPopup2">Look</span>
<div class="furbm">
<img src="https://www.capebretoncares.com/images/icons/amazon.png">
</div>
<div class="tooltipstext hide" id="myPopup2">Fur Baby Of The Month
<img src="https://www.capebretoncares.com/images/search-icons/duck.png"> congratulations "Fluffy"
</div>
</div>
If you want to close when clicking elsewhere, you can again use addEventListener and test that the target is not the popup and not the popup link and then close all open popups. That code is a little more complex
I am new to jquery and am trying to code this for a class. I want to program a button that shows a random div paragraph that will disappear and be replaced by another when you click the button again.I am using three buttons to show things. Each button has four divs with the same class name and each has one paragraph in it. I tried using this code but it will show one paragraph and then add another under it. Another issue I'm having is that the button doesn't always work when I click it.The fourth button is for the user to input something that will be appended to each paragraph.
JQUERY
$(document).ready(function(){
$("#first").click(function(){
var random = Math.floor(Math.random()*5);
$(".firstin").eq(random).toggle();
});
$("#second").click(function() {
var random = Math.floor(Math.random()*5);
$(".secondin").eq(random).toggle();
});
$("#third").click(function(){
var random = Math.floor(Math.random()*5);
$(".thirdin").eq(random).toggle();
});
$("#button2").click(function(){
var place= $("#in").val();
if (place.length > 0){
$("div").append("<p> text" +place+ "</p>");
$("#in").val('');
}
});
});
HTML
<div class ="firstin">
<p>
text
<br>
text
</p>
</div>
</div><div class ="secondin">
<p>
text
<br>
text
</p>
</div><div class ="thirdin">
<p>
text
<br>
text
</p>
</div>
<button id = "first">Category1</button>
<button id = "second">category2</button>
<button id = "third">category3</button>
<input type = "text" id = "in" placeholder = "Text">
<button id = "button2">Text</button>
CSS
.first{ display:none;
}
</style>
Instead of this:
$("div").append("<p> text" +place+ "</p>");
append() adds whatever you have passed to it at the end of the element.
Use
$("div").html("<p> text" +place+ "</p>");
html() replaces the content inside
I have the div event_wrapper that can be dynamically added on a page by clicking the link in add-event. The user can delete/add these divs as many times as they want. If the user chooses to delete all of these event_wrapper divs, I want to change the text inside add-event. Here is the HTML:
<div class="event_wrapper">
<div class="event">
<div class="well darkblue-background pull-left">
<a class="close tooltip" data-tooltip="Delete this event"><i class="icon-remove"></i></a>
</div>
</div>
</div>
<div class="add-event pull-left">
And Then...
</div>
(I am using jQuery) I tried using :empty selector, but it does not seem to be working. Any suggestions? Thanks!
Have a look at - https://stackoverflow.com/a/3234646/295852
And then use contentChange() like:
$('.event-wrapper').contentChange(function(){
if($(this).children().length > 0){
// events exist
$(".add-event pull-left").children('a').html('And Then...');
} else {
// no events
$(".add-event pull-left").children('a').html('your text');
}
});
if($(".event-wrapper").html() == null) {//looking inside event-wrapper; if it contains any thing
$(".add-event a").html("whatever");
}
if(!$(".event_wrapper")){
$(".add-event pull-left").html("Whatever text you want here"); //changes the text of the div
//or
$(".add-event pull-left").children('a').html("whatever text you want here"); //changes the text of the anchor child
}