I have a group of 6 radio groups on an xPage, each with a list of values 1-6. I am looking for a method to allow the user to only select each number once. A user will not be able to pick the number 1 for radioGroup1 and radioGroup2.
I am struggling to come up with a good way to do this.
The two methods I thought of were building an array in js, using the array for the values in the radioGroup, then removing values picked from the array and doing a partial refresh on the other radioGroups.
The second method was simply wipe the value of a radioGroup if the duplicate value was detected in another radioGroup.
I guess I could just do a validator to compare the values on the submit.
Any thoughts on the best way to approach this in xPages?
I suggest a twofold approach:
Client side: add an onChange listener to the radio buttons. When a value changes you run through the buttons and disable (gray out) the same number in the other radio groups. This is fast and good for the user since the UI doesn't "dance". You need a "picking" order. e.g. a column left (if organized in columns) can always overwrite the right column(s). You also need to eventually clear a radio button before disabling it
On the server side have a validator (one function called by all) that double checks that - in case someone tries to trick you with Firebug
Bonus Idea:
Radio buttons are bad for this type of UI (they are good as backing data store). Overlay them with a background graphic based on the radio button state like a checkmark, an empty square (for selectable) or a gray X (for disabled). Would make a great custom control.
Related
I have three select2 lists next to each other, first independent, second dependent on first, third dependent on second (cascading lists), that works as expected when I normally populate them by selecting some options. I have created a dynamic action that fills these items with values that I calculate when I click a button, but after the click, only the first select2 have selected value. The second and third value remains empty. When I check the session, all items have value in them. It appears that when I click the button that for a millisecond list are filled but after that values disappear. So my question is, how do I transfer values from server-side to client-side. I tried to refresh items, I have played with jQuery without success, also I have tried to separate dynamic action to set values separately but nothing worked. Values populate correctly so that is not the problem. Please help
Thank you in advance for your answer.
Is lazy loading checked for the select2 that are subject to this behaviour (Item -> Setting -> Lazy loading)? If so try unchecking it
I have a page with multiple text fields and select lists with the list of values. What I want to do is defining a dynamic action on one of the select lists that display numbers and returns same numbers and according to the selected number, I want to create or duplicate another select list in an amount of selected number. Then, after the end-user finish his work, I want to be able to take the selected values of select lists that are created within the dynamic action within the on-submit process.
Example:
In short, I want to create a dynamic action that duplicates the instructor list as many as the selected number of the number of sections list. How can I accomplish this?
If I understood what you are saying, you'd rather switch to a tabular form (or interactive grid, depending on Apex version you use). Using it, you can "Add row" as many times as you want (which would be your "Number of sections") and use the same LoV (i.e. Select List) in every row.
As far as I know (which really isn't that much), Apex isn't capable of doing that "as is". Maybe you can accomplish it the way you want it using some other techniques (blindly guessing & mentioning: JavaScript, Ajax, jQuery or whatever you might need).
I'm writing a program to auto fill form blanks in the web pages. With javascript I can deal with normal blanks like username input and passwd input. But when it comes to cascade select, like some web pages asking you to input your address info, there's 3 selects: choose country, choose province and choose city. The content of the second menu is loaded upon the onchange event of the first one, so as to the third select.
I'm wondering how to auto fill these 3 selects, given that I've already known the value for each one of them. Could any one help?
The following code seems not working:
document.getElementById("selProvinces").value='11';
document.getElementById("selProvinces").onchange();
document.getElementById("selCities").value='113';
document.getElementById("selCities").onchange();
document.getElementById("selDistricts").value='1190';
You might have a few problems here.
In some browsers, calling .onchange() won't actually trigger the event. See this answer to How do I programatically force an onchange event on an input? for more details.
If the page you're filling in is ajaxing in the next lot of values in the cascade, 'selCities' might not contain the value 113 just yet. You could set a timeout and poll periodically to see if 'selCities' has some values in it before setting the value
It might not actually be the onchange event that they're using for the cascading. The oldschool way used to be onclick. They might be doing it onblur. Possibly silly, but worth peeking at the source to make sure :)
I am writing a python web app for google app engine using jinja2 though my problem relates to HTML/javascript (jquery is good).
I have a menu guided by radio buttons. I have two columns that I want to permanently be there and I want the next three to be generated depending on what the user selects from the first two.
I understand somewhat how to generate the radio buttons automatically with JQuery (though any suggested resources would be great but I can probably figure it out) but my main question revolves around the fact that my final radio button has around 100 possibilities depending on the previous ones that are selected (only 3-5 will be displayed at a time mind you).
So my main question. Where should I store the names for the radio buttons and URLs that they will lead to? and how do I put these into the radio buttons as they are created?
Here is an image of what I want the final product to look like:
Thanks so much this is bending my mind for some reason!
Where are your 100 options stored now in javascript (front end)?
If all your options are stored on the front end you can implement your logic (which buttons to display based on the previous choices) on the front end. This would probably include an array of radio buttons. As you can see this could start getting unweildy to maintaint. Every time you want to update yoru logic you would have to manually update your js file.
If all the choices are stored in python/backend you will need to make an AJAX request from the front end to the backend. This can be done easily using jquery framework.
This request would include the choices the user makes. and it would return the correct radio buttons to display.
I am trying to implement a list of items that each have a checkbox to select the item. On top of the list, there is 2 radio button to check all or none items. However, when I update the selected list, the checkbox is not checked. I have got a fiddle here to illustrate the problem:
http://jsfiddle.net/hawaii/VcZBf/2/
Could you guys help me on this please.
Thanks
UPDATED
So you want to do a "checkAll(On this Page)" implementation.
To maintain changes to your checks from one paging event to the next, I would push the currently checked items in the grid to the server during the paging event, or have the act of checking / unchecking maintain back to the DB right after each event. Its a cheap call, and you aren't at a risk of losing checked items because the user hit the backspace key accidentally.
Without sending the checks to the server on every paging operation...
your checks to be stored locally separate from the list even when the template that those records represent is paged to another page.
(make sure to only update the people observablearray when you get your next page)
then, importantly, on every page event you need to apply the checks back onto the grid for the shown items.
Finally, to aleviate the fact that the checkmarks arent representing their checked state (you click check-all, and you don't see them get checked). This is because you had checked:$parent.checkedPeople. which will never work, since checkedPeople is an array, not a boolean. I changed this to a function that asks if this person ID is in the checked People array
anyhow.. here it is: http://jsfiddle.net/VcZBf/24/
Its a rough concept.
WITH sending the current checks to the server on every paging operation
Each object now would have an "isChecked" observable.
On every paging event, the current page's checkmarks are persisted to the DB server side.
Then if you page back to a page with checkmarks on it, they show back up for you.
Much smoother.
reference from previous answer:
http://en.wikipedia.org/wiki/Principle_of_least_astonishment
I simplified your structure a little bit. I don't think having both people and checkedPeople was really knockout-y. If you do want checkedPeople, it can probably just be a read-only computed observable.
I added an IsChecked field to the initial people (all false). I then changed the checkboxes to map to that. Finally, I had the radio buttons change all IsChecked fields using arrayForEach.
Right now, the radio button GUI isn't really intuitive. You can take two appraoches:
Make them regular buttons (recommended)
Make them check and uncheck automatically by data-binding the checked to a computed allChecked flag in the model. This would mean they check automatically even if you check the boxes one by one.
I also took out your logging. I'm assuming that was debugging, but you can re-add it if needed.