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
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");
};
<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>
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/
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
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