javascript - service calls hang on the second page refresh -

i've got spring web application load ui data using web services. db use h2 , i've posted sample service use fill select element. below spring service.

@requestmapping(value = "/getalloutlets", method = requestmethod.get) public @responsebody modelmap loadoutlets(){     list<outlet> outlets = dataviewservice.getalloutlets();      modelmap model = new modelmap();     model.put("outlets", outlets);     return model; } 

this service consumed following call.

function getoutlets(){ var element = $('#outlets select'); element.empty();  $.get('/getalloutlets',function(response){     for(var = 0; < response.outlets.length; i++ ){         element.append("<option id="+ response.outlets[i].outletid + " >" + response.outlets[i].name + "</option>" );     } }); } 

when run web application, data loaded ui no hangs whatsoever. when refresh page, data doesn't loaded ui. checked firebug , see calls have loading icon infront of them. ( no break points have added ). thing noticed that, services require db access getting hanged in second call. example, i've got service read system properties file , send value. doesn't hanged while other db required services hanged. below screen shot of calls in firebug. ( hope understand )

update :

function populateuimajorgroups(){ var uielement = $('.item-group-button').first();  $.get('/getallmajorgroups', function(data){     if(data.majorgroups.length != 0){       $('.panel_list').empty();       uielement.empty();     }      for(var = 0; < data.majorgroups.length; i++){       var clone = uielement.clone();       clone.append("<h3>" + data.majorgroups[i].description + "</h3>");       clone.attr("id", data.majorgroups[i].majorgroupid);       $('.panel_list').append(clone);     }  },'json'); } 

the above code runs without hang! can see in screenshot! why happening methods?

i think getting json server didn't use it, add third parameter json datatype in get function like:

$.ajax({url:'/getalloutlets',datatype:'json',type:'get',     success:function(response){       if(response.outlets && response.outlets.length)//check here json       {           for(var = 0; < response.outlets.length; i++ ){               element.append("<option id="+ response.outlets[i].outletid + " >" + response.outlets[i].name + "</option>" );           }       }     }//end success }); 

docs http://api.jquery.com/jquery.ajax/