In MVC-3/Razor, I need to create a page which will have five set of controls. Each set will have a drop-down and a text box. User will select an option from drop-down and then provide some feedback on text box.
When the view is shown very first time, I only have to enable controls in first set. Whereas all controls in 4 other sets should be disabled. Once user perform action in first set of controls (select optino from drop-down and enter in text box), the second set should become enable now, whereas other set of controls should still be disbaled. The data shown in this second drop-down is dependent upon what user has selected in first drop-down. Once user complete action in this second set, the data in third drop-down will depend upon whatever user selected in first and second drop-down etc.
I am a web-form aspx developer and not sure what will be the best way of designing this in MVC-razor world (because there is not view state etc).
Step 1)
What needs to be clarified is what will cause the other “sets” to be enabled?
Is it after the user has selected an item in the dropdown
OR
Is it after they have entered some text in the textbox?
What also needs to be clarified is if you have a dropdown AND a textbox are they both enabled at the same time or is the textbox only enabled after you’ve selected an item in the dropdown?
Once you’ve got that figured out, move on to the next step.
Step 2)
Do the users need to visually see the 4 sets from the beginning (disabling the 3 other sets) or can you simply show the other sets (on the fly) once the previous one has been successfully filled?
Depending on the answers, this may vary your approach.
As for me, the way I’d do it is simply have/show one set that loads at the beginning.
Once the user has selected an item from the dropdown, I would make an AJAX call passing along the selected item and get back a list of values for the second dropdown.
Then, using jQuery, I would duplicate the row (or div) of the first set all while changing the values in the second dropdown box.
Repeat process for when an item is selected in the second dropdown.
But wait! There’s more!!!
Let’s assume you’ve reached the third set. What if the user decides to change the value in the first dropdown? What are your requirements if that happens? Should you remove all other sets and start back at square one? I guess so…
Since we are not aware of the full set of specs for your tasks, we can only assume stuff and this may (or not) be the best path to take.
Duplicating a row (or a div) using jQuery is quite fun and performance wise, it’s nice.
Keep in mind, you will have to give a different ID to your controls (dropdown + textbox) so when you submit the form, you could use the FormCollection to get those dynamically generated controls.
Related
Consider a modal dialog where a user can select an item from a list.
Option 1: Instantly close the modal upon selecting an item from the list.
Option 2: Have a selected state for the selected item and provide OK / Cancel buttons to confirm the selection before closing the modal.
Which of the two options is preferred from an accessibility standpoint? (considering keyboard navigation support, etc). Note that the selection is non-destructive and the user could easily re-open the modal and change the selection.
Option 2 is your best option here is some guidance related to this and the WCAG guideline
Basically do not change context, update lists etc. automatically on any type of input, you should always give the user a chance to confirm their actions.
Now the question is do you really need a modal if all the user is doing is selecting an item from a list?
Surely it would be a better UX to just have a list you can choose from (this depends on what you are doing, just thought I would point it out as you didn't give an example).
You also need to consider the fact that your modal list should present number of options, currently selected options etc. etc. Yet again these are just guesses and something to consider, it could be irrelevant.
Scenario/Context
I've got a drop down menu with two input elements underneath.
From the dropdown menu, are names of companies (with values set to the respective company id's), and another prompt to Add a new company.
If the option to Add a new company is selected from the dropdown, then the user is to fill out the 2 input field elements (i.e. company name and company email).
Otherwise, if an available company is selected from the dropdown,
then the 2 input fields (for company name and email are to be disabled).
My question
Is this possible to do without an AJAX call if I want things to happen without a page refresh?
Can anyone suggest some other alternatives??
Many thanks!
That is absolutely possible, though you'd need to use some JavaScript to make it happen and load a bit more data to the DOM on the initial page load.
For each option in your company select dropdown, add a data attribute for the name and email.
Then, watch that dropdown for the change event in JavaScript. Whenever that event is fired, if the data-company-name and data-company-email attributes are defined for the selected option, disable the input fields and populate them with those values. If those data attributes are not defined for the option (likely only for your 'Add a new company' option), then clear the values from the input fields and enable them.
Ok, so I'm in the process of expanding my knowledge and need a step in the right direction, not necessarily an answer.
I am wanting to create a script for my eCommerce site that lets users choose between grid and list view on product listings pages.
The grid view will be called using an included file called "incgridview.asp" - the list view file is called "inclistview.asp".
Upon the user choosing an option from the drop down specifying which type of view they want, the respective file should be called. So if they select grid view, I need to load the incgridview.asp (list view will be loaded by default).
Once the selection is made, I need it to switch the view without reloading the page, and store a cookie for 7 days that remembers their selection. Of course, they would still have the option to switch back to the other view.
So basically I am switching which file is included upon user selection of the drop down. Im thinking maybe I need to use ajax but not sure. Any help is greatly appreciated. Thanks!
EDIT
Ok, so this is what I am trying to use, on my file that actually includes the grid pages. It is throwing up this error:
Microsoft VBScript runtime error '800a01b6'
Object doesn't support this property or method: '[object]'
/productsviewtest.asp, line 59
Dim listgridcookie
listgridcookie = Response.Cookies("atdviewcookie")("viewoption")
Select Case listgridcookie
Case "list"
print"list view"
Case "grid"
print "grid view"
Case Else
Response.Cookies ("atdviewcookie")("viewoption") = "grid"
Response.Cookies ("atdviewcookie").Expires = DATE + 7
Response.Redirect(Request.RawUrl)
End Select
here is a steps on your page load:
1) Check if cookies exists and what values are there, if it does not exists - create one with default value.
2) Based on value from cookies show div which has been loaded with data from proper include file.
3) When/if selection changes create/re-write cookies with expiration time you desire.
All what you need to build is JavaScript based switch to show one element and hide another.
If you like to use AJAX or JQuery - you can do it this way but for my taste it take away challenges of creating something you can be proud of.
This is based on your " page must not be reloaded upon changing selection" statement.
I have a bit of a unique challenge today. I have a client that wants to be able to search for multiple items based on inserts into a cfgrid. Suppose we have the following web form:
A Country selection dropdown
A State Selection dependent AJAX dropdown
A city Selection dependent AJAX dropdown
An ADD Button
----------------------------------------------------
A CFGRID that will populate a row with selections when the user clicks the add button
----------------------------------------------------
And finally, a CLEAR button, and a GO button on the bottom.
The resulting page will then query the database and get some statistics about the cities selected. So, suppose an individual picks USA > Arizona > Scottsdale and USA > Arizona > Flagstaff. The grid below the options will 'save' each selection and reset to their default options, waiting for a user to pick additional options or click on 'GO'.
The resulting page will then generate columns that list some statistics about the communities and highlight the 'best of' between each selected community.
Each time a user selects the ADD button (assuming three criteria are selected) I want the information to be added into a CFGRID that displays the options selected. Then, After the user selects at least one country/city/state option, have all of the data in the CFGRID get passed to another page that does a query from the data selected. In theory, the user could pick as many communities as they want, assuming they are willing to let the database sludge through enough data to get what they want and wait through a 'loading' screen to get it.
I'm having these challenges, in no particular order:
- I have an HTML grid that I must use per client spec (No Java or Flash, must be HTML)
- I have no idea how to get the selected options into the CFGRID. I assume there is some JavaScript I can write that uses some sort of AddRow function to add data into the grid with the add button but cannot seem to find how to it on the interwebs
- After we conquer the above challenge, how do I pass the data from the grid into the results page? I thought about passing one big string or a structure, but I'm not sure how to do that through the URL or posting, nor how to get the data out of the grid. I wonder if I am better off coding some sort of string that gets passed from the options page to the results page with a get method instead of dealing with the stuff in the CFGRID and have the CFGRID serve only as a 'dummy' display container.
- Finally, after the pass is complete, I would need to loop through through the structure and perform a CFQUERY or CFSTOREDPROC on each row of data, then get the statistics I need to display on the results page. I assume this would depend on how I am getting the data from the options selection page to the results page.
THANK YOU ALL!
CFGRID is great to start, but it can be b*tch to customize and extend... Have you tried editable CFGRID with bind? See how far off it is from what you want first. If it turns out to be very far, then you might want to go for a jqGrid and code up some jQuery.
To start, read Using HTML grids and make the cfgrid editable.
http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cbec22c24-7a01.html#WSc3ff6d0ea77859461172e0811cbec22c24-72e0
Once you got that working, look at these provided JS functions that you can use with CFGRID
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WS0ef8c004658c1089-6262c847120f1a3b244-8000.html
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSd160b5fdf5100e8f-4439fdac128193edfd6-7f5f.html
If you still demand a bit more, you might need to dig into the underlying ExtJS component. At that point I would rather use jqGrid
I found out that the best way to handle this was by using a SerializeJSON call and a Deserialize JSON call back and forth. By using JavaScript notation we are able to pass a complex JavaScript object (array) between one page and another. This has the value add of not having to worry about sessions timing out and making URLs clickable from one solution to the next.
I'm working on an InfoPath 2007 form. I have two drop-down lists and i need the second to be populated with items bases on the value chosen in the first list. I use c# to populate the drop-dpwn lists from external sources. I've tried to use the OnChange event to make all this, but the second list is still empty.
If anyone knows, please tell me.
You can filter the entries for the second drop-down list based on your first list (but only if the entries are based on a data source, not manually entered).
Bring up the properties window for
your second drop-down list.
Select your data source.
Click on the button to the right of the Entries text box.
Select the repeating node you wish to use for the basis of your list entry.
Click the Filter Data button. From here you can enter a filter to limit the entries displayed based on the value of your first drop-down list.
Your question was a bit ambiguous. You may be trying to populate a secondary data source based off of your first drop-down list. This should work fine with an OnChange event. Can you post the code you are using to do this?
Some additional tips that may help:
The change event will not fire until focus moves off of the list box. So, for the second drop down to populate, you will need to set the first drop-down then hit tab or click elsewhere in the form.
I don't know the size or nature of the data source you are using for the second drop-down list, but you may consider downloading the entire data source and filter it using the method I described above. This may be a better solution as you won't need to make a database query between entering the first list box and the second one.