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.
Related
I have a 20-25 names coming from API where I'll need to show them in a drop down box (requirement). I'm using Vue v-autocomplete here to display the selected names on the field. I've used custom item called Select All where the user can select all the names in the drop down list, but what I also need to do when the user clicks on Select All is that I don't want to show all the names in the Autocomplete field including Select All Chip. Only items that are selected individually without Select All should show as Chips.
Here is my code sandbox I've attempted so far. I'm new to Vue js, so I'm hoping to get some thoughts on controlling the chips on v-autocomplete.
v-autocomplete sandbox
Instead of including "Select All" in the array of names, you can use the prepend-item slot to include a separate Select All checkbox.
If you need to differentiate between names selected via individual click and those selected via the Select All checkbox you will probably need a new property in the names array to track that, say a boolean that is true if selected one way and false the other.
You'll also need a slot like selection to customize the display of your chips where you can use v-if to conditionally render a chip based on that new boolean property.
This codesandbox I believe is pretty close to what you're after
I create design for image, checkbox and drop-down list.. the image will create dynamically according to number of row..
My question is how can validate which checkbox was checked and which drop down option was selected because all of its have same id and name
First of all welcome to stackoverflow :D
If all of you checkboxes have the same ID it won't work. You said you create them dynamically then try to give them an special identifier like "myid"+i wehreas i being the number of the element (increase it after instantiating the element).
Then your IDs will look like:
myid0
myid1
myid2
...
with all the objects having a different ID it won't be a problem for you to check which checkbox was selected :)
Check this URL.
My divs are created dynamically in nested structure. I have to style this div to sports tournament structure. I don't know how to structure.
I want my structure like this.Now my code is working fine. Styling only the problem.
[1]: http://plnkr.co/edit/xKSwHAUdXcGZcwHTDmiv?p=preview
I am using org chart to achive my requirement.check below link
[https://jsfiddle.net/dhaarani/adx0ad49/][1]
page load one structure is shown. click the structrue again one is created.
change the input box value. sibilling and child will be created. inputbox value mustbe lessthan 100.
and one more condition check the one row contain all the input box values total is lessthan 100 than only create sibilling and child otherwise nothing will be happen.
I am new in Grails. I have a drop down box and a button which generates PDF. I am able to generate and download PDF using following tag
<export:formats formats="['excel', 'pdf']" />
But, now I want to select item from drop down and pass that selected item to the export tag like below
<export:formats formats="['excel', 'pdf']" params ="Pass selected item here"/>
I tried a lot but no luck. Does anybody know how to pass selected item value of drop down to the export tag?
In your controller use flash.value = params?.value inside the appropriate method. This will allow you to store the key:value pair for one transaction only.
In the GSP page define the select box value value="${flash?.value}" and give the select box an ID.
Assuming you want to pass the variable into the business logic, in your controller use an if statement to check for the select box value and follow the appropriate logic based on each value.
Flash is a temporary key:value storage mechanism for one request only. For more information on flash check out the documentation.
I have a pulldown menu generated from a MySQL dataSource.
<g:select onchange="selected()" id="name" name="name" from="${listOfNames()}" noSelection="['':'--']"/>
this populates the menu with one column from my table
Now based on the selection I want to display additional columns from the same table as text on the gsp form.
so user selects Name1 from dropdown. I display underneath the dropdown menu
Name1. age 21. degree yes.
I have an action inside my controller called allDetails that queries all values associate with a name and returns it a string. But I am not sure how to pass it parameters
"${remoteFunction(action:'allDetails', params: \'name=\' params.name')}
What is the best way to do this. run a JavaScript remote function inside selected() or a gsp tag that calls the action somehow? how to then display the returned string? Change the innerHTML?
tried http://www.grails.org/AJAX-Driven+SELECTs+in+GSP
You cannot use remoteFunction or other core Grails tags, because its text is fully generated during page rendering, and you only know the selected name during Javascript executing in onchange.
So use jQuery Ajax call (unless you switched to a different Javascript plugin).
And I suggest that you select not a name, but an id of that person, like in a second g:select example.