mason/transformation/add_transformation_identifier_dialog.mas

   1 <%args>
   2 $trial_id
   3 $breeding_program_name
   4 $default_plant_material_id
   5 $default_plant_material_name
   6 </%args>
   7
   8 <& /util/import_javascript.mas, classes => [ 'jquery', 'jquery.dataTables' ] &>
   9 <& /util/import_css.mas, paths => ['/documents/inc/datatables/jquery.dataTables.css'] &>
  10
  11 <div class="modal fade" id="add_transformation_identifier_dialog" tabindex="-1" role="dialog" aria-labelledby="addTransformationIdentifierDialog">
  12     <div class="modal-dialog modal-xl" role="document">
  13         <div class="modal-content ui-front">
  14             <div class="modal-header text-center">
  15                 <button type="reset" class="close" id="add_transformation_id_dismiss_button_1" name="add_transformation_id_dismiss_button" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  16                 <h4 class="modal-title" id="addTransformationIdentifierDialog">Add New Transformation ID</h4>
  17             </div>
  18             <div class="modal-body" id="add_new_transformation_identifier_body">
  19                 <div class="container-fluid">
  20                     <form class="form-horizontal" role="form" method="post" enctype="multipart/form-data" encoding="multipart/form-data">
  21                         <div class="form-group">
  22                             <label class="col-sm-4 control-label" >Transformation ID: </label>
  23                             <div class="col-sm-7">
  24                                 <input class="form-control" type="text" id="new_transformation_identifier_name" name="new_transformation_identifier_name"  />
  25                             </div>
  26                         </div>
  27 % if ($default_plant_material_name) {
  28                         <div class="form-group">
  29                             <label class="col-sm-4 control-label" >Plant Material (accession name): </label>
  30                             <div class="col-sm-7">
  31                                 <input class="form-control" name="plant_material" id="plant_material" disabled value="<% $default_plant_material_name %>">
  32                             </div>
  33                         </div>
  34 % } else {
  35                         <div class="form-group">
  36                             <label class="col-sm-4 control-label" >Plant Material (accession name): </label>
  37                                 <div class="col-sm-7">
  38                                     <input class="form-control" type="text" id="plant_material" name="plant_material"  />
  39                                 </div>
  40                         </div>
  41 % }
  42                         <div class="form-group">
  43                             <label class="col-sm-4 control-label" >Vector Construct: </label>
  44                                 <div class="col-sm-7">
  45                                     <input class="form-control" type="text" id="vector_construct" name="vector_construct"  />
  46                                 </div>
  47                         </div>
  48                         <div class="form-group">
  49                             <label class="col-sm-4 control-label" >Notes: </label>
  50                                 <div class="col-sm-7">
  51                                     <div class="input-group">
  52                                         <textarea class="form-control" id="transformation_notes" ></textarea>
  53                                     </div>
  54                                 </div>
  55                         </div>
  56                     </form>
  57                 </div>
  58             </div>
  59             <div class="modal-footer">
  60                 <button id="add_transformation_id_dismiss_button_2" name="add_transformation_id_dismiss_button" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  61                 <button type="button" class="btn btn-primary" id="new_transformation_identifier_submit">Submit</button>
  62             </div>
  63         </div>
  64     </div>
  65 </div>
  66
  67 <div class="modal fade" id="transformation_id_saved_dialog_message" name="transformation_id_saved_dialog_message" tabindex="-1" role="dialog" aria-labelledby="transformationIDSavedDialog">
  68     <div class="modal-dialog" role="document">
  69         <div class="modal-content">
  70             <div class="modal-header">
  71                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  72                 <h4 class="modal-title" id="transformationIDSavedDialog">Success</h4>
  73             </div>
  74             <div class="modal-body">
  75                 <div class="container-fluid">
  76                     <p>
  77                         <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
  78                         The transformation ID was saved successfully.
  79                     </p>
  80                 </div>
  81             </div>
  82             <div class="modal-footer">
  83                 <button id="dismiss_transformation_id_saved_dialog" type="button" class="btn btn-default" data-dismiss="modal">Close & Reload</button>
  84             </div>
  85         </div>
  86     </div>
  87 </div>
  88
  89
  90 <script>
  91
  92 jQuery(document).ready(function(){
  93
  94     var transformation_project_id = "<%$trial_id%>";
  95     var program_name = "<%$breeding_program_name%>";
  96     var default_plant_material_name = "<%$default_plant_material_name%>";
  97
  98     jQuery("#plant_material").autocomplete({
  99         source: '/ajax/stock/only_accession_autocomplete',
 100     });
 101
 102     jQuery("#vector_construct").autocomplete({
 103         source: '/ajax/stock/vector_construct_autocomplete',
 104     });
 105
 106     jQuery('#new_transformation_identifier_submit').click(function() {
 107         var transformation_identifier = jQuery("#new_transformation_identifier_name").val();
 108         if (!transformation_identifier) {
 109             alert("Transformation ID is required");
 110             return;
 111         }
 112
 113         var plant_material = jQuery("#plant_material").val();
 114         if (!plant_material) {
 115             alert("Plant material is required");
 116             return;
 117         }
 118
 119         var vector_construct = jQuery("#vector_construct").val();
 120         if (!vector_construct) {
 121             alert ("Vector construct is required");
 122             return;
 123         }
 124
 125         var notes = jQuery("#transformation_notes").val();
 126
 127         jQuery.ajax({
 128             url: '/ajax/transformation/add_transformation_identifier',
 129             dataType: "json",
 130             type: 'POST',
 131             data:{
 132                 'transformation_identifier': transformation_identifier,
 133                 'plant_material': plant_material,
 134                 'vector_construct': vector_construct,
 135                 'notes': notes,
 136                 'transformation_project_id': transformation_project_id,
 137                 'program_name': program_name
 138             },
 139             beforeSend: function(response){
 140                 jQuery('#working_modal').modal('show');
 141             },
 142             success: function(response) {
 143                 jQuery('#working_modal').modal('hide');
 144                 if (response.success == 1) {
 145                     jQuery('#add_transformation_identifier_dialog').modal('hide');
 146                     jQuery('#transformation_id_saved_dialog_message').modal("show");
 147
 148                 }
 149                 if (response.error) {
 150                     alert(response.error);
 151                 }
 152             },
 153             error: function(response){
 154                 jQuery('#working_modal').modal('hide');
 155                 alert('An error occurred creating transformation ID');
 156             }
 157         });
 158
 159     });
 160
 161     jQuery("[name='add_transformation_id_dismiss_button']").click(function() {
 162         jQuery('#add_transformation_identifier_dialog').modal('hide');
 163         jQuery('#new_transformation_identifier_name').val('');
 164
 165         if (!default_plant_material_name) {
 166             jQuery('#plant_material').val('');
 167         }
 168
 169         jQuery('#vector_construct').val('');
 170         jQuery('#transformation_notes').val('');
 171     });
 172
 173     jQuery("#dismiss_transformation_id_saved_dialog").click(function(){
 174         jQuery('#new_transformation_identifier_name').val('');
 175
 176         if (!default_plant_material_name) {
 177             jQuery('#plant_material').val('');
 178         }
 179
 180         jQuery('#vector_construct').val('');
 181         jQuery('#transformation_notes').val('');
 182         location.reload();
 183     });
 184
 185 });
 186
 187
 188 </script>