mason/phenome/associate_locus.mas

   1 <%doc>
   2
   3 =head1 NAME
   4
   5 /phenome/associate_locus.mas - a component for printing a generic 'associate_locus' javasript form
   6
   7 =head1 DESCRIPTION
   8
   9 a component for printing an autocomplete form for searching loci and associating with your object
  10
  11
  12 Parameters:
  13
  14 =over 6
  15
  16 =item object_id
  17
  18 a database id
  19
  20 =item object_name
  21
  22  the name of the object you are associating the locus with (e.g. 'stock')
  23
  24 =item locus_autocomplete_uri
  25
  26 the uri for the code which retrieves the  locus info
  27
  28 =item $locus_add_uri
  29
  30 the uri for storing the link in the database
  31
  32 =item show_form
  33
  34 optional. default 0. If the user is logged in, you might want to set this to 1 and display the form. Either way, associating loci permissions should also be enforced in your 'add' function
  35
  36 =item allele_div
  37
  38 a unique name for your div_id for updating content in your page without reloading.
  39
  40 =back
  41
  42 =head1 AUTHOR
  43
  44 Naama Menda <nm249@cornell.edu>
  45
  46 =cut
  47
  48
  49 </%doc>
  50
  51 <%args>
  52
  53 $object_id
  54 $object_name
  55 $locus_autocomplete_uri => '/ajax/locus/autocomplete'
  56 $locus_add_uri
  57 $show_form => 0
  58 $allele_div
  59
  60 </%args>
  61
  62 <& /util/import_javascript.mas, classes=>[qw[ jquery jqueryui popup]] &>
  63
  64 <div class="well">
  65
  66 <div id = "<% $allele_div %>" >&nbsp;Loading..</div>
  67
  68 % if ($show_form) {
  69 <div id="associate_locus_form" class="container-fluid">
  70   <div id="locus_search" >
  71     <form name="loci_form" class="form-horizontal">
  72
  73         <div class="form-group">
  74             <label for="loci" class="col-sm-6 control-label">Associate another Locus:</label>
  75             <div class="input-group col-sm-6">
  76                 <input class="form-control" placeholder="Allele_name (Allele_symbol) Allele: AA" type="text" id="loci" name="loci">
  77                 <span class="input-group-btn">
  78                     <button class="btn btn-primary" type="button" id="associate_allele_addon" name="associate_locus" onclick="javascript:submit_locus_form()">Associate locus</button>
  79                 </span>
  80             </div>
  81         </div>
  82         <input type="hidden" id="object_id" name="object_id" value="<% $object_id %>" />
  83
  84     </form>
  85   </div>
  86 </div>
  87 % }
  88
  89 </div><!-- closes well -->
  90
  91
  92 <script language="javascript">
  93   display_alleles("<% $allele_div %>");
  94
  95   jQuery(document).ready(function() {
  96      jQuery("#loci").autocomplete({
  97          source: '<% $locus_autocomplete_uri %>'
  98      });
  99   });
 100
 101   function submit_locus_form() {
 102     //make an AJAX request with the form params
 103     var loci = jQuery("#loci").val();
 104     jQuery.ajax({ url: "<% $locus_add_uri %>" , method:"GET", data: 'object_id='+<% $object_id %>+'&loci='+loci ,
 105      success: function(response) {
 106       var error = response.error;
 107       if (error) { alert(error) ; }
 108       display_alleles( "<% $allele_div %>" );
 109      }
 110    } );
 111   }
 112
 113   function display_alleles(allele_div) {
 114   jQuery.ajax( { url: "/<% $object_name %>/<% $object_id %>/alleles" , dataType: "json",
 115       success: function(response) {
 116        var json = response;
 117        jQuery("#"+allele_div).html(response.html);
 118       }
 119   } );
 120 }
 121
 122 </script>