Triggering multiple events based on change event of one element - javascript

I have multiple rows with three select elements each. There are two such rows during initialization and further rows can be added dynamically. I added change events to all these elements when each row is added such that all the other elements in a particular row change when one of the drop downs in that row is changed. There is also another select element #foo that is not a part of any row (it is displayed on top of the page) which on change should change the contents of all the select elements on all rows.
I tried doing this by adding jQuery("#foo select").change(callback_function) while adding the change events for each row. But when I do this, changing #foo updates only the last inserted row and not the other rows. How do I make it work in such a way that changing #foo updates all rows?
Any solutions will be greatly appreciated.

It would be easier to answer if you provided some source code, but from what I understand (When the select element with an id of foo is changed, the other select elements are changed by a certain function) this might work for you:
$("#foo").on('change', function() {
$('select.other-selects').each( function (i) {
callback_function();
});
});
Where .other-selects is the class you designete you others select elements with.

Related

Remove entire table row having checkbox which was unchecked , when user click on submit button

I have table with checkall/uncheckall check box functionality and table is having and some input fields like text boxes, dropdowns. User should select at least one checkbox for processing the data in the table. That is working fine. For example table is having 3 rows and user select any one checkbox and click on submit button then remaining two table rows should be removed and not being submitted. I tried with the below one .
$("input:not(:checked)").each(function () {
$('input:not(:checked)').closest('tr').remove();
});
But this one is removing entire table. So I need only those table rows which are unchecked should be removed. Any help would be greatly appreaciated.
Assuming you don't use <th></th>, your header row also got selected because that checkbox is also unchecked. May be that will be the reason all rows got deleted. Console input:not:(:checked) it . It will give clear idea.
Edit:
Then try this, may be this will work
$('#tableid').find('tr[input:not:(:checked)]').each(function()
{
$(this).remove();
}
It seems to be working fine for me: https://jsfiddle.net/r9zgvbqu/7/
Two comments, you are using the .each() function to do something for all elements selected by "input:not:(:checked)", but in that function selecting everything again. so you are just doing the same thing multiple times. You can skip that step, and also skip the .each()-$(this) combination that has been suggested, by straightup doing:
$("input:not(:checked)").closest('tr').remove();
This removes all the you want.
EDIT: Your problem is that you are selecting all non-checked inputs, including text inputs etc. You can specify the type of input you are selection: input[type=checkbox]:not(:checked)
In general, I would avoid selecting elements by their tag name. It's better to give the relevant checkboxes a class, and you can select them by class.
Here is a fixed version of your fiddle: https://jsfiddle.net/927sdh8n/
And here is a simpler and safer version using classes: https://jsfiddle.net/qz53wfxc/

Clickable Table Cells, Not Rows

Is it possible using Twitter Bootstrap to make part of a row, or a certain number of cells clickable, akin to this problem, but not for the whole row?
How do I make bootstrap table rows clickable?
Do you want each cell to be clickable? You could use code similar to that in the post you linked to:
$('.table td').click(function() {
// cell was clicked
});
This will make every 'td' element clickable. If you want just some cells to be clickable, give them a special class and then reference that in the call. For instance, give your clickable cells a "clickable" class and use the following:
$('.table td.clickable').click(function() {
// cell was clicked
});
Granted, this sets up a separate handler for each "td.clickable", rather than one event per row, but this can easily simulate making a portion of a row clickable.

How to make a light off effect in an entire Table Row

Can anyone help me how to make a lights off effect in an entire table row if i click a specific textbox and remove the lights off effect if i click again the specific textbox and goes the same with other textboxes with there specific table rows.
My problem is when i click a specific textbox the textbox is the only one who is highlighted. I want it to be the entire table row on that specific textbox.
current code: http://jsfiddle.net/AP6kr/4/
If you target $(this).parent() instead of $(this), you'll get the whole row. See JSfiddle: http://jsfiddle.net/AP6kr/6/
My example is actually targeting the <td> tag, which is the parent of the input. Since it's the only td in the row, it looks the same as if you go up one more parent to the <tr> tag. you can see that effect here: http://jsfiddle.net/AP6kr/8/
It's pretty much indistinguishable now, but if you had more cells per row it would matter.
You could use pointer-events:none; on #overlay : http://jsfiddle.net/AP6kr/5/

Javascript: Equalled elements does not inherit the functions

so I have a div in HTML that contains a Select with working options that triggers an event when changed. When I equal the innerHTML of a temporary row to the div that has the Select, it shows the select with the options, but when you click it, nothing happens. When I inspect element it, it shows it has the same values and IDs, but it doesn't seem to work. Weird question, I know. Thanks for the help.
document.getElementById(updatedStatus + '-noterow-temp').innerHTML = document.getElementById(channelToBeUpdated + '-noterow').innerHTML;
updatedStatus+'-noterow-temp' is the duplicate of the div and channelToBeUpdated+'-noterow' is the original div with the Select. In the view, it works and displays the Select tag, but the duplicate doesn't trigger the events when the options in the select are changed. Here's my question; How will I equal these two divs, display the Select, and get it working? Thanks!

dynamically created dropdown and onChange jquery

My application is in ASP.net MVC3.
I have a table of elements. An element can have child elements, but a child element cannot. In the table, if the element has children, they are listed in a ul. A user can select the items in the list to remove it from that parent. When this happens, the element is removed from the list, and a partial view is rendered that makes a new row in the table for that element since it is no longer a child. Elements that are not children and don't have children of their own are able to be combined with other elements by selecting the element you want to combine it with from a dropdown. My problem is that when you remove an element from a parent, the dropdown created for the table row in the partial view does not have the functionality needed.
I think that this may be due to the fact that my javascript function to combine elements is in the $(document).ready(function () {...}); and that dropdown is no there on page creation.
is there a way to add my $('.combineDropdown').change(function () {...}); to an element that has been created dynamically?
You need to use bind, on, delegate or one (depending on what you need). This needs to be done each time you add a new element
Why use jQuery at all for this? You can acheive the same result by outputting the dropdown with the onChange html attribute pointing to a javascript function to be executed.
Example:
<select onChange="myFunction(this)"><option>...</option></select>

Categories