I filled a dropdown list with data from a database table and I have a second one which I want to display information based on the data displayed in the first dropdown. Is there any way I could do this in SPRING? Or could you tell me any other good way to do this?
These are the dropdown-lists:
<select name="Oras" class="drop-down">
<option th:each="oras : ${orase}"
th:text="${oras}"
th:value="${oras}"></option>
</select>
<select name="Baza sportiva" class="drop-down" path="">
<option th:each="bazaSportiva : ${bazeSportive}" th:text="${bazaSportiva.nume}"
th:value="${bazaSportiva}">
</option>
</select>
I created a controller which decides what data should be displayed in the first dropdown(from the database):
#RequestMapping(value="")
public String afisareOrase(Model model){
ArrayList<BazaSportiva> bazeSportive = (ArrayList<BazaSportiva>) bazaSportivaDao.findAll();
ArrayList<String> orase = new ArrayList<String>();
for(BazaSportiva bazaSportiva : bazeSportive){
String oras = bazaSportiva.getOras();
if(!orase.contains(oras)){
orase.add(oras);
}
}
model.addAttribute("orase", (Iterable) orase);
return "platforma/services";
}
You need to write a javascript/jquery code in order to send an AJAX request upon the selection of any option within the first drop-down in order to fetch the second set of your data from database.
then after the AJAX response with its data went back to your AJAX function, use another javascript/jquery function to access to the second select tag (using id/class) and fill it up with the acquired data!
Refer to this youtube video tutorial for understand the concept behind this and implement it in your own code -> Tutorial
Related
I'm working on a big form with a lot of inputs and select fields. I send the post request with axios and I'm using FormData() object with append method for all of the fields.
Everything is fine, just the data I receive in my controller is not what I actually expect. I mean, this is the example of one of the select field:
<select onChange={this.props.handleSelect} name="select1">
<option value="default">Choose your option</option>
<option value="1">Something</option>
<option value="2">Else</option>
<option value="3">Whatever</option
</select>
I set state of the Form with setState:
setState({ select1: target.options[target.selectedIndex].innerText });
So the state is "select1": "Whatever" (The point is, I'm not using the value from that field)
Then I append this select field before the request like this:
const formData = new FormData();
formData.append('select1', this.state.select1);
And after the post request, in my laravel controller I try to dd() with request all and get this:
"select1": "3"
So the data is sent without any problem, but I just receive the numeric value of selected option, not the text I try to send. Maybe I've just misunderstood something, so if it's the case, please, let me know.
Thanks in advance.
I'm trying using Backbone.Marionette to build an application. The application gets its data through REST calls.
In this application I created a model which contains the following fields:
id
name
language
type
I also created an ItemView that contains a complete form for the model. The template I'm using is this:
<form>
<input id="model-id" class="uneditable-input" name="id" type="text" value="{{id}}"/>
<input id="model-name" class="uneditable-input" name="name" type="text" value="{{name}}" />
<select id="model-language" name="language"></select>
<select id="model-type" name="type"></select>
<button class="btn btn-submit">Save</button>
</form>
(I'm using Twig.js for rendering the templates)
I am able to succesfully fetch a model's data and display the view.
What I want to do now is populate the select boxes for model-language and model-type with options. Language and type fields are to be restricted to values as a result from REST calls as well, i.e. I have a list of languages and a list of types provided to me through REST.
I'm contemplating on having two collections, one for language and one for type, create a view for each (i.e. viewLanguageSelectOptions and viewTypeSelectOptions), which renders the options in the form of the template I specified above. What I am not sure of is if this is possible, or where to do the populating of options and how to set the selected option based on data from the model. It's not clear to me, even by looking at examples and docs available, which Marionette view type this may best be realized with. Maybe I'm looking in the wrong direction.
In other words, I'm stuck right now and I'm wondering of any of you fellow Backbone Marionette users have suggestions or solutions. Hope you can help!
Create a view for a Select in my opinion is not needed in the scenario that you are describing, as Im assuming that your languages list will not be changing often, and the only porpouse is to provide a list from where to pick a value so you can populate your selects in the onRender or initializace function of your view using jquery.
you can make the calls to your REST service and get the lists before rendering your view and pass this list to the view as options and populate your selects on the onRender function
var MyItemView = Backbone.Marionette.ItemView.extend({
initialize : function (options) {
this.languages = options.languages;
this.typeList = options.typeList;
},
template : "#atemplate",
onRender : function () {
this.renderSelect(this.languages, "#languagesSelect", "valueofThelist");
this.renderSelect(this.typeList, "#typesSelect", "valueofThelist")
},
renderSelect :function (list, element, value) {
$.each(list, function(){
_this.$el.find(element).append("<option value='"+this[value]+"'>"+this[value]+"</option>");
});
}
})
var languagesList = getLanguages();
var typeList = getTypesList();
var myItemView = new MyItemView({languages:languagesList,typeList :typeList });
Hope this helps.
I'm building a site that hosts stories that have multiple chapters and on my view I would like the user to be able to select from a drop down menu and go to the chapter they have selected.
I have the drop down populating with information from the database, I'm just having trouble calling another controller based on that selection.
In my view this is my drop down
<select>
<?foreach($chapter as $row) :?>
<option value="<?=$row->chapter_title?>"><?=$row->chapter_title?></option>
<?endforeach;?>
</select>
I did try and add a link to the controller in the option, but that didn't work.
<select>
<?foreach($chapter as $row) :?>
<option value="<?=$row->chapter_title?>">
<?=anchor('story/viewChapter/'.$row->chapter_id, $row->chapter_title);?>
</option>
<?endforeach;?>
</select>
Is there any other way I can do this that does not involve javascript?
Unfortunately, you will have to use javascript:
If your using jquery you could try something like this:
$('#select_id').change(function(){
var chapter = $(this).val();
$(location).attr('href','http://www.mysite.com/books?chapter='+chapter);
});
Here is an example:
http://jsbin.com/efidar/1/
I have a drop down list that list different options to the user. I need the list to populate a text area based on what the user selects. I have the data already in my database and I want to be able to run a query based the user's selection from the drop down list.
This is how my select tag looks like right now:
<select name="procedure" onChange="">
<option value="">Select Procedure</option>
<cfloop query="procedures">
<option value="#procedureId#">#procedureName#</option>
</cfloop>
</select>
And this is my text area:
<textarea name="procedureDescription" cols="80" rows="6">#the query output will go here#</textarea><br />
Is there a way to use onSelectChange function to control a server side query with Ajax?
I hope my thoughts are clear, if you need more info please ask.
Yes, unless I misunderstand, you should be able to do this using an Ajax request. The onchange method should look something like this:
function handleProcedureChange()
{
var selectedVal = $(this).val();
var url; // TODO set procedure URL here, using selectedVal as needed
$.get(url, function(procedureResult) {
$("#procedureDescription").text(procedureResult);
});
}
Then you'd need to set up the server-side method to run the procedure and return the result as plain text.
MVC/Razor/Javascript newbie question:
I have a MVC3/Razor form where the use can select a single product from a drop down list.
<div class="editor-label">
Product
</div>
<div class="editor-field">
#Html.DropDownList("ProductID", (IEnumerable<SelectListItem>)ViewBag.Products, "--Select One--")
#Html.ValidationMessageFor(model => model.ProductID)
</div>
What I then want is to display the price of the selected product on a label just below the drop down list (model property name is Amount).
This should be pretty easy, but I am pretty new at Razor, and know almost nothing about Javascript, so I would appreciate any verbose explanations of how do do it, and how it all hangs together.
Add a div/span under the Dropdown .
#Html.DropDownList("ProductID", (IEnumerable<SelectListItem>)ViewBag.Products, "--Select One--")
<div id="itemPrice"></div>
and in your Script, make an ajax call to one of your controller action where you return the price.
$(function(){
$("#ProductId").change(function(){
var val=$(this).val();
$("#itemPrice").load("#Url.Action("GetPrice","Product")", { itemId : val });
});
});
and have a controller action like this in your Product controller
public string GetPrice(int itemId)
{
decimal itemPrice=0.0M;
//using the Id, get the price of the product from your data layer and set that to itemPrice variable.
return itemPrice.ToString();
}
That is it ! Make sure you have jQuery loaded in your page and this will work fine.
EDIT : Include this line in your page to load jQuery library ( If it is not already loaded),
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
The Amount isn't available to your view when the user selects a product (remember the page is rendered on the server, but actually executes on the client; your model isn't available in the page on the client-side). So you would either have to render in a JavaScript array that contains a lookup of the amount based on the product which gets passed down to the client (so it's available via client-side JavaScript), or you would have to make a callback to the server to retrieve this information.
I would use jQuery to do this.
Here's a simple example of what the jQuery/Javascript code might look like if you used an array.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
// This code can easily be built up server side as a string, then
// embedded here using #Html.Raw(Model.NameOfPropertyWithString)
var list = new Array();
list[0] = "";
list[1] = "$1.00";
list[2] = "$1.25";
$("#ProductID").change(displayAmount).keypress(displayAmount);
function displayAmount() {
var amount = list[($(this).prop('selectedIndex'))];
$("#amount").html(amount);
}
});
</script>
<select id="ProductID" name="ProductID">
<option value="" selected>-- Select --</option>
<option value="1">First</option>
<option value="2">Second</option>
</select>
<div id="amount"></div>
You'll want to spend some time looking at the docs for jQuery. You'll end up using it quite a bit. The code basically "selects" the dropdown and attaches handlers to the change and keypress events. When they fire, it calls the displayAmount function. displayAmount() retrieves the selected index, then grabs the value out of the list. Finally it sets the HTML to the amount retrieved.
Instead of the local array, you could call your controller. You would create an action (method) on your controller that returned the value as a JsonResult. You would do a callback using jquery.ajax(). Do some searching here and the jQuery site, I'm sure you'll find a ton of examples on how to do this.