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)
Related
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();
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.
OK, what I'm trying to do here is to have jQuery UI update the sortables that are displayed on the page when a new column is dynamically added to the page by cloning it. If you clone a column (demo page) the new column should be able to receive both items from the existing column lists as well as new items that can be dragged from list A at the top into one of the sortables. This works fine for the initial setup, but as soon as you clone and append a new column, things break; the newly cloned column is not recognized as a droppable target and I can also not drag new items from list A to the newly cloned column list.
Intuitively the sortable('refresh') command should be enough for the sortable to check if anything in the setup is changed and enable new elements to receive and handle sortable items. However, I try to do this when the button is clicked, but there seems to be no effect.
I also tried to bluntly call the whole sortable() plugin on the '.columnlist' selector again, hoping that it would initialize on new matched elements and would simply skip over the elements that have the sortable already.
Oh and of course I use clone(true, true) to make sure events and data come with it.
Please see the demo page here: http://labs.shifthappens.nl/dragsort/
Try the following:
Drag an item from list A to column list A or B. The drag to sortable works
Re-order items in column list A. Sortable works.
Click on the clone button. A clone of column C appears.
Try to drag any item (be it from list A or from another column list) to the cloned column C and behold: it does not respond. It is as if it doesn't exist.
Funny thing: if you already put items in the original column C and then clone it, the items that are in the cloned column CAN be moved to other lists, but once out, can't be moved back to the cloned list. As if it rejects its own offspring.
How can I make the cloned list(s) to be sortable and valid dropzones as well?
As pointed out by jaredhoyt it indeed was about deep cloning. Apparently jquery ui doesn't need deep cloned elements and in fact breaks if you do that and expect the new elements to be droppable targets too.
However I did find the need to do another $('selector').sortable() on the columns for the cloned list to be recognized. This is what jaredhoyt also did in his fiddle. This while for me intuitively the 'refresh' method would be the most elegant solution, no?
Anyway, case closed. I'm happy it was as simple as not cloning the column with data and events, just the HTML.
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.