mason/locus/associate_locus.mas

   1 <%doc>
   2
   3 =head1 NAME
   4
   5 /locus/associate_locus.mas - a component for printing an 'associate_locus' javasript form
   6
   7 =head1 DESCRIPTION
   8
   9 this component has dependencies on CXGN.Phenome.Locus and CXGN.AJAX.Ontology
  10 you will have to import these javascript classes in your code that uses this component.
  11
  12 <& /util/import_javascript.mas, classes => [CXGN.Phenome.Locus", "CXGN.AJAX.Ontology"] &>
  13
  14
  15 Parameters:
  16
  17 =over 1
  18
  19 =item locus_id
  20
  21 a database id
  22
  23
  24
  25
  26 =back
  27
  28 =head1 AUTHOR
  29
  30 Naama Menda <nm249@cornell.edu>
  31
  32 =cut
  33
  34
  35 </%doc>
  36
  37 <%args>
  38
  39 $locus_id
  40 $locus_autocomplete_uri => '/ajax/locus/autocomplete'
  41
  42 </%args>
  43
  44 <script language="javascript">
  45
  46
  47   jQuery(document).ready(function() {
  48      var common_name = jQuery('#organism_select option:selected').attr("value");
  49      jQuery("#loci").autocomplete({
  50          source: '<% $locus_autocomplete_uri %>' + "?common_name=" + common_name + "&mode=no_alleles",
  51          autoFocus: true,
  52          minLength: 1,
  53          select: function(event, ui) {
  54                   Ontology.populateEvidence('locus_relationship_select', '/ajax/cvterm/locus_relationships'); }
  55      });
  56
  57   jQuery("#organism_select").change(function(){
  58              common_name = jQuery('#organism_select option:selected').attr("value");
  59              jQuery("#loci").autocomplete('option', 'source', '<% $locus_autocomplete_uri %>' + "?common_name=" + common_name + "&mode=no_alleles");
  60        });
  61   });
  62
  63
  64 </script>
  65
  66
  67 <div id='associateLocusForm' style="display: none">
  68   <div id='locus_search'>
  69     <form name="loci_form" >
  70       <input type="text"
  71            style="width: 50%"
  72            id="loci"
  73            value = "--type a locus name--" >
  74       <select id = "organism_select"  onchange="jQuery('#loci').val('--type a locus name--');$('associate_locus_button').disabled=true">
  75       </select>
  76
  77       <select id="locus_relationship_select" style="width: 50%"
  78               onchange= "Ontology.populateEvidence('locus_evidence_code_select', '/ajax/cvterm/evidence', '--select an evidence code--');" >
  79       </select>
  80       <select id="locus_evidence_code_select" style="width: 50%"
  81               onchange="Ontology.populateEvidence('locus_reference_select', '/locus/<% $locus_id %>/references', '--Optional: select supporting reference --');$('associate_locus_button').disabled=false">
  82       </select>
  83       <select id="locus_reference_select" style="width: 100%">
  84       </select>
  85       <input type="button"
  86              id="associate_locus_button"
  87              value="Associate locus"
  88              disabled="true"
  89              onclick="Locus.associateLocus('<% $locus_id %>');this.disabled=true;" />
  90     </form>
  91   </div>
  92 </div>
  93