Changeset 2146

Show
Ignore:
Timestamp:
23-01-12 13:38:50 (2 years ago)
Author:
work@…
Message:

- add ajax load functionality

Location:
trunk/grails-app
Files:
5 modified

Legend:

Unmodified
Added
Removed
  • trunk/grails-app/controllers/dbnp/query/StudyCompareController.groovy

    r2141 r2146  
    5555                        flow.page = 0 
    5656                        flow.pages = [ 
    57                                 [title: 'Page One'], 
     57                                [title: 'Criteria'], 
    5858                                [title: 'Page Two'], 
    5959                                [title: 'Page Three'], 
  • trunk/grails-app/controllers/generic/AjaxController.groovy

    r2145 r2146  
    3636                } 
    3737        } 
     38 
     39 
     40 
    3841} 
  • trunk/grails-app/views/studyCompare/common/_on_page.gsp

    r2141 r2146  
    2424%> 
    2525<script type="text/javascript"> 
    26         function onPage() { 
    27                 if (console) { 
    28                         console.log('calling onPage() which can be used to attach generic javascript handlers to DOM elements of a rendered page / partial'); 
    29                 } 
    30         } 
     26        function onPage() { 
     27                // add waitForLoad class to ajax elements 
     28                $('.ajax').each(function() { 
     29                        var element = $(this); 
     30                        var elementId = this.getAttribute('id'); 
     31                        element.addClass('waitForLoad'); 
     32 
     33                        $.getJSON(baseUrl+"/ajax/"+elementId,{},function(j) { 
     34                                var options = ''; 
     35                                for (var i=0;i<j.length;i++) { 
     36                                        options += '<input type="checkbox" name="species[]" value="'+j[i].id+'"/>'+j[i].name+'<br/>'; 
     37                                } 
     38                                element.removeClass('waitForLoad').html(options); 
     39                        }); 
     40 
     41                }); 
     42        } 
    3143</script> 
    3244 
  • trunk/grails-app/views/studyCompare/index.gsp

    r2145 r2146  
    2020        <link rel="stylesheet" href="${resource(dir: 'css', file: 'ajaxflow.min.css')}"/> 
    2121        </g:else> 
     22        <style type="text/css"> 
     23        .waitForLoad { 
     24                background: url(../images/ajaxflow/ajax-loader.gif) no-repeat center top; 
     25                width: 220px; 
     26                height: 30px; 
     27        } 
     28        </style> 
    2229</head> 
    2330<body> 
  • trunk/grails-app/views/studyCompare/pages/_page_one.gsp

    r2145 r2146  
    1010 * $Author:  duh $ 
    1111 * $Date:  2010-12-22 17:45:42 +0100 (Wed, 22 Dec 2010) $ 
    12  * 
    13  
    14  <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    15  <title>Select test</title> 
    16  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    17  <script type="text/javascript" charset="utf-8"> 
    18  $(function(){ 
    19  $("select#ctlJob").change(function(){ 
    20  $.getJSON("select.php",{id: $(this).val()}, function(j){ 
    21  var options = ''; 
    22  for (var i = 0; i < j.length; i++) { 
    23  options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>'; 
    24  } 
    25  $("#ctlPerson").html(options); 
    26  $('#ctlPerson option:first').attr('selected', 'selected'); 
    27  }) 
    28  })                      
    29  }) 
    30  </script> 
    31  </head> 
    32  <body> 
    33  <select id="ctlJob"> 
    34  <option value="1">Manager</option> 
    35  <option value="2">Lead Dev</option> 
    36  <option value="3">Developer</option> 
    37  </select> 
    38  <select id="ctlPerson"> 
    39  <option value="1">Mark</option> 
    40  <option value="2">Andy</option> 
    41  <option value="3">Richard</option> 
    42  </select> 
    43  </body>  
    44   
    4512 */ 
    4613%> 
    4714<af:page> 
    48 <script type="text/javascript"> 
    49 // get unique species 
    50 $.getJSON("${createLink(controller:'ajax', action:'uniqueSpecies')}",{},function(j) { 
    51         var options = ''; 
    52         for (var i=0;i<j.length;i++) { 
    53                 options += '<option value="'+j[i].id+'">'+j[i].name+'</option>'; 
    54         } 
    55         $("#species").html(options); 
    56         $("#species option:first").attr('selected', 'selected'); 
    57 }); 
    58 </script> 
    59  
    60 species: <select id="species"/><br/> 
    61  
    62  
     15species: <div id="uniqueSpecies" class="ajax"></div> 
    6316 
    6417</af:page>