I have list of user and their dates in PHP and onclick of specific user, I want to hide div other than one whose link is clicked
For example :
<div class='person' id='add_new_date_8' style='display:none;'>
<div class='person' id='add_new_date_9' style='display:none;'>
<div class='person' id='add_new_date_10' style='display:none;'>
<a href='javascript:void(0)' onclick="addMydate('<?PHP echo $id;?>')">Add a new Date?<a/>
So if $id = 8 then hide all div of class person which has id other than 'add_new_date_8'
Make it simple in jquery
$(document).on('click', '.person', function() {
$('.person').hide();
$(this).show();
});
access id in js function. and first hide all the div with person class and then show the which have matching id.
function addMydate(id){
$('.person').hide();
$('#add_new_date_'+id).show();
}
The other solutions so far will work, however I prefer to use .siblings()
function addMydate(id){
var selectedEl = $('#add_new_date'+id);
selectedEl.siblings().hide(); //siblings() takes all other elements of the same parent
selectedEl.show();
}
This will prevent the element itself from being hidden and then shown again, and might save you some headaches on animations, should you add those.
note: this depends on your HTML structure instead of classes, which is a bit less flexible. You can also use the following to exclude the element you want to show from the elements that get hidden:
$('.person').not('#add_new_date'+id).hide()
You can use siblings to get the siblings of the clicked element.
$(document).on('click', '.person', function() {
$(this).show().siblings('.person').hide();
});
Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
Docs: http://api.jquery.com/siblings
EDIT
function addMydate(userId) {
$('#add_new_date_' + userId).show().siblings('.person').hide();
}
Related
I am new to jquery. I am trying to hide getLocation div, if clicked on someother id.
But this doesn't work
$(:not("#getLocation")).click(function(){
if($("#getLocation").show()==true){
$("#getLocation").hide();
}
});
Try this:
$('*:not("#getLocation")').click(function(){
$("#getLocation").toggle();
});
syntax error only.
$('*:not("#getLocation")') => will return all element except whose id = getLocation
Try this Code
$("#getLocation").click(function(){
$("#getLocation").addClass("hide");
});
Use this :
$('#getLocation').on('click', function(){
var target = $(this).attr('rel');
$("#getLocation"+target).show().siblings("div").hide();
});
You can use event.target to filter out relevant div only like following :
<div id="a">
Div 1
</div>
<div id="b">
Div 2
</div>
<div id="getLocation">
Hide/show
</div>
Js
// as example, we target all div
$('div').click(function(e){
// but only filter div without getLocation ID
if ( $(e.target).attr('id') != 'getLocation' ) {
$("#getLocation").toggle();
}
});
DEMO
You may need this.
$(document).not($("#getLocation")[0]).click(function(){
if($("#getLocation").is(':visible')){
$("#getLocation").hide();
}
});
Your statement
if($("#getLocation").show()==true){
Will never true, because it is an object.
jQuery returns an object of the element after every getter operation.
It is object chaining.
For example, if you have an element with id myDiv
Then you can perform three operations in a single statement like this:
$("#myDiv").show().css('color', 'red').css('padding', '12px 12px 12px 12px');
Here, after you show() element, an object of the element is returned.
Again you change the css and again an object is returned.
Use jQuery .toggle()
Corrected code:
$(':not(#getLocation)').click(function(){
$("#getLocation").toggle();
});
You can use container logic like normally use for navigation menu. For example if you click on outside of your div then your div goes hide.
Try this:
$(document).click(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
Hope this help you well!
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
I have a working jQuery function that creates a div when another div is clicked.
When this div is clicked...
<div class='col_1' data-parent_id='parent' data-child_id='1002'>List 1</div>
this div is created using the function below and some php.
<div class='col_2' data-parent_id='1002' data-child_id='1003'>List 2</div>
jQuery
$(function() {
$('.col_1').click(function(){
var parent_id = $(this).data("parent_id");
var child_id = $(this).data("child_id");
$.post("array-2.php",{parent_id: parent_id, child_id: child_id},
function(data){
$('#column_2').empty();
$('#column_2').append(data);
});
});
});
$(function() { //// New part:Trys to make the created div functional,
$('.col_2').click(function(){
var parent_id = $(this).data("parent_id");
var child_id = $(this).data("child_id");
$.post("array-2.php",{parent_id: parent_id, child_id: child_id},
function(data){
$('#column_3').empty();
$('#column_3').append(data);
});
});
});
I want the new div to function identically as the first div to make a 3rd div/list as well (and even more created columns of lists). So I added the second half of the jQuery but it doesn't seem to function. Does anyone have any ideas why this won't work, or how I could make it better? Thanks.
You can see basically what I'm trying to do here. actual project
Since the col_2 elements are created dynamically you need to use event delegation to register event handlers to these elements.
When you use $('.col_2').click(....); to register an event handler it will register the handle to only those elements which are already present in the dom at the time of the code execution, in you case since these elements are created after that the handlers will not get attached to the newly created elements
$(function () { //// New part:Trys to make the created div functional,
$('#column_2').on('click', '.col_2', function () {
var parent_id = $(this).data("parent_id");
var child_id = $(this).data("child_id");
$.post("array-2.php", {
parent_id: parent_id,
child_id: child_id
},
function (data) {
$('#column_3').empty();
$('#column_3').append(data);
});
});
});
Instead of using $('.col_2').click(function(){..});
Try $(document).on("click",".col_2",function(){..});
Because you are trying to bind click event to an element, even when it is not present in the DOM.
Try to use this
$(document).on("click",".col_2",function(){
..............
});
rather than
$('.col_2').click(function(){
..............
});
Check this jsfiddle
I am getting json in "data" and passing it in for loop. Onclick of buy button, it goes to the App function. On success I need to hide the buy button and display the download label.
My problem is onclick of 1st buy button, download link for both the buttons appear.
Ideally oneclick of first buy button, buy button should be hidden and download label should appear. similarly oneclick of second buy button, buy button should be hidden and download label should appear.
How do I get particular id of each button so that I can hide one at a time?
Please help me out
function (data)
{
var Class ='';
for (var i=0; i <data.length;i++)
{
Class += '<div name="buy\''+data[i].id+'\'" class="btn btn-primary btn-small" onclick="buy(\''+data[i].identifier+'\',\''+data[i].id+'\',\''+data[i].url +'\'); return false;" href=""></div><div class="download\''+data[i].id+'\'" id="download">D<span style="font-size:15px"></span></div>';
}
return Class;
}
App = function(identifier, app_id, url) {
$.ajaxSetup({
data : {
csrf_test_name : $.cookie('csrf_cookie_name')
}
});
var jqxhr = $.post(SITE_URL + 'admin/appstore/purchaseApp', {
identifier : identifier,
ap_id : ap_id
}).done(function(data1) {
obj = JSON.parse(data1);
bootbox.alert(obj.status, obj.label);
$("#download").html('<a href='+download_url+app_id+'>Download!</a>');
});
};
it is for loop am using.. am passing '; now how do I hide buy id? $("#buys"+"'"+data[i].id+"'").hide(); is this the right way? It gives me error
if you look at the actual markup generated in Class, you will see that your buy buttons don't have an id at all. perhaps something like
Class += '<div id="buy-button-'+data[i].id+'" name="...
Now you have a unique id on each button. The next part of your problem is knowing which button to remove after a successful Ajax call. You will need to include that in the data1, returned from the server. For the sake of argument, let's say the server returns the value in your data1 object as app_id. Then all you need to do is
jQuery('#buy-button-'+data1.app_id).hide();
Slightly off-topic, I'm not too keen on the way you're using single quotes in the buttons' name attributes, either, but I don't think that's relevant here.
I'm standing in front of a forest. Can you help me find the tree?
Currently I'm generating a list with PHP
echo '<div>';
echo ' <ul>';
foreach ( $myArray as $key => $value):
echo '<li>'. $value . '</li>';
endforeach;
echo ' </ul>';
echo '</div>';
The array contains a limited number of items, which can vary.
What I want to do is to highlight the current item and show all other items as normal.
So, when showing the page, the first item should be shown as being highlighted.
When clicking on second item,
the first item should not stick out (not have any styling).
the second item should be highlighted until another item is clicked.
all other items should be shown as a normal styling.
I would like to be able to do this using nothing but CSS.
To be named, when clicking on a list item I plan to show/hide other div elements, where I plan to use jQuery.
$('li').on('click', function() {
$('li.highlight').removClass('highlight'); // first un-highlight all lis
$(this).addClass('highlight'); // then highlight only clicked li
});
To set first item as highlight when page load, you can do it in PHP/ jQuery also.
If you want to do in jQuery then try:
$(document).ready(function() {
$('div > ul > li:first').addClass('highlight'); // set first item
// highlight at page load
$('li').on('click', function() {
$('li.highlight').removClass('highlight'); // first un-highlight all lis
$(this).addClass('highlight'); // then highlight only clicked li
});
});
Try .addClass() .removeClass() and .eq():
$(function(){
$('div ul li').eq(1).addClass('active');
$('div ul li').click(function(){
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
});
As .eq() is 0 indexed so .eq(1) will select the second li on page load.
You probably need to add a class name to the li's to give you a convenient selector. In my example below, I have use some_class for this purpose. I am also assuming that you want to use a class the indicate the selected item. In this example, I have used selected as the class name for this.
$('li.some_class').click(function() {
$('li.some_class').removeClass('selected');
$(this).addClass('selected');
});
thanks all to your fast reply.
I finally mix your answers to get it working for me
$(document).ready(function()
{
$('div#myclass > ul.myid > li:first').addClass('current'); // set first item
$('div#myclass > ul.myid > li').click(function()
{
$(this).siblings().removeClass('current');
$(this).addClass('current');
});
});
The myclass and myid I've added to distinguish between other list items.
#thecodeparadox: The update when clicking another item was not done with your proposal.
#jai: the initial set was not done with your proposal.
But with the final mix, it works 100% as I need.
Thanks a lot again.
Wolfgang
i have forms createds that require a value , as this this forms edits different users.
so how would i send that value from jquery? i know how to do it with combobox , but i want to do it from links :
like - name [details] when someone clicks on details the forms will pop up, so i wana mimic index.php?id=2 but with jquery, anyideas?
Do you want to display some content via JQuery with a link? Modify the selector to point to the correct DOM object, eg. an anchor tag with class "details"
$('a .details').click(function ()
{
$.get(
'index.php?id=2',
function(html)
{
$('#results').html(html);
});
});
if you want to load the content the link is pointing to, use (untested)
$('a .details').click(function ()
{
var anchor = this;
$.get(
$(anchor).attr('href'),
function(html)
{
$('#results').html(html);
});
});
if the id is stored in the li element, you can get the "id" attribute by using:
$('li').attr('id');
$('a .details').click(function ()
{ $.get( 'index.php?id=2', <--------------I need to pass that id=2 from a link thats created dynamicaly.
function(html)
{ $('#results').html(html); });});
for example, using
a
<ul id="cat" >
</ul>
i can acces , "cat" through jquery, loop through the cat elements and each li id=
will be clickable with some css
I cant figure out how to do it with normal text links!
thanks anyway dspinozzi