dynamically created dropdown and onChange jquery - javascript

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>

Related

Jquery change triggers too often

I'm using jQuery 1.7.2 and got an on change event for a class like this:
$(document).on('change', '.item_amount', function(){
});
Many selects on the same page have that class and if I change one of those selects the change event triggers X times if I change one of those selects(X is the amount of selects having that class) but I only want it to trigger once since only one select has changed.
Is that normal behaviour or am I doing something wrong?
Edit:
The problem seems to be somewhere else. The elements containing that select get inserted(Ajax call) and when one of them gets inserted into the dom, the change event is triggered for all existing elements.
So basically I got select number 1 which holds some products. When a product is selected HTML code is inserted into a div which holds all current products. When that happens the change event on all products in that div is triggered.
Use this keyword to refer to the current element changed in the change function block.
this --> JavaScript or Native Dom Element.
$(this) ->Your jQuery Object
$(document).on('change', '.item_amount', function(){
alert(this.value);
console.log(this);
});
Set the. on change to the element and pass it as an argument to the function?

How to dynamically add dropdown items to bootstrap-editable?

I have initialised and rendered the bootstrap-editable in select/select2 mode.
Now i want to modify the drop down item list through an event.
Currently i am reinitialising the editable DOM element and calling editable over the same DOM element again.But it has no effect.
Is the above possible? If so How to achieve the above?
Admin
in your groups.php ... return json encoded data.. from a php array

Adding HTML element after the dataset is brought in

In Typeahead JS I'm trying to add an option that appears at the bottom of the dropdown after the user has started typing. Currently I'm using the 'onOpened' Custom Event to trigger adding some HTML after the 'tt-dropdown-menu' element is initialised.
.on('typeahead:opened', onOpened)
function onOpened($e) {
$('.tt-dropdown-menu').html( "Add Option" );
}
The problem is that the jQuery HTML is added when the dropdown is initialised, as expected, then when the user starts typing the new dataset element with the autocomplete results in is added below that jQuery HTML so the jQuery HTML can never appear at the bottom of the dropdown. You can't append the jQuery HTML to the dataset either as that element doesn't exist when the dropdown is initialised.
Is there an easier way around this? The other Custom Events don't seem to cover this scenario.
If you only have one dataset, you can do as I do: add a footer to the dataset, and add it as a DOM element, not plain HTML string. You can then change it at will (say on any event you wish) and your changes are reflected in the dropdown.
Example:
$('#myinput').typeahead({
// rest of your regular stuff, like 'name', 'remote', etc.
footer: $('#dropdown-footer'),
});
... where dropdown-footer is the ID of a div you have somewhere in your dom. You can then do things like:
$('#dropdown-footer').html('Hello')

Issue in Dynamically Add Select Element In J Query Mobile

I am adding select element dynamically on the change event of another select when I first click on static select then dynamically Select shown on page with all of its options but when I again select different value from static select the dynamic select shown on page but with no options?
Here is my demo page
The solution is to add $('#exerciseList-dialog').remove(); inside the loadExerciseList function.
Basically this line removes the dialog from DOM when you change category.
I hope this helps.

Triggering multiple events based on change event of one element

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.

Categories