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
Related
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');
});
I have a div which I need to empty excluding a couple of divs inside it, the problem is, I have got it to work but the div's lose there jquery click functionality.
I have a stage which will have items dragged on them but I need to be able to empty these items but retain the click buttons which are also on the stage and stored in a div called keep.
I found this and it works but the things inside #keep still appear but they lose their jquery .click().
var $stage = $('#stage'), $noRemove = $stage.find('#keep');
$stage.html($noRemove);
This is because they are being removed and then re-added.
You either have to remove the children. OR Rebind the click method afterwards.
So for example:
$noRemove.click(function(...){});
See the Fiddle here : http://jsfiddle.net/r98dj/1/
Also, as a note. Make keep a class. Otherwise you'll end up with multiple divs with the same ID and this will cause you to fail W3C validation.
I am able to add a row with the dom but how can I get a div to display to the right of drop down depending on what is selected?
Here is an example of what I have so far: http://jsbin.com/#/afojid/1/edit
The first drop down is working correctly but the rest I would like to add when the button is clicked and I would like them to work the same way as the orginal drop down menu. So that if Asian is selected an add section will appear to the right, if Other is selected an other add section will appear to the right, and so on for each time the add button is clicked. I tried clone but I don't want anything to be selected when the add button is clicked
The fact that you're working with ids instead of classes more or less universally makes this very challenging. You should update your code to work with classes and appropriately clone the *Info tables when you create new dropdowns.
You're using an old version of jQuery, so .on is not available to you for delegation. Instead, use .delegate:
$(document).delegate('#typeofEthnicity,[id^=newDDMenu]', 'change', showEthnicity)
This will call the showEthnicity function for the original dropdown and any added dropdowns, but you also have to clone all of the *Info divs and put them in the appropriate spot in the table (I suppose the same spot as the appended row). If you use classes, then it's a simple matter of finding the dropdown's parent row and then locating the corresponding child with the appropriate class to be shown.
I have a rich:datatable in which every row contains a selectOneCheckbox. A javascript function is bound to checkboxes and deselects the current selected checkbox when another one is checked (so, only a checkbox per time can be checked within a page). The datatable uses a rich:datascroller for scrolling through result pages.
How can I deselect a row before scrolling to another page?
Example: I am at page 1 and select the checkbox for row1, then I press "3" on the scrollbar: the selection for row1 remains, but I would like to remove it before showing page 3*strong text*.
Thanks! :)
The rich:datascroller tag has an "onclick" attribute where you can make a call to your js function:
<rich:datascroller id="myscroller" onclick="unselectCombos()" />
I think this will work.
I'm working with jQuery and a plugin called jQuery.SelectBox
I have 3 selectboxes, selecting an option in the first selectbox will change the options in the second one.
My problem comes when I try to insert values in the second selectbox via append function in jQuery. Everything works fine but the new options are not clickable.
You can see the problem right here: http://incubadora.gelattina.com/impac/galeria.html (scroll down and to the right), there are the three selectboxes.
From what I understand, you put in a normal select, and this does a dynamic creation of a stylized 'select box' via jQuery.
The problem, I would guess, is that, since you're adding items after the select box's initialization, the new items don't have any sort of action listeners on them.
I can't seem to find any documentation on this SelectBox plugin, but you need to find a way to Bind the click and hover actions provided by SelectBox onto you're newly added items.
You can try calling the .selectbox(); function on the select elements after you've added the new options to see if that works.
Hey I wrote a select box plugin called Selectzor, just for this reason.
It should accomplish everything you need.