How to Retain Search Filter Values while using AJAX calls in Spring MVC

Question

I have this code I'm working on. The drop down in JSP looks like this:

<td>Product</td>
 <td><select id="productCode" name="productCode"   onchange="getSubProduct();" >
      <option value="">-Select-</option>
 </select></td>

The Loading of this particular drop down happens from a getProduct() function as follows:

 function getProduct(){
        var i=0;
      $("#productCode")
        .find('option')
        .remove()
        .end()
        .append('<option Style="color:red;" value="">loading...</option>')
        .val('');
          $("#productCode").attr('style', 'color:red;');

        $.ajax({
             url: 'getProducts',
             data: {ppID:$('#ppId').val(),region:$('#regionCode').val(),branch:$('#legalVehicleCode').val()},
             type: 'GET',
             dataType: 'json',             
             success: function(data, textStatus, xhr) {  
                 var temp = new Array;
                 temp = data;
                 $("#productCode")
                .find('option')
                .remove()
                .end()
                .append('<option value="">-Select-</option>')
                .val('');
               $("#productCode").attr('style', 'color:black;');
               for(i=0;i<temp.length; i++){
                      $("#productCode").append('<option value='+temp[i].productCode+'>'+temp[i].productShortDescription+'</option>');
               }            
             },
             error: function(xhr, textStatus, errorThrown) {
                 //getProduct();
                 alert(error);
             }
         });
     }

Now my requirement is that, after I click search(shown below), I am supposed to be retaining the Search filter values in the next page(the search results page with a grid). This page has this form too.

<button class="btn btn-primary" type="button" onclick="javascript:buttonClicked1('search');retainSearch();">&nbsp;Search</button>

Things I have tried: 1. Sending values of those ajax called fields from the controller and attempted to fill it up. 2. Running jquery code

$("#searchForm #productCode").val("${replayMessageBean.productCode}");

Nothing has worked. Kindly help me :(

Answer 1

Try removing double quotes from,

$("#searchForm #productCode").val("${replayMessageBean.productCode}");

OR save the value of ${replayMessageBean.productCode} into some hidden field like,

<input type="hidden" id="prodCode" value="${replayMessageBean.productCode}">

And access this value $('prodCode')

Answer 2

Did you try something more simple and useful as JQuery autocomplete?. Using autocomplete you can add an ajax call and save the return values to be used in the search after that, even using a dropdown/input. Take a look:

http://jqueryui.com/autocomplete/

Here some code of mine.

  function initialize(){

        $( "#contactDetails_contactKeyForTenderingParty" ).autocomplete({
    source: function(request, response) {
        $.ajax({
            url: 'contacts/organization/name/'+request.term + ".do",
            dataType: "json",
            success: function(data) {
                response(data);
            }
        });
    },
    messages: {
        noResults:'',
        results: function() {}
    },
    minLength: 2,
    select: function( event, ui ) {
        update(ui.item);
        return false;
    }
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li>" )
        .append( "<a>" + item.legalName +"</a>" )
        .appendTo( ul );
}

}

  function update(governmentContact){

$('#a').val(governmentContact.basicAddress.houseNumber);
$('#b').val(governmentContact.basicAddress.city);
$('#c').val(governmentContact.contact.phoneNumber);
$('#d').val(governmentContact.contact.fax);
$('#e').val(governmentContact.basicAddress.zipCode);
$('#f').val(governmentContact.contact.email);

 }


    function expandDropdown(){

        $("#dropdown").autocomplete('search', 'all');

    }

Answer 3

I just sent 2 beans, one with the selected option and another with all the options.Basically 1 is a list and another is a single string. Then i froze the value with that string as "Selected" and the rest i popuated on the list normally. This solved my problem.