I have dynamically generated Chosen elements (cloned from first of them) on my page. But when I click one of cloned Chosen elements looks like it open first one drop-down. So all of cloned elements works via first one.
How can I dissociate cloned elements from first one and force them work separately?
I have found a solution. You must simply call .chosen() when append new dynamic element to the DOM.
var new_element=$(my_select).clone(false);
$(document.body).append(new_element)
$(new_element).chosen();
Related
I'm trying to use a table row as a template for adding multiple rows. I need to clone the row, then update the select elements with some data. I hide the table row template before I do the clone, so the selects should not show up for the time being.
The issue I'm having is that I have other selects defined on the page that are being modified by this process, but when I do the following:
clonedTr.find('select').each(function() {
console.log($(this));
...
it confirms that I am only working with the selects within the cloned table row. See this jsfiddle: https://jsfiddle.net/fud4wej2/2/
I also tried to call rowTemplate.remove() after the clone(), thinking that the issue might have to do with duplicated ids, but to no avail. Otherwise, to see the top pulldown being displayed correctly - showing Foobar as it's option - comment in the return; statement.
As is -- with $(this).append(option); commented out -- the top pulldown shows the second entry WB-730-2 from optionsToAdd as its option. If you comment in the final $(this).append(option); statement, the top pulldown has no options.
These lines:
var option = $('option');
option.val(optionsToAdd[i]);
option.text(optionsToAdd[i]);
The $('option') function is evaluating that CSS selector in the scope of the whole document, which grabs every option tag on the page. This is causing your problem.
To fix:
var option = $('<option>');
This will parse the HTML and create a new option element.
Another alternative:
var option = $(document.createElement("option"));
New to jQuery here. Love it so far, lots to learn!
Challenge: I cannot delete items inside a recently selected element.
Source: I used the jQuery UI Selectable/Serialize example. Works great, I'm able to select multi divs, insert content.
So far: I've tried assigning class and IDs to new element, but when I click on it, it always re selects the container not delete the element. To make matters worse it will place a new element in the child element.
How to select and delete these "child" spans that are created please? Try it here, select jobs or drag name to job, then try to delete the name you just added.
http://jsbin.com/azeqow/1/edit
(tried to add image of problem, I'm too new)
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've got a table with the type ahead feature from jQuery UI. It is working with my form when there is only 1 table row (initial view). There's a button to allow the user to create additional table rows as required which also increments the IDs for the text inputs and select menus.
There's another script that inserts a matching value into the select menu based on the typeahead selection. Both of these work fine for the first row, but stop working for any additional Rows that are created.
I've setup a sample JSFiddle:
http://jsfiddle.net/fmdataweb/hxzME/1/
I think I understand why they only work for the first row - they are tied to these IDs: #lastYearSelect1 and #nextYearSelect1 - but I'm not sure how to change them so they then work with #lastYearSelect2, #nextYearSelect2, #lastYearSelect3, #nextYearSelect3 and so on.
There's a few problems with the script.
Firstly you're right, you need to setup all the scaffolding again after you clone the row, the clone method will not copy the functionality, just the html elements.
To find the right element you can use the JQuery ^= selector, which matches the start of an attribute name, on the on the clone object to find the right child input to turn into an autocomplete field. You can do the same trick in the function to change the dropdown to the correct function.
Finally a lot of your code and variables were in the wrong scope to be accessible properly. I've moved a lot of the vars around so they're accessible, mainly into the global scope. When you're a bit more experienced you won't want to do this, but for now this is fine.
I also created a new function setDropDown, but this code is almost identical to what was there before.
Here is a working version of your code:
http://jsfiddle.net/hxzME/3/
Add classes to elements and use class selectors when binding an event handlers.
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.