Develop Reference

With AMP HTML, is it possible to get ID or other properties from clicked element, append them and create URL for an anchor tag?

I have a set of check input. Each one contains a unique ID. On checking box (on click) I want to get this ID and create a string of type '/some/path/?myids=checkOne,checkTwo (where checkOne and checkTwo are IDs of two different check input that have been clicked.
I understand that I can use state management - but my issue is: how can I limit how many checkboxes to create custom string for? For example, I want to have a limit of 5 comma separated IDs. Since AMP logic is limited I am not sure how to do complex logic with it.
Here are the steps:
show set of checkboxes.
user can click any of these checkboxes
as user clicks on a checkbox, an achor tag href=... needs to be updated by appending the substring ?myids=checkOne.
if user clicks on another checkbox then the href tag needs to be updated to this: ?myids=checkOne,checkTwo and so on until at the most 5 checkboxes are clicked.
Is this at all possible? Thanks
Documentation is not very clear on how to approx complex logic and not much found on searching.

One option is to use amp-selector and then limit the number of selected items when binding using .slice():
<amp-state id="selected">
<script type="application/json">[]</script>
</amp-state>
<amp-selector layout="container" multiple on="select:AMP.setState({selected: event.selectedOptions})">
<div option="1">First</div>
<div option="2">Second</div>
<div option="3">Third</div>
</amp-selector>
<div hidden [hidden]="selected.length < 3">You can only select two options.</div>
Click me
This limits the number of selected IDs to two and displays a warning if the user selected all three.

Dividing the main view in MVC to multiple sub views

I want to create a view that that is divided internally into many sub views
that will be displayed beside each other, i.e
The view will contains something like steps that when user fill one of the sub views he should click next button on the sub view to show the next sub view which will be displayed directly beside the old sub view .
I am using c# , MVC5 , JavaScript , Jquery .
i am thinking about creating ViewModel that conatins all my data of all sub views from all required tables , then create a view that is strongly typed to that view model .
In the strongly typed view , i am thinking to create a main Div html element that will contain another sub div elements (will be displayed Horizontally beside each other) and there will be a horizontal scroll to scroll through these sub div elements, each of them have fixed width and contains also a part of the fields for a certain part of data ,
in the first load of the page , there will be only the first sub div which will be visible to the user and it contains a tabular data , when user click on one line of this data it should show only the second sub div and an editable fields to be filled or edited and a button with text continue , when user clicks on the butoon continue on the second sub div view , it should display the third div element that will also contain some editable fields and a next button , when user click on that button it should display the fourth div ...etc , and at the final step it should display a submit button to save the data in all this divs elements and at the same time firs the validations of the page.
i am trying to find another solution rather than using partial views , it this idea will gonna work , because i have no time to implement and test , i should give a quick decision ,
Or if there is a better solution , i would be happy to know it .
i also need the submit button at the end, to horizontally scroll automatically to the sub div if it contains a validation error.
i am Open for any suggestions regarding this but i don't want to use Angular or NodeJS.

Display dynamic items on page after initial page load

I am using ASP.Net mvc to render my html view.
The view contains a dropdown list and a label
I load drop down list using a collection in my view model.
Lets say that the collection is called fruit
IList<Fruit> fruit
Fruit is defined as
FruitId
Name
FruitType
The dropdown list will display each Fruit name and have a value of FruitId
When I change the value of the drop down list I want to have the value of my label display FruitType.
I can think of a couple ways of doing this:
Write out Label tags for all values of FruitType. Give a css class to display the first one on load and add javascript to show/hide labels in the select onchange event
Provide json array of Fruit in the html somewhere (I would serialise the Fruit list on page load and put the resulting script on the page somewhere). I would add javascript to the onchnage event of the select to search the json and change the label value accordingly.
I have 2 questions:
Am I missing something obvious, could this be done in a better way?
If no 2 is a good idea, where should I put the json in the html so that the js can use it?

Another approach is that when you generate the dropdown list, include a data-attribute, say data-fruit-type where you store the FruitType, then when the dropdown value changes, just read the data-fruit-type attribute from the selected item.

How to detect change in form if added a new row in prime faces datatable

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.

3rd dynamic dropdownlist value compare with 4th table value from botton -> show div?

Honestly been looking everywhere..
The traditional 3-dropdown list dynamically populated from database:
1st table gives airport departure
2nd table gives airports choices
from 1st choice
3rd table show routes between 1 and 2.
That works perfectly!!
When passenger chooses a route from the 3rd drop list I want to check if the value from 3rd dropdownlist is represented in a 4th table called "donations"
Some routes are marked for donation possibility where passengers can donate their unused baggagecapacity to charity
My last hurdle is:
when 3rd list is selected --> check for donationpossibilities--> if possible then show a hidden div on submit
...
I've tried and read so much and gotten a lot more clever and I think I have the query to check the values in order, but I'm lost...

Not sure what programming language you are using to load the dropdowns from your database, but one option that you could try is that when you are adding the html option elements to the 3rd dropdown list you could add a data attribute to each, for example:
<option value="route 1" data-can-donate="true">...</option>
Then if you are using jquery you could bind the change event to the 3rd dropdown and do something like this:
$('#ddlRoutes').change(function() {
var canDonate = $('#ddlRoutes > option:selected').data('can-donate');
if (canDonate) {
$('#myDiv').show();
}
};
Obviously this is untested but it may work for what you are trying to do.