Develop Reference

multiple items in container (drag and drop)

I have a problem with my drag and drop code. I want to put multiple items (dragged) in three containers (drop), and then return all values put in the container (thanks to alert(droppableResults);). But this code only returns the first item dropped, and I went all of the items.
Thanks for your help!
I put code in jsfiddle.net for better understanding.
https://jsfiddle.net/vbyyvt2o/1/

The problem you have is that the data-r="" value gets overwritten with every drop.
This results in only the last drop being recorded (not the first one).
Since .dropAble can contain several elements that approach doesn't work. You might however remove the data-r attribute from .dropAble and add a data-q attribute to your.dragAble elements. Then you could modify your JS accordingly and it should work fine.
Here is a modified fiddle:
https://jsfiddle.net/vbyyvt2o/4/

Ways to make a change listener for all HTML objects following similar ID structure?

I have several hundred HTML input and select fields on a page in table format, all with unique ID's. The ID's all follow a basic structure, and there are 3 particular ID structures I'd like to listen to for change. ID structure is described below:
xx-rownumber-jobnumber
The xx is simply a 2 digit letter combination to describe the column, rownumber is the row number of the table the field exists on, and jobnumber is just the job number of the job being bid on (will be the same for every item on a single table).
I need to listen to all ID's that follow the structure:
js-rownumber-jobnumber
wi-rownumber-jobnumber
qt-rownumber-jobnumber
How can this be achieved?
Not sure if this helps, but at any one time I will know the maximum number of rows on the screen, but this number is variable (overall max of 300).
Extra information -
The general problem I have here is I have a table being used to bid jobs. Each row is for a line item for the bid, and the various columns hold information about that line item. Once a bid has been created, it has to be finalized. Once it is finalized, any changes need to be recorded to notify someone that the changes need to be run by the client.

You can use jQuery to listen for the change event, and then use regular expressions to parse the IDs once a change event has occurred.
Xenph Yan's post seems very relevant to what you're trying to accomplish: jQuery selector regular expressions. Specifically, the regex selector plugin for jQuery:
http://james.padolsey.com/javascript/regex-selector-for-jquery/.

You could delegate it to the parent:
var table = document.getElementById('parentTable');
table.addEventListener('change', function(ev) {
var target = ev.target;
// where the regex below matches the pattern
if ( target.id.match(/(.*?)-(\d+)-(\d+)/) ) {
console.log(target);
}
});
Please note that the change event does not bubble in IE < 9. You may be able to use onpropertychange for those, but I don't know for certain. Using jQuery would also allow the change event to bubble in previous versions of IE.

Using jQuery you can try to find elements whose id begin with js $("[id^=js]"), wi $("[id^=wi]") and qt $("[id^=qt]").
You can use wildcards in selectors in various ways. Here is the jquery documentation on the subject

If changing the design of the existing table is an option, then I think you should be better off with assigning multiple classes to each element (input) rather than IDs:
For instance,
Assign class row-i to all elements belonging to row i
Assign class job-j to all elements belonging to job j
Assign class attr-c to all elements belonging to column c
Now you can find any input element by specifying any of row, job & attr.
In this specific case, you can listen various events on input.attr-js, input.attr-wi or input.attr-qt. I think this approach should save you a lot of overhead of working with regex and provide you a tag based search in your input fields.

Updating script to run for newly created table rows with incremented IDs

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.

How to select drop downs inside any div?

I am using ExtJs with Jquery. I have a panel under which I have check boxes, radios and drop downs. I am using the following code to get all the items under the panel.
$('#panelId : input').each
This works for radio and check boxes. But, I am trying the following for drop down and it is not working
$('#panelId : select').each
Experts please guide me.
Note: I am painting raw html into the panel using XTemplate. So I am not able to retrieve the items using extjs (Rather I don't know!). Can any one suggest the same using extjs?

:select is not a valid selector. Please read the jQuery selector documentation.
You can see a quick fiddle here to see it working and help you understand how to use the proper input or select jQuery selectors.

The jQuery selector function $ expects a valid CSS selector as an argument. If you want all <select> elements under the parent ID, then this should do what you want:
$('#panelId select').each(...
Note in the above that there's no colon between #panelId and select. Colon characters in CSS are reserved for pseudo selectors like :hover.
If you want more than one kind of child element, you can specify multiple selectors by separating them with commas. e.g.
$('#panelId select, #panelId input').each(...
An even better way would be to start with the panel, then select just the matching descendants:
$('#panelId').find('select, input').each(...
Hope this helps!

Get all elements of a specific type using ExtJS

Hello I have been using JQuery for quite a while. I need to get the ids of the checked elements. I have all my checkboxes as rows sitting inside a container, and I want to get the ids of all the checkboxes that have are checked.
I would use
$("#container input:checkbox")
to get all the checkboxes in that container, and then would check for which ones have been checked.
To do the same in ExtJS, i have been using the "get" method, and would do a
Ext.get('input')
which gives me all the input items, but I still have to check if they are of type "checkbox", is there a way I could get only the checkbox elements from DOM?

The equivalent function to JQuery's selector would be either Ext.query, or Ext.DomQuery.selectNode.
Ext.Query works in a very similar way as JQuery (see how the selectors work here).
In your case, you could try this:
Ext.query("#container input:checked")
Of course, this will only obtain DOM values rather than Ext components.

If you are using the CheckboxGroup object, you can use the getValues() method which will return an Array of the Checkboxes which you can use to look at the values...