Changeset 2146


Ignore:
Timestamp:
Jan 23, 2012, 1:38:50 PM (11 years ago)
Author:
work@…
Message:
  • add ajax load functionality
Location:
trunk/grails-app
Files:
5 edited

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>
Note: See TracChangeset for help on using the changeset viewer.