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
  97     jQuery("#plant_material").autocomplete({
  98         source: '/ajax/stock/only_accession_autocomplete',
  99     });
 100
 101     jQuery("#vector_construct").autocomplete({
 102         source: '/ajax/stock/vector_construct_autocomplete',
 103     });
 104
 105     jQuery('#new_transformation_identifier_submit').click(function() {
 106         var transformation_identifier = jQuery("#new_transformation_identifier_name").val();
 107         if (!transformation_identifier) {
 108             alert("Transformation ID is required");
 109             return;
 110         }
 111
 112         var plant_material = jQuery("#plant_material").val();
 113         if (!plant_material) {
 114             alert("Plant material is required");
 115             return;
 116         }
 117
 118         var vector_construct = jQuery("#vector_construct").val();
 119         if (!vector_construct) {
 120             alert ("Vector construct is required");
 121             return;
 122         }
 123
 124         var notes = jQuery("#transformation_notes").val();
 125
 126         jQuery.ajax({
 127             url: '/ajax/transformation/add_transformation_identifier',
 128             dataType: "json",
 129             type: 'POST',
 130             data:{
 131                 'transformation_identifier': transformation_identifier,
 132                 'plant_material': plant_material,
 133                 'vector_construct': vector_construct,
 134                 'notes': notes,
 135                 'transformation_project_id': transformation_project_id,
 136                 'program_name': program_name
 137             },
 138             beforeSend: function(response){
 139                 jQuery('#working_modal').modal('show');
 140             },
 141             success: function(response) {
 142                 jQuery('#working_modal').modal('hide');
 143                 if (response.success == 1) {
 144                     jQuery('#add_transformation_identifier_dialog').modal('hide');
 145                     jQuery('#transformation_id_saved_dialog_message').modal("show");
 146
 147                 }
 148                 if (response.error) {
 149                     alert(response.error);
 150                 }
 151             },
 152             error: function(response){
 153                 jQuery('#working_modal').modal('hide');
 154                 alert('An error occurred creating transformation ID');
 155             }
 156         });
 157
 158     });
 159
 160     jQuery("[name='add_transformation_id_dismiss_button']").click(function() {
 161         jQuery('#add_transformation_identifier_dialog').modal('hide');
 162         jQuery('#new_transformation_identifier_name').val('');
 163         jQuery('#plant_material').val('');
 164         jQuery('#vector_construct').val('');
 165         jQuery('#transformation_notes').val('');
 166     });
 167
 168     jQuery("#dismiss_transformation_id_saved_dialog").click(function(){
 169         jQuery('#new_transformation_identifier_name').val('');
 170         jQuery('#plant_material').val('');
 171         jQuery('#vector_construct').val('');
 172         jQuery('#transformation_notes').val('');
 173         location.reload();
 174     });
 175
 176 });
 177
 178
 179 </script>