I have two buttons in each row of a table. You see button 1 at first. When button 1 is clicked, it disappears and button 2 pops up. This is simple, but I don't understand how to create this behavior for each row individually. Right now it only works for the first row.
I have created a codepen to better illustrate this:
http://codepen.io/cavanflynn/pen/qdVorB
I only understand how to do this using their id's so it only works for the first row.
var first = document.getElementById( 'first' ),
second = document.getElementById( 'second' );
How would you get this behavior to work for each row on its own? Thanks!
Because id must be unique valuesdocument.getElementById() will get the first one;I think you can change the id to class and add an param(witch row) to toggle function. Or in toggle function using js to get the Sbiling node
Like #casimiryang said, problem are the ids. You can only have 1 element with the same ID on the page.
So to solve the problem you can use classes instead and add click event handlers with jQuery.
$(".first").on("click", function(){
$(this).hide();
$(this).next().show();
});
$(".second").on("click", function(){
$(this).hide();
$(this).prev().show();
});
Here is the codepen: solution
As you said you have jQuery, things get really simple. Just replace your IDs with classes and, for each button clicked, get the second within the scope of its parent (i.e. the row). Here's the updated codepen.
$('.first').click(function() {
$(this).hide();
// Using .css() instead of .show() because .show() would render the button with its default display (inline) instead of block.
$(this).parent().find('.second').css('display', 'block');
});
Related
EDIT: for a general solution, this worked for me. Event binding on dynamically created elements?
So I have a interface that kind of looks like this:
User can toggle to show or hide the sublists. I used jquery to select the toggle buttons for them to work:
$(".dropdownBtn").click(function(){
//rotate the button
$(this).parent().toggleClass("caret-down");
//hide the sublist
$(this).closest("li").find(".active").toggleClass("nested");
})
They can also add new sub_elements to each element. For example, like this:
$(".fa-plus-square").click(function(){
//if there's no new list, create a new unordered list
if ($(this).closest("li").find("ul").length == 0){
$(this).parents("li").append(newUL);
//and add a toggle button
$(this).parent().prepend(toggleBtn);
}
//add the element
$(this).closest("li").find("ul").append("<li>newElement</li>")
})
But then the newly added toggle button under element 3 wouldn't respond. I believe that I need to "bind" the newly added button. But I'm not sure what's the best practice to do so.
Hi I am trying to dynamically create a selector for jQuery instead of using a static one. The problem is, it is not working predictably/consistently.
I created a fiddle here: http://jsfiddle.net/Cc92f/
If you click run and click in each of the top radio buttons once, they work, but you cannot use the same buttons a second time.
If you click a top button, and then a bottom button, you can no longer click any of the buttons.
You may have to reload it a couple of times to see how different uses break it in different ways.
Thanks you for any and all help!
$(".concattest").click(function(event)
{
var radioid=event.target.id.split("_");
$('#r_2_'+radioid[2]).attr('checked', 'checked');
event.preventDefault();
});
Use .prop('checked',true) instead of .attr('checked','checked').
http://jsfiddle.net/5LWEk/
If you want to:
When changing selection in the top row, change value of bottom row
accordingly
When changing selection in the bottom row, select the last option in
the top row
Then use change event and prop() function, here is the demo
I am trying to do a show/hide animation. 1st div will show and 2nd div hide for first time then when i will "details" button which is in 1st div then show 2nd and same when i click "close" button which is in 2nd div then show 1st div and hide 2nd div. i did that no problem but i want to add some css effect when it will show and hide exmple like http://tympanus.net/Tutorials/OriginalHoverEffects/index7.html there have many cool effect all are base on rollover effect i want to this on my click.. can you guess help me how to do..
Basic example here: http://jsfiddle.net/Q5e76
$("#details").click(function () {
$(".one").hide();
$(".two").show();
});
$("#close").click(function () {
$(".two").hide();
$(".one").show();
});
Instead of using .show(); and .hide(); you could use .fadeIn(n) and .fadeOut();
where n is the number of miliseconds it will take.
e.g.
$('.one').fadeOut(500); // half a second.
PS: if these are unique, you should give them ID's to prevent an interaction being executed on multiple elements.
Also it will help yourself if you give your elements proper names.
e.g. id="detail-box" for instance.
I'm trying to create a Live Table Edit with Jquery but I'm having trouble with getting it to fire on my td's rather then the tr
Here is my code.
http://jsfiddle.net/y7Zck/1/
This works almost as intended. What I would like to change is so that the function doesn't fire if you hit the frameTot with value 150 in this example. You should only be able to click on the first two fields and get the edit boxes to show. How would I go about doing this?
My attempt to change
$(".edit_tr").click(function()
to
$(".edit_td").click(function()
Doesn't seem to help at all.
It's not working because, of this line var ID = $(this).attr('id'); It's right when you are using tr and it's returns the tr ID. When you change it to TD click, the ID changes. You need to get TR id to make it work properly.
Change it to
var ID = $(this).parent().attr('id');
Check Here, http://jsfiddle.net/muthkum/y7Zck/2/
Your script is accessing $(this).attr('id') which (of course) isn't the same for your td as it is for your tr.
You need to update both listeners to use something like $(this).closest('tr').attr('id') or parseInt($(this).attr('id'), 10) (grabbing just the number-part from your td's ID).
I've got a cool interface to build.
There's a horizontal scrolling div containing "tiles" of images, and a radio button under each. A user will scroll and decide on an image, then click it. The radio button checks, and jQuery shows another horiz scrolling div below, "now select subcategory"... The user can then further refine the selection by choosing another "tile". That's the process complete.
The problem is I'm not sure how to hide all the elements in the 2nd tier of selection if they don't have a class that matches that of the first selection. Sounds confusing maybe. Here's some simplified HTML, I've posted it on jsfiddle to save space here. http://jsfiddle.net/RTGC3/
So in summary, you'll see from the HTML what needs to happen. A user will see categories, when they click a category, subcategories without the same id as the clicked parent category will be hidden. All others will remain visible ready for the containing div to "show".
I hope I've explained the problem well enough. Thanks for any help offered.
Mike.
Try with this Code:
$(document).ready(function() {
$('input[type=radio][name="type"]').live('change', function() {
var className = $(this).parent().attr("class");
var clsID = className.split('_')[2];
var subID = "in_cat_" + clsID;
$("div[class*=in_cat]").hide();
$("div." + subID).toggle("slow");
});
});
This is the JSFiddle Link:
http://jsfiddle.net/RTGC3/3/
Easiest if you name both container divs with id 1 for example to the same thing, so you would have TWO class="cat_id_1".
Then something liek this:
$('#cat-container div input').on('change', function() {
var id = $(this).parent().attr('class');
$('#des-container div.'+id).fadeToggle();
});
and in CSS you have display:none; on all divs in #des-container (for starters). This will listen for the radio button when it changes, first change it will call .fadeToggle() on div with matching class in your second row and show it, and second change will hide it again.
Was this what you wanted?
Actually I assuem you want all items in the second row to be displayed, but when checking a radio box you want to hide everything besides the one matching the id of the radiobutton? Then you could do like this:
$('#des-container div'+id).addClass('show');
$('#des-container div').not('div.show').fadeToggle();
So basically you add a class to the objects you decide to show, and hide everything that doesn't have that class. Ofcourse for this to work the other way (if you uncheck a radio-box) you would need to add a if-statement seeing the radio button that was changed was changed to checked or unchecked, if unchecked you just remove the class "show" from the element.