I have a requirement whereby I have two panes on a page, the pane on the left holds a series of records specific to a option selected from a drop down. Each record has a plus sign next to it, if this is pressed it will be 'moved' to the right hand pane and displayed under the option the user selected.
Multiple records can be put into each option selected.
I'm a bit unsure of the best approach to go with this. At first I was thinking about creating an array in Javascript and each click of plus would add the item to the array. When the form is ready to be submitted, use jQuery/Ajax to pass the array to a php function.
I suggest having this structure:
Options={
'opt1':{},
'opt2':{},
'opt3':{}
}
and you have these records
//following is a structure view, not code
1: Record #1
2: Record #2
3: Record #3
4: Record #4
when user chooses to attach record#2 to opt3, you do:
Options['opt3'][2]='Record #2';
New Options object:
Options={
'opt1':{},
'opt2':{},
'opt3':{
2:'Record #2'
}
}
removing added options is as easy as:
delete Options['opt3'][2]
I've had to do similar things with arrays in javascript and I used the splice method
This is the definition:
The splice() method adds and/or removes elements to/from an array, and returns the removed element(s).
This is where I would start.
Related
SUMMARY: I have a column for ids within an ag-grid table. How can I get a button-click to only display some of the rows (for which I have a list of ids), while not re-writing the whole table?
BACKGROUND: I am using the community version of ag-grid and am using it with Javascript. I have a column with the id numbers in it. When I click a button (or something else eventually, but start with a button for simplicity), is it possible for it to act as a filter within the table, and hence could be undone by clicking another button to clear the filter?
In case that wasn't cleaar, I am looking to do:
1. Click button1
2. Display certain rows within a table whose id numbers are in my list variable
3. Have this button1's action act as a filter that can be undone by a button2 (which could be programmed perhaps like a clear filter button)
Is this possible to do with a quickfilter? Otherwise, if this isn't possible, how could I do this when over-writing the table, whilst still having the option to 'instantly' revert back to the original table
(I don't think I need to add code as I am unsure of how to build in this functionality)
Thanks in advance.
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).
I have requirements to disable save and cancel buttons in my page on page load. I should enable save and cancel buttons if user changes something in the page. To achieve this, I am using
http://plugins.jquery.com/are-you-sure/
This plugin is working fine but there is need for customization in many scenarios, one like below
I have a page like Item groups which consists of three panels.
LeftPanel : List of item groups in the system
CenterPanel : List of items assigned to a selected item group
RightPanel : List of items to assign to an item group
Now Assume I have a datatable
<p:dataTable var="itms" value="#{myBean.listOfItems}" rows="10"
paginator="true"
paginatorTemplate="{CurrentPageReport}
{FirstPageLink}
{PreviousPageLink}
{PageLinks}
{NextPageLink}
{LastPageLink}
{RowsPerPageDropdown}"
rowsPerPageTemplate="10,50,100">
</p:dataTable>
To assign items to the item group I would select items in the right panel and click on assign button which would add to the listOfItems to show in the center panel
listOfItems.addAll(selectedItems);
I am calling rescan method defined in the plugin on assign button oncomplete to detect the changes and track new records added because I want to consider addition or removal of fields also a change.
Now on page load if an item group is selected and it has 13 items assigned then I could see the first page with 10 records. If any items added then they will be added in the list at back end list. Since I'm in first page and page is having complete rows plugin is unable to find any changes in form.
How to find a change in this scenario.
Since you say you want to consider any addition or removal of fields also a change to make sure that your users save the changes, one way to do it could be like this:
You can have a hidden input:
<h:inputHidden id="hiddenInput" />
And in your assign button oncomplete you mentioned you can add:
oncomplete="$('#hiddenInput').val('dirty').change();"
This would add the 'dirty' string (for example) to the hidden input and call change() to tell the plugin that something changed, and the plugin would mark the form as dirty (changed).
And in the oncomplete of your saving button, all you have to do is clear that value and reinitialize the plugin to start again:
oncomplete="$('#hiddenInput').val('');$('#formId').trigger('reinitialize.areYouSure');"
Also it would be good to add some checking or to do that at the end of the action (link).
NOTE: If you add and delete the same 'item', technically there aren't changes, but you want to keep the form as changed right? This solution will work for that. Correct me if I'm wrong and you want to manage this particular case. You would have to add some logic in which you compare old and new values and clear or dirty the hidden input accordingly.
I am working with knockout.js. I have a situation where I have a collection of items which each have a observable boolean isleader. Where one of them can be active at a time. If people swap an item in the collection with one from another collection then I check if the old one isleader is true and if so I set it on the new one. This works fine. Now I need to add a second input mechanism which is a dropdown which is bound to the collection to show all the items from the collection. I want the one item in the collection with the isleader set to true to be the selected item and if the selected item is changed I would like the isleader to be updated to reflect this.
How can I do this without creating an infinite loop between the dropdown and the collection constantly updating the selected item.
You can do a peek.
this.selectedItem.peek()
as opposed to
this.selectedItem()
as you are propably doing.
Both will return the fields value, but the first will do it without creating a dependency. In other words, peek will get the value, but it won't subscribe to it.
I have 2 select option list, they are chained with this method : Chained Select List
I have added an input in order to filter all values in these 2 select with this method: Input Filter Select List
When a user type a word in the input, there are two case :
1/ If the user click on a word in the first list : it will show values possible in the second list
2/ If the user click on a word in the second list : it must show/highlight the 'parent' in the first list..
I don't know how to achieve the second case..
I'm open minded to every solution :)
Thanks,
since you have to do it using javascript..
There are two ways to do this
maintain an array of parents for the options available in the second list. get the values from array using arrday indexes of the select value in the list. use onChange() event on second list and populate the parent in the first list.
for second list, provide the option value to its parent.. i.e. when user selects an option in second list... as value it should return its parent... we will be able to populate the vallue in first list accordingly. please be aware that in this case it is overrding the actual values in second list.