ID of draggable - javascript

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/

Related

Detect button click with javascript using parent class and no ID

I'm trying to simply detect the click of an html tag. It only works if the button has an ID, but my button has no id or class.
html
<div class="parent">
<button>Submit</button>
</div>
JS
document.getElementByClassName('.parent button').onclick = function() {
alert("clicked");
};
Use this, document.querySelector works just like css selectors.
document.querySelector('.parent button').onclick = function() {
alert("clicked");
};
You could use .querySelector() with addEventListener :
document.querySelector('.parent button').addEventListener('click', function()
{
alert("clicked");
});
<div class="parent">
<button>Submit</button>
</div>
document.querySelector('.parent > button').addEventListener('click', function() {
alert('Clicked!');
});
you are using getElementByClassName and giving it a Css Selector string.
therefore it returns null, as there is no element with class ".parent button"
Use querySelector instead,
document.querySelector('.parent button').onclick = function() {
alert("clicked");
};

Getting the text element of group_name

<div class="group_list_table_row" group_id="10">
<div class="group_name">Name of Course</div>
<div class="group_list_edit_row" style="left: 215px;">
Click me.
</div>
</div>
<script type="text/javascript">
/* This triggers when update button is clicked. */
$( ".update_group" ).click(function(event) {
var value = $(this).parent().parent().text();
alert(value);
event.preventDefault();
</script>
I was trying to get the text only of group_name class which is "Name of Course". However, the result of alert(value) also includes "Click me." and "Name of Course". Need help on this.
You can do this easier:
<script type="text/javascript">
/* This triggers when update button is clicked. */
$( ".update_group" ).click(function(event) {
var value = $('.group_name').text();
alert(value);
event.preventDefault();
});
</script>
Try this:
$(".update_group").click(function(event) {
var value = $(".group_name").text();
alert(value);
event.preventDefault();
});
as long as the previous answers provide a proper solution you might be interested why yours does not work, and this is because the ".group_name" element is not a parent of the parent of your element, as you might expected. It is apparently not a parent at all, containing only plaint text inside.
Therefore the $(this).parent().parent() call returns the ".group_list_table_row" element, that contains the two other divs and it's text is the concatenation of their contents.
A some indentation and things will be obvious:
<div class="group_list_table_row" group_id="10"> /*parent 2*/
<div class="group_name">Name of Course</div>
<div class="group_list_edit_row" style="left: 215px;"> /*parent 1*/
Click me.
</div>
</div>

Appending text from textarea to div on button click

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/

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

jquery this context

let's say I have two divs like this:
<div class="myDiv">
<textarea class="info_box" attribute="first" rows="4" cols="40">Enter text here...</textarea>
<button class="submit_btn">Click me!</button>
</div>
<div class="myDiv">
<textarea class="info_box" attribute="second" rows="4" cols="40">Enter text here...</textarea>
<button class="submit_btn">Click me!</button>
</div>
I want to be able to get the textarea within each div when I click on my button 'submit_btn'. I tried something like this:
$('body').delegate('.myDiv .submit_btn', 'click', function(){
var myTextarea = $('.info_box', this);
});
But that returns undefined
Any help please
You can do this :
$('body').delegate('.myDiv .submit_btn', 'click', function(){
var myTextarea = $(this).closest('myDiv').find('.info_box');
});
Another solution :
$('body').delegate('.myDiv .submit_btn', 'click', function(){
var myTextarea = $(this).siblings('.info_box');
});
Note that if you have a version of jQuery more recent than 1.7, it's better to use on instead of delegate.
That is because this is scoped to .myDiv .submit_btn and inside of there, the textarea does not exist. Perhaps try this.parentNode as the scope.
so if you want to get the textarea, why not simply do this
$('.submit_btn').on('click',function(){
var myTextarea= $(this).siblings(".info_box");
});
fiddle

Categories