I have the below code and it works but what is the right way to get table onclick of add
HTML
<div>
<h4 class="titlebar">
Skills
<small><a onclick="return false;" href="/add/" data-span="3">Add</a></small>
</h4>
<div class="body">
<table class="table">
<tbody>
<tr><td width="125"></td></tr>
</tbody>
</table>
</div>
</div>
JQuery
var TableBlock = $(this).closest('.titlebar').next().children('table');
this points to Add link
You didn't mention who is the parent of <div class="body"> and <h4 class="titlebar"> which is critical.
$(this).closest('table-parent(the missing parent)').find('table');
find is better than childern because it will work even if the table get nested in future development.
If you want only the first matched table:
.find('table').first();
//Or
.find('table:first');
Update:
Based on your question update, I would add to the parent div a class or an id:
<div class="parent" >
<h4 class="titlebar">
...
Then:
$(this).closest('div.parent').find('table');
If you can't change the DOM:
$(this).closest('h4.titlebar').parent().find('table');
Or:
$(this).closest('h4.titlebar').siblings('.body').find('table');
Related
I have a problem regarding jquery selectable , I have div that contains user information , this is my div
<div class="user-container" id="append_users">
<div class="fc-event draggable-user" ondblclick="sys.callUserProfile('+user.id+')" id="user_'+user.id+'"style="z-index: 9999;" onmousedown="sys.mouseDown()" onmouseup="sys.mouseLeave()">
<div class="container-fluid">
<input type="hidden" value="'+user.id+'" id="user_'+ user.id + '_value" class="userId">
<div class="row">
<div class="col-xs-3 avatar-col">
<img src="'+getUserImage(user.avatar)+'"width="100%">
</div>
<div class="col-xs-9 data-col">
<p class="fullName dataText" >'+user.fullName+'</p>
<p class="usr_Gender dataText" >Male</p>
<div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
<p class="user_id" style="float:right;margin:3px">'+user.employee_id+'</p>
</div>
</div>
</div>
</div>
</div>
and I need the whole fc-event div to function as one , so the div with id="append_users" should contain the selectable class and the div with class fc-event should be considered as selection , I tried like this
( "#append_users" ).selectable();
but all childs take the ui-selectee class and it doesn't function at all, so what I want to do is the div with class fc-event should be considered as one, I hope i am clear, anyone please help
The documentation doesn't make it hugely clear, but from looking at the code and descriptions of the demos on the jQueryUI website (http://jqueryui.com/selectable/) it can be seen that the element you execute the "selectable" command against is intended to the container for the things you want to be selectable. It will automatically make all the child elements of that element into things which can be selectable. This is logical because generally you'd want to have several selectable items in a list and be able choose one or more items to select.
So if you want your "append_users" element to be selectable, you have to make the parent of that element the target of your "selectable" command. You haven't shown what the parent is, so for the purpose of example I'm going to assume it's just another <div>:
HTML:
<div id="selectable">
<div class="user-container" id="append_users">
<div class="fc-event draggable-user" id="user_1" style="z-index: 9999;">
<div class="container-fluid">
<input type="hidden" value="1" id="user_1_value" class="userId">
<div class="row">
<div class="col-xs-3 avatar-col">
<img src="https://i.imgur.com/db4KgSp.png" width="100px">
</div>
<div class="col-xs-9 data-col">
<p class="fullName dataText" >user.fullName</p>
<p class="usr_Gender dataText" >Male</p>
<div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
<p class="user_id" style="float:right;margin:3px">user.employee_id</p>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$("#selectable").selectable();
See http://jsfiddle.net/s6Lmy70b/2/ for a working demonstration.
(N.B. This is using very slightly adjusted markup compared to yours, just for demonstration and to make it easier to get it working, but the principle is the same regardless of the exact content being displayed)
I want to use jquery to slidedown the description classes when title classes are clicked. However, what I want to do is when a specific title is clicked, only the immediate next description should slidedown. How can I do that in one block of code?
$(document).ready(function(){
$(".title").click(function(){
$(".description").slideToggle();
})
})
<div> <h2 class="title">title</h2>
<table class="description">description</table>
</div>
<div> <h2 class="title">title</h2>
<table class="description">description</table>
</div>
<div> <h2 class="title">title</h2>
<table class="description">description</table>
</div>
<div> <h2 class="title">title</h2>
<table class="description">description</table>
</div>
$(".description").slideToggle(); takes all elements with class=description, not just the one you want.
Use next() near the selected one title.
$(document).ready(function(){
$(".title").click(function(){
$(this).next(".description").slideToggle();
})
})
I'm brand new to Javascript, and need some help. I have a table with 4 rows (3 displayed, and 1 display="none"). What I'm trying to do is display the 4th row via clicking on a link. Here's what my HTML looks like:
<table class="lessons">
<tr>
<td class="chapter">01</td>
<td class="title-desc"><h3 class="title">INTRODUCTION TO PROGRAM</h3>
<h3 class="desc">Program description....blah blah blah...</h3>
</tr>
<tr>
<td class="chapter">02</td>
<td class="title-desc"><h3 class="title">PARTNER WITH THE PROGRAM</h3>
<h3 class="desc">Description for chapter 2....blah blah...blah...</h3>
</tr>
<tr>
<td class="chapter">03</td>
<td class="title-desc"><h3 class="title">FOCUS ON THE PROGRAM</h3>
<h3 class="desc">Description for chapter 3...blah blah blah....</h3>
</tr>
<tr class="hiddenRow" style="display:none;">
<td class="chapter">04</td>
<td class="title-desc"><h3 class="title">THIS CHAPTER IS HIDDEN</h3>
<h3 class="desc">Chapter four description....blah blah...</h3>
</tr>
</table>
show hidden
And here's my javascript:
function showRows(){
var thisRow = document.getElementsByClassName('hiddenRow');
thisRow.style.display="";
}
Link to JSFiddle:
https://jsfiddle.net/99600cha/
I've tried doing the javascript function a few different ways with no success. Could someone show me what I'm doing wrong?
What I'm really trying to do is have the first and last rows displayed with the middle rows hidden and expandable, like this:
Chapter 1
(click to see all chapters)
Chapter 10
so if anyone can point me to something similar, please do!
Edit: Here is a link that shows the exact effect I'm trying to accomplish: https://www.masterclass.com/classes/aaron-sorkin-teaches-screenwriting
if your are using jquery:
function showRows(){
$('.hiddenRow').hide();
}
In var thisRow = document.getElementsByClassName('hiddenRow'); thisRow returns an array of elements that have such class, you have to use thisRow[0] to select a first element.
However, a more elegant and cleaner solution would be making this layout:
<div class="lessons" id="lessons">
<div class="lesson">
<div class="chapter">01</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
<div class="lesson">
<div class="chapter">01</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
<div class="lesson-hidden">
<div class="chapter">A hidden lesson.</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
</div>
By using this simple CSS rule you will be able to hide all elements by changing a single class:
.lessons .lesson-hidden { display: none; }
.lessons.full .lesson-hidden { display: block; }
To show hidden lessons, use this line:
document.getElementById("lessons").classList.add("full")
To revert, use this line: document.getElementById("lessons").classList.remove("full")
I currently have this code, when user clicks on the div, the map on the changes the position with the updated addresss:
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="dir">
<h3 class="title">Shopping abasto</h3>
<p>tel: 4676-4565</p>
<p>Avenida Marota</p>
<div id="map" data-maps="Av. Aconquija 600, Paseo Heller, Yerba Buena, Tucuman"><span class="glyphicon glyphicon-map-marker" id="dir"></span></div>
</div>
<div class="dir">
<h3 class="title">Shopping abasto</h3>
<p>tel: 4676-4565</p>
<p>Avenida Marota</p>
<div id="map" data-maps="Juncal 1213, Buenos Aires, Argentina"><span class="glyphicon glyphicon-map-marker"></span></div>
</div>
<div class="dir">
<h3 class="title">Shopping abasto</h3>
<p>tel: 4676-4565</p>
<p>Avenida Marota</p>
<div id="map" data-maps="Paseo Pilar, Del Viso, Buenos Aires Province"><span class="glyphicon glyphicon-map-marker"></span></div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="map">
<iframe width="100%" height="368" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=Buenos%20Aires%2C%20Argentina&key=AIzaSyCDg1Dfoxg3cKcOsucYZQnTjpmPjbUqe2M"></iframe>
</div>
<div class="col-separador-s"></div>
<div class="">
<img src="http://placehold.it/727x502">
</div>
</div>
</div>
I want the map to update the position when clicking on any of the divs with the id 'map'.
The problem is that it only works with the first div, here is my script so far:
jQuery(function(){
jQuery('#map').on('click', function() {
var maps = jQuery(this).data('maps');
jQuery('.map iframe').attr('src','https://www.google.com/maps/embed/v1/place?q=' + maps + '&key=AIzaSyCDg1Dfoxg3cKcOsucYZQnTjpmPjbUqe2M');
});
});
Jquery's selector by id returns one single element, that's why it's working only for your first element.
You need to use classes instead of id's.
Replace with
<div class="map" ... >
And match by class
jQuery('.map')
Element id's must be unique in the DOM for targeting to work as expected. There will not be errors thrown with the rendering of elements with the same ID, however it goes against standard practice, and introduces issues such as you're experiencing here.
Please refer to this article for a more in-depth differentiation between ID and CLASS.
So, to resolve the issue you're experiencing, you should make the following adjustments:
Change map id div's from <div id="map"> to <div class="map">
Change map class jQuery selector from jQuery('#map') to jQuery('.map')
Change the iframe wrapping div to <div id="map-wrapper">
Change jQuery selector for the iframe to jQuery('#map-wrapper iframe')
I have multiple divs with same id , i need to get the content of child's div when the parent div is clicked, the divs are dynamically created. The following code explains that :
i have php file that generate the multiple divs with the same id as follows :
<div id="display" style="display: block;">
<div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>
<div class="picName">Sahrish Rizwan</div>
</div>
<div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>
<div class="picName">Sahil Devji</div>
</div>
<div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>
<div class="picName">Sahar Imtiaz</div>
</div>
<div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>
<div class="picName">Sahil Devji</div>
</div>
</div>
now i need to get the content of each display_box through jquery , can any one help me out this ?
Try this (see fiddle console)
$(document).on('click','#display',function(){
$(this).find('.display_box').each(function(){
console.log($(this).html()) // returns overall content
});
});
DEMO
OR
$(document).on('click','.display_box',function(){
console.log($(this).html()) // returns clicked content
});
DEMO
$(document).on('click','.display_box',function(){
alert($(this).html())
});