Tab order with paper input and own element - polymer

I have made my own "date" input which consists of a paperinput, the pikaday date picker and a date validator (also my own). The reason for this is I have a requirement to both allow "vague" dates (if someone types 4 digits with a value between 1901 and 2050 that means any time in a specific year) and complex other rules so 2811 means 20th November current year (I am british so working with dd/mm/yy - but system I am replacing doesn't need the user to enter the / character).
I have a form with two paper-input fields followed by my date field. Tabbing moves nicely between them until I tab away from my special element, when for one tab nothing is selected and then the next tab the next field is selected.
I put some code on the blur event of my date elements paper input, and the did a var test = document.activeElement; in the event handler. The result of this is the body element from my page.
How do I make the tab order play nicely?

As I explained in the comment under the question, the pikaday date picker had received the tab on the blur, but was then immediately hidden. This left the tab with the body. I changed the various buttons on the picker to have tabindex="-1" added as the picker is created. This resolved the problem

Related

Filtering name with two condition

I have a sample list of student and grades/subject in this file
enter image description here
https://docs.google.com/spreadsheets/d/1NeHlUaRnbvdJ2yJ38fUETGgBoYseQ8CuXmwRCwObAlM/edit#gid=0
On the range A16:A I'd like to see the list of names who has the grades of around 90-100 when I check any of the checkbox on B15:k15
the first example is when I check all of the boxes
I will only see the first name on the list because he is the only one with the 90-100 scores on all subject
2nd example when I check B15 and C15
I will only see the 1st and 2nd names on the list because he's those who only able to get a 90-100 score on those two subjects.
Is there a way to do this kind of filtering? thank you so much
Since this is your first post, I'm going to go with the approach I think you'll find easiest to understand. It's a long formula (which I've placed in a new sheet called "Erik Help" in A16), but it's just a repeat of the same element several times:
=FILTER(A2:K11, IF(B15=TRUE, B2:B11>=90, B2:B11^0), IF(C15=TRUE, C2:C11>=90, B2:B11^0), IF(D15=TRUE, D2:D11>=90, D2:D11^0), IF(E15=TRUE, E2:E11>=90, E2:E11^0), IF(F15=TRUE, F2:F11>=90, F2:F11^0), IF(G15=TRUE, G2:G11>=90, G2:G11^0), IF(H15=TRUE, H2:H11>=90, H2:H11^0), IF(I15=TRUE, I2:I11>=90, I2:I11^0), IF(J15=TRUE, J2:J11>=90, J2:J11^0), IF(K15=TRUE, K2:K11>=90, K2:K11^0))
The first argument of FILTER tells the function what to filter (in this case A2:K11).
After that, an IF statement is set up to check each checkbox. If the checkbox is checked, the FILTER will only include students who obtained a 90 or higher in that subject.
If the checkbox is NOT checked, then the student is automatically included (that's the part that says "B2:B11^0" etc., since anything to the zero-power equals 1, and 1 and TRUE are the same to Google Sheets). In other words, if no checkboxes were checked, then all students would read TRUE for all subjects, i.e., all students would be included (or, to think of it another way, no one is rules out). While the ^0 is not strictly necessary (i.e., any number other than zero is the same as TRUE), I think it's better formula practice and easier for others to understand if TRUE is represented either as TRUE or as 1.
I also set conditional formatting on A15:A, to bold the name as you had it. (The conditional formatting rule says, in English, "If anything is there, use bold.") You can see the rule by clicking anywhere in the range A15:A, then selecting Format > Conditional formatting from the menu and clicking the open the rule that appears in the window to the right of the screen.

How do i display from and to date from parameter?

Currently, I have text box that asks for a date. However, I would like to get date format like 9/13/2013 to 10/30/2013 from parameter. How can I add to date and from date to text box?
I believe you want a single text box to display the From and to dates. You can do this by referencing the parameters directly from your text box.
With the cursor flashing indicating you can type in the text box, right click it and select Create Placeholder
In the popup that appears click the fx button
Set the value to be the FromDate parameter
Set the format of the expression by clicking the Number tab of the popup, and selecting the date format you want, as shown
Then back in the text box carrying on writing in normal text "to"
Repeat steps 1 to 4 for the ToDate
The result should look something like this in design mode...
...and like this in preview mode
Hopefully this is the output you were imagining. If not, please let me know and I shall try to help further.
As far as I understand your question, you want something like this:
<span>To:</span><input type="date" id="toDate"/><span>From:</span><input type="date" id="fromDate"/>
In this case, the resulting page will have a textbox for a "to" date and a "from" date, both with a mm/dd/yyyy template built in. From here, you could then get the text box using document.getElementById, or jQuery, then get the value, and use subtract the dates. For date wrangling, I highly recommend moment.js, by the way.

Spring bean comma separating values, but I want to overwrite

Alright, so I'm pretty new to Spring, but I was asked to resolve a bug. So in our application, we have a page that queries a database based on an id. However, not all entries are unique to the id. The id and date pair, on the other hand, do define unique entries.
So this page takes in an id. If there is only a single entry related to this id, everything works fine. However, if there are multiple entries, the page displays a radio button selection of the various dates that pertain to that id. We use something like:
< form:radiobutton id="loadDate" path="loadDate" value="${date}" label="${date}" />
Later on the same page, we want to display the data for that option. As part of it, we display the date of that selection:
< form:input id="aiLoadDate" path="loadDate" maxlength="22" size="22" class="readonly" readonly="true"/>
The problem is that when this happens, the variable (or bean? I'm not quite sure about Spring yet..) loadDate (a string) ends up being the same date twice, seperated with a comma. I'm guessing the problem here is the "path="loadDate"" that is common to both lines.
Instead of appending the date to the already existing one like a csv, I'd like it to overwrite the current entry intead. Is there a way to do this?
Spring is not the direct cause of your problem. When the elements of an HTML form are submitted, each element will appear in the request as a name=value pair. If two or more elements in the form have the same name (not id, name attribute) then those elements appear in the request as name=value,value (with one value per element with a duplicated name).
Option 1: stop using an input as a display element. Just display the date in a span (or div or paragraph or what ever). If you want the look of an input box (border, etc.) use CSS to create a class that has the look you want and attach the class to the span (or div or paragraph, etc) in which you display the date.
Option2: continue using an input as a display element. Disabled input elements are not added to the request when the form is submitted. in the form:imput set disabled="true".

Form with more submits and submiting by Enter

This question is somehow similar to this one.
I have a form in my ecommerce solution. When you insert something into the cart, you can change number of items. The cart is whole in one form. The form has two submit buttons - recalcualte and continue (which will take buyer to Step 2 of the process).
When user changes the number of items using the inputs, he can either hit recalculate (which sends post to app that will change the numbers in session/db) or continue (that will also send the post data to recalculate and then take user to the step 2).
But when user hits enter, the recalculate button takes precedence.
What I want is to make the recalculate button submit the form, but ONLY when clicked and NOT when submited by pressing enter. In contrast the "continue" button should work also with enter.
The solution MUST NOT use javascript as the frontend has to be useable without JS enabled.
Any ideas?
Put the button that takes precedence first in your html sourcecode, and use markup to invert the position of the two buttons?
Edit: you say your layout can't handle that.
Either:
1. Change the layout. Functionality is more important, and for layout there is more than one way to do it.
2. Have the form not check if "recalculate" or "submit" was pressed, but rather if the shown price was correct with the calculated prize. Example:
User buys 1 item, value 3 dollar.
User buys 2 items, value 5 dollar.
Total prize: 13 dollar.
User now changes the 1 item into 4 items. 3 dollar becomes 12 dollar, but he doesn't hit recalculate.
Have a field in your form that shows the total amount (a hidden field is nicest). When the user submits the form, redo the calculation. If the calculated prize equals the prize in the hidden field, the user knew the final correct prize. If it differs, reshow the form mentioning "You changed your shopping cart, the total prize has been updated to reflect these changes. Verify the amount and submit to purchase" or something.
<input type="text" id="mytext" ... />
<script type="text/javascript">
document.getElementById("mytext").onkeyup = function(event) {
if(event.keyCode=='13' || event.keyCode=='10') {
alert('you pressed enter');
// do whatever you want when enter is detected
}
}
</script>
You should be able to decide that server-side. When a button is clicked it's name-value pair is submitted, but when return is pressed it isn't. So change your server-side script to do "recalculate" when the recalculate name-value is submitted and to contine in all other cases.

Set Focus to a textbox after data validation in .ASP page

I am working on an asp page that verifies information in a text box after the user types it in.
A “product number” is manually entered (free form). Using the after update event, I have the page post the data and lookup the product number to determine if it is valid. If not valid an error message is posted in the box, otherwise the product number and description is placed in the box (I.E X1234 becomes X1234 – RED YO-YO). This works 100% fine. My problem is that after the update the focus is lost on all the data entry items. I want the focus to be returned to the next text box so the operator can type in the next piece of needed information.
Note: So far I inserted a function that dynamically changes the “TABSTOP” numbering such that the “next” box is assigned the #1 after the validation lookup. This works on my browser (Firefox 3.05) but is does not on my IE (Thanks Bill ! ). In IE when the posting is finished the focus for some reason ends up on the “enter the URL” and hitting tab puts the focus on some control button that is no where near where I want it to be.
If you are trying to do what I think you are, this should do it.
In your ASPX page:
<script type="text/javascript">
function focusControl(ctrlId) {
document.getElementById(ctrlId).focus();
}
</script>
In your code-behind:
// 'ctrl' is the name of the ASP.NET TextBox that you want to receive
// focus on load.
Page.ClientScript.RegisterStartupScript(
typeof(Page),
"Focuser",
"focusControl('" + ctrl.ClientID + "');",
true);
Here is the general solution:
http://couldbedone.blogspot.com/2007/08/restoring-lost-focus-in-update-panel.html