Using jQuery $.ajax() for populating select drop down in Struts

jQuery provides some powerful set of AJAX API's to handle request which is simpler and configurable.

The different ways of making jQuery ajax calls are :

• load(): Load a piece of html into a container DOM.
• $.getJSON(): Load a JSON with GET method.
• $.getScript(): Load a JavaScript.
• $.get(): Use this if you want to make a GET call and play extensively with the response.
• $.post(): Use this if you want to make a POST call and don’t want to load the response to some container DOM.
• $.ajax(): Use this if you need to do something when XHR fails, or you need to specify ajax options.

If you need maximum control over your requests, use the $.ajax() which is configurable.We will see how to make use of $.ajax() .

Syntax

$.ajax({name:value, name:value, ... })

The parameters specifies one or more name/value pairs for the AJAX request.
To view the possible names/values click here.

In the following example we will load a select drop down based on the click of the other. On click of the project list we will load the executive drop down.

Code in jsp :

<s:select list="projMasterList" listKey="PROJ_ID" listValue="PROJ_CODE+' - '+PROJ_NAME"headerKey="-1" headerValue="--- SELECT --" id="ProjectCode" name="ProjectCode" onchange = "loadExecutiveList()" />

<s:select list="{}" name="ExecutiveCode" id="ExecutiveCode" headerKey="-1" headerValue="--- SELECT --" />

<img id="loader" style="visibility: hidden" src="<%=request.getContextPath()%>/images/spinner.gif" />

Code in java script :

function loadExecutiveList(){
    var projId=$('#ProjectCode').val();

    var urlPath="<%=request.getContextPath()%>/getFMSExListForProject .action? projId="+ projId;

    $.ajax({ url:urlPath,dataType:"json",type: 'GET',
        beforeSend: function() { $('#loader').css('visibility','visible'); },
        complete: function() { $('#loader').css('visibility','hidden'); },
        success:function(result){

           $("select#ExecutiveCode option").remove();
           var sel=$('#ExecutiveCode');
           $('<option>').text('--- SELECT ---').val('-1').appendTo(sel);

           if(result.EXLIST.length<=0){
                 alert("No executives associated with this project");
                 $('#loader').css('visibility','hidden');
                 return;
          }


          for (var i = 0; i < result.EXLIST.length; i++){

                     $('<option>').text(result.EXLIST[i].strExecutiveCode+' - '+                              result.EXLIST[i].strExecutiveName).val (result.EXLIST[i].intExecutiveId).appendTo(sel);

         }

    },
    error: function(jqXHR, exception) {
         alert(“An error occurred at the server”);
    }
});
}

The data type  used is json, you can also use xml and array data types.The executive list is set into the json object in the struts action class as follows.


public String loadExListForProj() {
   List<Executive> executiveList = new ArrayList<Executive>();
   try {
        int projId=Integer.parseInt(request.getParameter("projId"));
        PrintWriter out = response.getWriter();
        executiveList=fmPropService.getExecutiListForProject(projId);
        JSONObject js=new JSONObject();
        js.put("EXLIST", executiveList);
        out.println(js);
        out.close();
   }catch (Exception e) {
        logger.error(“ERROR GETTING EXECUTIVE LIST", e);
   }
   return null;
}

Struts.xml

<action name="getExListForProject" class="com.test.project" method="loadExListForProj"></action>

Dont forget to use the jQuery library in your jsp page.

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery/jquery-1.8.3.js" />



The async option of $.ajax() by default is true which can be set to false if you does not want the request to be asynchronous.
Similary cache is by default true.A Boolean value indicating whether the browser should cache the requested pages.
beforeSend(xhr) A function to run before the request is sent .
complete(xhr,status) A function to run when the request is finished (after success and error functions).
success(result,status,xhr) A function to be run when the request succeeds .
error A function to handle error condition



That's all hope this post helped you. In my next post we will see how to handle server side errors using jquery $.ajax()