Develop Reference

Order of checkboxes on secondary PHP page

I am using the following solution which almost fixes my issue:
Sequential Order of Checkboxes Selected PHP
The solution mentioned works perfectly if you view the results of the $_POST['col_list'] on the same page.
For me, when the 'submit' button is pressed I am taken to a separate PHP page which displays this and other variables I have input. When I do a print_r($_POST['col_list']) I see the correct variables that I selected but in their original order -- not the order in which they were selected.
My question is: how do I carry over the order of the checkboxes I've selected to a separate PHP page?

If you applyed the solution quoted, $_POST['col_list'] doesn't contain the checkbox selection order, it's $_POST['order'] which does. If you print_r([$_POST['order']), you'll see your selection order.

The solution you linked will not change the order of the values in the $_POST array.
If you write the input inside the <form> element as indicated in the solution, you will get another value ($_POST['order']) inside the $_POST array containing the order for the checkboxes (which should look like ",host,atom_name").
It is up to you to reorder the elements in your array, based on this value (I would suggest creating a new array, as changing the $_POST array is bad practice).

Cloned autocomplete input not working

I have a problem with jQuery function clone(). I think the problem is in the withDataAndEvents input parameter of this method.
Initially, I'm coding a table that has dynamic rows. I'm adding dynamically rows when clicking on a button put only in the first row. the first row contains initially many inputs fields and combo-boxes. Each field is initalized by an ajax call. And each action on a field leads to the refresh (filtering) on the whole fields of a row. I'm also using autocomplete on input fields.
The first row works perfectly. However, when cloning the tag:
If I did not enter values in the first row, the cloned and first row work fine
If I enter a value or values in first row fields and after I clone the , only the first row fields still work. In this case, if I try to change the value of the combo-boxe (which fire a change event for all concerned row fields), the fields of the first row are impacted despite using Ids when changing autocomplete data. Ids of fields, combo-boxes, table rows are dynamically created when clicking on the button to clone the widget.
The code I wrote is too long so I created a fiddle and simplified the case and still have the same problem.
I tried many suggestions that I've found like this, this one or this one in vain :-(
(data.('autocomplete', null), autocomplete("destroy") ...)
Do you have ideas about this issue ?
thanks in advance

Aside from the typo in the test (you are selecting by class instead of the new element by id), the basic problem is you are applying autocomplete before you add it to the DOM.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/87jcw1y0/2/
I just reversed the order of these two lines:
$('.body').append(clone);
applyAutoComplete2('#myinput' + inc);
The cause... Some plugins use storage data associated with the DOM element, or attach events to ancestors etc. None of these can happen with a disconnected DOM element, so just attach it to the DOM first.

I think ur asking this
Check in this link http://jsfiddle.net/bsarunmca/87jcw1y0/3/
applyAutoComplete1('#myinput1');
$("button").click(function() {
inc = inc+1;
$('#myinput1').clone().attr('id','myinput'+inc).appendTo('.add-this');
$('#myinput'+inc).val('');
applyAutoComplete2('#myinput'+inc);
});

Combobox Items unselectable

In ExtJS I have something rather weird with my combobox.
The combobox is populated but in some cases, all but the 2 first entries are removed.
If I stay on the same page and process a new item on this screen (thus the all fields and thus the combobox would be reloaded), the combobox is now completely populated however the remove function is runned.
The weird thing is that all items are in the combobox, but the only the items that didn't get removed are in fact selectable and clickable. If I would click any other item that is visible in the list, it just wouldn't do anything (even the combobox wouldn't collapse).
What could be the cause of this?
I know you guys want code but it's simple impossible to post code because the code at the company I work at is so huge and complex that there would be too much to paste in here. I'm just wondering if any of you guys have had something similar.
Also, a textbox is above the combobox. If you would fill in the textbox with a value from the combobox, the combobox would jump to the correct value. With the 2nd run (which I described above), if I would type a value that is visible in the combobox but unselectable, it would not jump to that value in the combobox. It seems that these values are only visible but that's it.
EDIT:
Some other weird behavior: if I click in the combobox (so you can actually type text) and press any button, the combobox will be magically transformed to the correct form. By this I mean that only the 2 first items are now visible. I do not have any listener that would do this on my combobox...
Perhaps a "refresh" of that combobox would be enough? However, this doesn't explain then why the combobox behaved that way in the first place. Got it in FF and IE.

Without the code, you say you cannot provide, I can only guess: See if you have idProperty defined for the model and if the idProperty matches one of the fields, if valueField of the combo is same as the value of idProperty and last if you receive records with unique ids from the server. The combo config should look similar to this:
Ext.define('ComboModel',{
extend:'Ext.data.Model'
,idProperty:'custId'
,fields:[
{name:'custId', type:'int'}
,{name:'custName', type:'string'}
]
});
Ext.define('ComboStore',{
extend:'Ext.data.Store'
,model:'ComboModel'
});
Ext.create('Ext.form.field.ComboBox',{
store:Ext.create('ComboStore')
,valueField:'custId'
,displayField:'custName'
});
Of course you would most likely need additional config options for the above classes. And custId must be unique for all combo store records.

In the end I got it solved by binding the store again to it's combobox. While debugging with Firebug, I saw that there were only 2 items in the store, and not all those that were visible.
A short example below:
var ddl = Ext.getCmp('DDL');
var ddlStore = ddl.store;
...
//some manipulation of the data here
...
ddlDocType.bindStore(ddlDocTypeStore);
The bindStore() function is not documented in the official docs...

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.