2

I have a JSP in which there is a select list containing entity kind names. When I select an entity kind I need to populate another select list with the field names of the selected entity kind. For that I call a JavaScript function on the onchange event.

In the JavaScript method I need to call a method in the backend that returns an arraylist that contains the field names of the selected entity kind.

How do I call the method with and without Ajax? Also how do I populate the second select list dynamically with the arrayList?

Improve this question
4
  • Please start writing the program and come with an specific problem. Commented Apr 29, 2013 at 7:43
  • submit the form to that method. Commented Apr 29, 2013 at 7:44
  • Simplest way is to have a separate jsp for this purpose. This might not suit if you have 100's of AJAX calls in your JavaScript. I might be wrong, but I see no reason to avoid AJAX, this is what it's there for. Commented Apr 29, 2013 at 7:59
  • Check this out jsfiddle.net/kasperfish/r7MN9/4 Commented Oct 4, 2014 at 12:36

4 Answers 4

Reset to default
3

I'll describe two ways to go: with/without AJAX.

  1. If you want to do a synchronous form submit you'll need to attach onchange event to your first select element:

    <select name="select-one" id="select-one" onchange="this.form.submit()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

    When done this way, the form will be submitted and first select option will be available as request.getParameter("select-one"), based on which you'll provide data for second dropdown population, typically forwarding to a JSP.

  2. If you want to retrieve a list via AJAX and repopulate another dropdown, you can send an AJAX request and handle returned data in a callback function:

    var val = $('#select-one option:selected').val();
$.ajax({
    url: "servletURL",//servlet URL that gets first option as parameter and returns JSON of to-be-populated options
    type: "POST",//request type, can be GET
    cache: false,//do not cache returned data
    data: {one : val},//data to be sent to the server
    dataType: "json"//type of data returned
}).done(function(data) {
    var second = $("#select-two");
    $.each(data, function() {
        options.append($("<option />").val(this.value).text(this.label));
    });
});

    When done this way, the second dropdown will be repopulated without page refresh.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

  1. Write a JavaScript function names callAJAX on the onchage event of your select drop down

  2. In your callAJAX function , make an ajax call to the back end, get the response from the server, and populate the new drop down with the response coming in your ajax call

I hope you can make ajax calls , if not let me know.

Improve this answer

5 Comments

Sorry,i dont know how to handle the response data(i.e the arraylist) & populate the 2nd select list.can u pls write the code.
@Trisha : the answer below skuntsel pretty much everything , though i will try to post a little more elaborated answer , but i suggest you first try the following answer ,more important is that you try is first
wahid,its not working.the backend method is not getting called.
@Trisha : so whenever you are available could you please what are you doing and what prob are you facing , because the method below seems perfect , tell me what are you facing , your action should be a servlet
thanx wahid.my problem's solved.finally i understood.thank u all for your time & help.
0

You want to load your list dynamically from backend. You must communicate with your server either:

  • with a page load (form submit)
  • or without a page load(ajax).

If AJAX is not your requirement, I suggest you do it by form submit(with page load) first because it's simple and easier for beginner.

Improve this answer

4 Comments

I dont want to submit the page because as soon as i submit the page the data in the 1st select list is gone.
@Trisha Then you can go with the ajax approach. It just require you a little bit more concept of how things(js/jquery/how to return a json from server) work.
I am able to call the method through ajax but i dont know how to handle the response data,which is an arraylist in my case.also how to populate the new select list with the response data.
sorry for the inconvenience.actually m totally new to these concepts.
0

Agree with Jai. You will have to submit that form to the java method, then your java method will return the arrayList. Of course if you form submit, your page will be refreshed and I'm not sure if your previously selected values will still be selected on the form. I'm not too clued up with this method of doing it. I prefer to use jquery.

With jquery you can do it like this:

$.ajax({
    url: "/MyApp/MyClass/getArrayList",
    type: "GET",
    data: "selectedEntity=" + s_entity,
    success: function(response){ 
        //handle returned arrayList
    },
    error: function(e){  
        //handle error
    } 
});

Put this in a function. Pass your selected entity as a parameter and handle the response in the success part. Of course your java method should map 'selectedEntity' to a parameter in the method header. In Spring it's done like this: 

private @ResponseBody ArrayList getArrayList(@RequestParam("selectedEntity") String entity)
Improve this answer

1 Comment

how do i handle the response in success?can i populate the 2nd select list there?pls help!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.