Appending text from textarea to div on button click - javascript

I have a button that on a click event generates a div. The newly createded div is draggable and stays contained within another div. The issue: As the div is being created I am trying to append text to it. Nothing is getting appended due to not properly grabbing the value from the textarea and appending to the div. JSFIDDLE
Jquery
$('#button').click(function(e) {
$('<div class="draggable" class="ui-widget-content"></div>').draggable({ containment: "parent" }).appendTo('.middle-side');
$('textarea').val().appendTo('.draggable');
});
HTML
<textarea rows="4" cols="50" placeholder="Enter Text Here!"></textarea><br/>
<input type="button" id="button" value="Add Div with Text"/><br/>
<div>
<div class="middle-side"></div>
</div>

Use .text instead of .appendTo:
$('<div class="draggable" class="ui-widget-content"></div>')
.draggable({ containment: "parent" })
.appendTo('.middle-side')
.text($('textarea').val())
Example: http://jsfiddle.net/0wbnud4k/11/
Alternatively, perhaps a little cleaner:
$('<div />', {
'class': 'draggable ui-widget-content',
text: $('textarea').val(),
appendTo: '.middle-side',
draggable: {
containment: 'parent'
}
});
Example: http://jsfiddle.net/0wbnud4k/13/
.appendTo is a method on the jQuery object. The text you retrieved with .val is just a string, and therefore does not have an .appendTo method.

You should use text method instead of appendTo and change it as follows:
var text = $('textarea').val();
$('.draggable').text(text);
you can also check it at:
http://jsfiddle.net/0wbnud4k/12/

Related

why does jQuery's .html("abc") only insert temproarily?

i have an html button that calls a function, however when the buttons clicked, the inserted div only appears for a second and then disappears, both visually and in the html tree.
function openBox () {
$( '#0' ).click( function () {
var container =
$( "<div>" ).css({
height : "200px",
width : "200px",
position : "absolute",
"background-color" : "black",
});
$( 'button.box' ).html( container );
});
}
if i insert the div created in JS into 'button.box' it displays only temporarily, for a split second. the html looks as such:
<div class="holder">
<button id="0" class="box fa fa-paint-brush"></button>
</div>
but if inserted into 'div.holder' with the same html structure however, the box displays continuously as expected, but the button is gone.
What is the reason for the button disappearing with continuous display of box & the temporary display of box in their respective circumstances, and what can be done about the button disappearing?
When adding the new container to the .holder class, the button disappears because the .html() method is replacing the content in the selected element. In order to add the box and keep the button, .append() is the appropriate jQuery method.
The code below implements what I understand to be the desired outcome; the new div appearing after the button. The new <div> is appended to the existing <div>, after the button by using $("button").parent() to select the existing <div>. Appending the new <div> to the button itself $("button").append() will add the div to the inside of the button.
<div class="holder">
<button id="0" class="box fa fa-paint-brush" type="button"></button>
</div>
<script>
$(document).ready(function(){
$('#0').click( function () {
var container = $( "<div>" ).css({
height : "200px",
width : "200px",
position : "absolute",
"background-color" : "black",
});
$(this).parent().append( container );
});
});
</script>
More information about the jQuery append method, and others, can be found in their documentation: http://api.jquery.com/append/

traverse element inside the div

html:
<div style="width: 260px;margin:25px 0 0 30px">
<input type="checkbox" name="send_email" class="delete_followup" />Send email alerts
<input type="checkbox" value="delete" type="checkbox" />Send SMS alerts <button type="submit" name="delete" value="{{follower.id}}" class="delete_follower">Delete</button>
</div>
js:
$(".delete_followup").click(function(){
var $this = $(this);
$(this).find(".delete_follower").show();
});
I want to show the hidden button on clicking the delete_followup class.i TRIED WITH ABOVE jQuery but not working.
Or try .nextAll:
$(this).nextAll(".delete_follower").show();
Working here: http://jsfiddle.net/tw5XK/
The delete_follower element is not a decedent of delete_followup element, it is a sibling element so instead of find() you need to use siblings()
$(".delete_followup").click(function(){
var $this = $(this);
$this.siblings(".delete_follower").show();
});
You are trying to search downward into the div, when you already have a reference to the element you want. Making it way more complicated than it needs to be lol
$(".delete_followup").click(function(){
$(this).show();
});
Whenever you trigger off a click event, the actual element clicked on is passed through as the scope of the function. Since you are triggering off the click of ".delete_followup", that div is your element scope
Try this:
$(".delete_followup").click(function () {
if (this.checked) {
$(this).siblings(".delete_follower").show();
} else {
$(this).siblings(".delete_follower").hide();
}
});
Demo here

ID of draggable

I want to get the id of the div i am moving.
I have tried different methods, nothing worked.
So why isn't this working?
$('#content').children().draggable({
drag: function (event, ui) {
var id = $(this).attr("id");
$('#textarea').val(id);
}
http://jsfiddle.net/pX2T4/
This doesn't work because you are not finding the id of $('#content'), but of the child div, which does not have an id set. Thus, give the child an ID and it will find that one.
It's because $(this) is refering to the inner div marked with the class
see http://jsfiddle.net/pX2T4/
<div id="content">
<div class="content" id="foo">
<textarea name="" id="textarea" cols="30" rows="10"></textarea>
</div>
</div>
$('#content').children().draggable({
drag: function (event, ui) {
var id = $(this).attr("id");
console.log(id);
console.log($(this));
$('#textarea').val(id);
}
});
outputs "foo"
Instead $(this) use $("#content")
Try this:
http://jsfiddle.net/pX2T4/4/

How to add/append and toggle items to the div on every click of an link in jquery?

I am having the div like below..
<div id="div1">Edit your content
<a id="link1" href="#">click to Edit</a>
<textarea id="text1" cols="3"/>
<input type="button" id="button1" value="Save" />
</div>
What i want is..
I want to show and hide the textarea and save button every time the link is clicked.
And when an save button clicked the textarea content has to be added before the textarea as listitem, every time the save button clicked the edited text has been updated into that list.
Please anyone guide me to do this..
The simples approach would be if the Edit your content part could be wrapped in a container of its own, so that the content of that container could be replaced entirely upon save:
<div id="div1">
<span class="content">Edit your content</span>
<a id="link1" href="#">click to Edit</a>
<textarea id="text1" cols="3"></textarea>
<input type="button" id="button1" value="Save" />
</div>
$('#div1 > a').click(function() {
var parent = $(this).closest('div');
parent.find('textarea').val(parent.find('.content').html());
parent.find(':input, .content, a').toggle();
});
$('#div1 > input[type=button]').click(function() {
var parent = $(this).closest('div');
parent.find('.content').html(parent.find('textarea').val());
parent.find(':input, .content, a').toggle();
});
Demo
You'll note that the declaration of parent could easily be replaced with #div1 in this particular example, but with this code, you could easily change the #div1 > a selector to one that matches several elements (i.e. .editable > a; demo)
Edit
It appears I misread your question the first time around, but the changes aren't all that big.
Rather than setting the textbox to the value of your .content, you would clear it each time you're showing it. Also, you might not want to hide the .content each time the edit link is clicked. At the click of the save button, you create a new element, and append that after the last .content, rather than updating the existing one.
$('#div1 > a').click(function() {
var parent = $(this).closest('div');
parent.find('textarea').val('');
parent.find(':input, a').toggle();
});
$('#div1 > input[type=button]').click(function() {
var parent = $(this).closest('div');
$('<div/>', { 'class': 'content' })
.html(parent.find('textarea').val())
.insertAfter(parent.find('.content:last'));
parent.find(':input, a').toggle();
});​
Note that I've changed .content to a div, because of its block-level behavior. This should of course be reflected in the initial markup as well.
Demo
Edit (2)
To account for your question in comments, about adding the textarea and save button upon link click, you'd have to make a few changes. First of all, the link click listener would have to be updated with code to add the elements, and presumably with a first check to see whether or not they exist already (i.e. second click of link button):
$('#div1 > a').click(function() {
var parent = $(this).closest('div');
var txt = parent.find('textarea');
if(txt.length == 0) {
txt = $('<textarea/>', { id: 'text1', cols: 3 });
txt.appendTo('#div1');
$('<input />', { type: 'button', id: 'button1' }).val('Save').appendTo('#div1');
}
txt.val('');
parent.find(':input, a').toggle();
});
Second, your listener $('#div1 > input[type=button]') will no longer work exactly as written, because there is no such button in the document at the time when the selector is evaluated. To fix this, you could either use a live delegate, such as:
$('#div1').on('click', 'input[type=button]', function() { ... });
Demo. (for earlier jQuery versions, use .delegate(selector, event, handler) rather than .on(event, selector, handler).)
... Or, you could add the listener immediately to the button as you're creating it:
$('<input />', { type: 'button', id: 'button1' })
.val('Save')
.appendTo('#div1')
.click(saveEdit);
Demo
As a bonus, I'm adding focus to the textbox after showing it in these demos. You may want that as well.
you can do it like this
HTML
<div id="div1">Edit your content
<a id="link1" href="#">click to Edit</a>
<ul id="NewElement"></ul>
<textarea id="text1" cols="3" style="display:none;"></textarea>
<input type="button" id="button1" value="Save" />
</div>​
Jscript
$('#link1')​.click(function(){
$('#text1').toggle();
});
$('#button1').click(function(){
$('#NewElement').append('<li>' + $('#text1').val() +'</li>');
});
Live Demo
​
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#link1').click(function(){
$('#some').toggle();
});
$('#button1').click(function(){
$('ul').append('<li>'+$('#text1').val()+'</li>');
})
})
</script>
</head>
<div id="div1">Edit your content
<a id="link1" href="#">click to Edit</a>
<ul></ul>
<div id="some">
<textarea id="text1" cols="3"/></textarea>
<input type="button" id="button1" value="Save" />
</div>
</div>

jQuery - drag element inside DIV / or sortable element

I'm having a problem with dragging a div inside an other div element.
HTML looks like this:
<div id="grid">
<div id="el1" style="width:300px"></div>
<div id="el2" style="width:100px"></div>
<div id="el3" style="width:100px"></div>
<div id="el4" style="width:100px"></div>
</div>
All elements are draggable and have the css style float:left;position:relative;.
When I drag el1 to the place of el3 it will work, but of course it will overlap the element el3.
The draggin jquery draggable is working fine but I want to insert div with id el1at the HTML code in this position.
That it will look like this:
<div id...>
<div id="el2...
<div id="el3...
<div id="el1...
<div id="el4...
</div>
My problem now is, that this is a grid. el1 has the width of '300' all other the width of '100'. Dragin el1 to the place of el3 should swap el2, el3 and el4 to the place of el1 and el1 to the place of el2, el3, el4.
To get this behaviour I think I'm needed to move the div HTML code after el4. But how to determine which element is the nearest?
------- UPDATED-------
I way trying to use sortable... see here http://jsfiddle.net/vwK5e/2/
But if you put the red box over number 3, the red box will be in the second line (correct) but number 4 should be next to number 3 cause of the empty space.
TIA
frgtv10
Refer to http://jqueryui.com/demos/sortable/#display-grid
I guess you want functionality like this.
Answer
A different kind of jquery sortable
My solution looks like this:
Instead of jQuerys draggable I'm now using sortable (link to sortable).
In addition to this I'm now getting the help of the jQuery plugin called masonry(link to masonry)
Example:
// Masonry
$('#container').masonry({
itemSelector: '.element',
isResizable: true,
columnWidth: 100
})
// Sortable
$('#container').sortable({
items: '.element',
forcePlaceholderSize: true,
placeholder: 'card-sortable-placeholder element',
tolerance: 'pointer',
handle: '.handle',
cursor: 'move',
cancel: '.notdrag',
start: function(event, ui) {
ui.item.addClass('dragging').removeClass('element');
ui.item.parent().masonry('reload')
},
change: function(event, ui) {
ui.item.parent().masonry('reload');
},
stop: function(event, ui) {
ui.item.removeClass('dragging').addClass('element');
ui.item.parent().masonry('reload');
}
});

Categories