CODEWITHSUNDEEP
springmodel-view-controllerspring-mvc
user2033734
user2033734

Reputation: 11

Can I access the same controller multiple times in one view without changing the view?

I am using Spring MVC. I have a view that dynamically populates 2 dropdown lists based on queries called from the controller. I want to dynamically run a query based on the first dropdown selection to change the second dropdown, which means access the controller again (I think). Can I access the controller multiple times from the same view without changing the view? So for example, say starting out the first dropdown was a list of US States and the second started out as a list of all US cities, if I selected NC from the first list I would want to change the second list to include only NC cities.

Here is an example of the first dropdown:

<select name = "states" onChange = "populateCityList(this.options[this.selectedIndex].value)">
            <option value ="*">All States</option>
            <c:forEach items="${states}" var ="state">
                <option value ="${state}">${state}</option>

Pretty straightforward, but I don't really know where to go from there. I have it calling a Javascript function within the current view right now, but I don't know if that is correct or what to even do within that function.

Upvotes: 1

Views: 138

Answers (3)

hekomobile
hekomobile

Reputation: 1388

Hi @user2033734 you can do something like this:

JQuery code

$(document).ready(function() {
 $("#id1").change(function () {
    position = $(this).attr("name");
    val = $(this).val()
    if((position == 'id1') && (val == 0)) {
        $("#id2").html('<option value="0" selected="selected">Select...</option>')
    } else {
        $("#id2").html('<option selected="selected" value="0">Loading...</option>')
        var id = $("#id1").find(':selected').val()
        $("#id2").load('controllerMethod?yourVariable=' + id, function(response, status, xhr) {
            if(status == "error") {
                alert("No can getting Data. \nPlease, Try to late");
            }
        })
    }
 })
})

And JSP within

<table style="width: 100%;">
<tr>    
    <td width="40%"><form:label path="">Data 1: </form:label></td>
    <td width="60%">
        <form:select path="" cssClass="" id="id1">
            <form:option value="" label="Select..." />
            <form:options items="${yourList1FromController}" itemValue="id1" itemLabel="nameLabel1" />
        </form:select>
    </td>
</tr>
<tr>
    <td width="40%"><form:label path="">Data 2: </form:label></td>
    <td width="60%">
        <form:select path="" cssClass="" id="id2">
            <form:option value="" label="Select..." />
            <form:options items="${yourList2FromController}" itemValue="id2" itemLabel="nameLabel2" />
        </form:select>
    </td>
</tr>
</table>

I hope help you :)

Upvotes: 1

DangerDan
DangerDan

Reputation: 529

One solution would be to move some of the data gathering out into a service, so your main controller could use the service to gather the data before sending to the view.

Upvotes: 0

nickdos
nickdos

Reputation: 8414

The magic word is AJAX.

Your JavaScript function needs to make an AJAX request to your controller, which should ideally return a JSON data structure containing the values for the second drop down. Your JS function should then have a callback that catches the JSON from your controller and populates the drop down HTML by manipulating the DOM. JQuery is the way to go. There are lots of examples on the web, just search for it.

Upvotes: 1

Related Questions