function load_values()
{
    cnt = 0;
     
     $('#values_ul').empty();
     $('#values_ul').css('list-style-type', 'none');
            
            
     $.ajax(
     {
          type: 'get',
          url:  'project_3_ajax_backend_output_json.jsp?mode=all',
          data: {},
          dataType: 'json',
          success: function(data) {
            
                $.each(data, function(index, element) {
                    
                    cnt = cnt + 1;
                      
                    $('#values_ul').append(
                        $('<li />')
                             .attr('id','values_ul_'+cnt)
                             .attr('inner_value',element.param1)
                             .attr('onclick','popup_value(this)')
                             .text(''+cnt+' - ' + element.param2)
                    );
                      
                });
                
            
          },
          error: function(xhr, textStatus, errorThrown){
            $('#values_ul').html('');
          } 

    });
        
}




          
function popup_value( item )
{
    
    $('#values_ul li').each(function(i)
    {
        $(this).css('background', '');
        $(this).css('color', 'black');
    });
        
    $(item).css('background', '#5DADE2');
    $(item).css('color', 'white');
    
    alert( "value selected: " + $(item).attr('inner_value') );
         
}