library/options_listadd.inc

   1 <?php
   2 /* This include is just a HTML and JS *fragment* it CANNOT stand alone
   3  *
   4  * This file is used to include the capability to have a pop-up DIV in which
   5  * a user can add a new option to a list box. Primarily this is for the
   6  * demographics, history, and referral screens. This code could be used elsewhere
   7  * as long as it had the required supporting HTML and JS
   8  *
   9  * REQUIRED to make work:
  10  *  - jQuery
  11  *  - form element with the class '.addtolist'
  12  *  - be used in a file that already includes globals.php
  13  */
  14 ?>
  15
  16
  17 <!-- hidden DIV used for creating new list items -->
  18 <div id="newlistitem" class="body_top" style="border: 2px outset #666; display:none; position:absolute; padding:5px; ">
  19  <input type="hidden" name="newlistitem_listid" id="newlistitem_listid" value="">
  20  <input type="hidden" name="newlistitem_fieldid" id="newlistitem_fieldid" value="">
  21  <div id="specificForm">
  22  </div>
  23  <div style = 'text-align:center;'>
  24   <div style='margin:0.5em 0 0 0;'>
  25    <input type='button' name='newlistitem_submit' id='newlistitem_submit' value='<?php xl('Add', 'e'); ?>'>
  26    <input type='button' name='newlistitem_cancel' id='newlistitem_cancel' value='<?php xl('Cancel', 'e'); ?>'>
  27   </div>
  28  </div>
  29 </div>
  30
  31
  32 <script language="javascript">
  33
  34     // collect the custom state widget flag
  35     var stateCustomFlag = "<?php echo $GLOBALS['state_custom_addlist_widget']; ?>"
  36
  37     // generic form for input box
  38     var generic = "<input type='textbox' name='newlistitem_value' id='newlistitem_value' size='20' maxlength='50'>"
  39
  40     // state form for input box
  41     var state   = "\
  42 <ul style='list-style-type:none; margin:0; padding:0;'>\
  43  <li style='font-weight:bold; font-size:120%; text-align:center;'>\
  44     <?php echo htmlspecialchars(xl('Enter new State'), ENT_NOQUOTES); ?></li>\
  45  <li style='margin:0.5em 0 0 0; padding:0;'>\
  46     <?php echo htmlspecialchars(xl('Full Name', '', '', ':'), ENT_NOQUOTES); ?>\
  47   <input type='textbox' name='newlistitem_value' id='newlistitem_value' size='20' maxlength='50'><li>\
  48  <li style='margin:0.5em 0 0 0; padding:0;'>\
  49     <?php echo htmlspecialchars(xl('Abbreviation', '', '', ':'), ENT_NOQUOTES); ?>\
  50   <input type='textbox' name='newlistitem_abbr' id='newlistitem_abbr' size='10' maxlength='50'><li>\
  51 </ul>\
  52 "
  53
  54 // jQuery makes life easier (sometimes)
  55
  56 $(document).ready(function(){
  57
  58     /********************************************************/
  59     /************ List-box modification functions ***********/
  60     /********************************************************/
  61
  62     $("#newlistitem").keypress(function(evt) { if (evt.keyCode == 13) { SaveNewListItem(this, evt); return false; }});
  63     $(".addtolist").click(function(evt) { AddToList(this, evt); });
  64     $("#newlistitem_submit").click(function(evt) { SaveNewListItem(this, evt); });
  65     $("#newlistitem_cancel").click(function(evt) { CancelAddToList(this, evt); });
  66
  67     // display the 'new list item' DIV at the mouse position
  68     var AddToList = function(btnObj, e) {
  69         // capture the ID of the list and specific field being modified from the object's ID
  70         $('#newlistitem_listid').val($(btnObj).attr("id").replace(/^addtolistid_/g, ""));
  71         $('#newlistitem_fieldid').val($(btnObj).attr("fieldid"));
  72
  73         // REMOVE previous form
  74     $("#specificForm").empty();
  75
  76     // INSERT the selected form
  77     if (($("#newlistitem_listid").val() == "state") && (stateCustomFlag)) {
  78      // insert state form and clear values
  79          $("#specificForm").append(state);
  80      $('#newlistitem_value').val("");
  81      $('#newlistitem_abbr').val("");
  82     }
  83     else {
  84      // insert generic form and clear values
  85      $("#specificForm").append(generic);
  86      $('#newlistitem_value').val("");
  87         }
  88
  89         // make the item visible before setting its x,y location
  90         $('#newlistitem').css('display', 'inline');
  91         //getting height and width of the message box
  92         var height = $('#newlistitem').height();
  93         var width = $('#newlistitem').width();
  94         //calculating offset for displaying popup message
  95         leftVal=e.pageX-(width/2)+"px";
  96         topVal=e.pageY-(height/2)+"px";
  97         //show the DIV and set cursor focus
  98         $('#newlistitem').css({left:leftVal,top:topVal}).show();
  99         $('#newlistitem_value').focus();
 100     };
 101
 102     // hide the add-to-list DIV and clear its textbox
 103     var CancelAddToList = function(btnObj, e) {
 104         $('#newlistitem').hide();
 105     }
 106
 107     // save the new list item to the given list
 108     var SaveNewListItem = function(btnObj, e) {
 109     // VALIDATE the selected form
 110         //  Don't allow a number as first character
 111         //  Don't allow illegal characters (' and " for now) - still developing
 112     //   First, validate fields common to all forms
 113         if ($("#newlistitem_value").val().match(/^\d/)) {
 114             alert("<?php echo htmlspecialchars(xl('List items can not start with a number.'), ENT_QUOTES); ?>");
 115             $("#newlistitem_value").focus();
 116             return false;
 117         }
 118         if ($("#newlistitem_value").val().match(/[\'\"]/)) {
 119             alert("<?php echo htmlspecialchars(xl('List items contains illegal character(s).'), ENT_QUOTES); ?>");
 120             $("#newlistitem_value").focus();
 121             return false;
 122         }
 123     //  Second, validate form specific fields
 124         if (($("#newlistitem_listid").val() == "state") && (stateCustomFlag)) {
 125             // state forms specific validation
 126             if ($("#newlistitem_abbr").val().match(/^\d/)) {
 127                 alert("<?php echo htmlspecialchars(xl('List items can not start with a number.'), ENT_QUOTES); ?>");
 128                 $("#newlistitem_abbr").focus();
 129                 return false;
 130             }
 131             if ($("#newlistitem_abbr").val().match(/[\'\"]/)) {
 132                 alert("<?php echo htmlspecialchars(xl('List items contains illegal character(s).'), ENT_QUOTES); ?>");
 133                 $("#newlistitem_abbr").focus();
 134                 return false;
 135             }
 136         }
 137
 138         // PROCESS the selected form
 139         if (($("#newlistitem_listid").val() == "state") && (stateCustomFlag)) {
 140         // process state form
 141         //  (note we have collected a title and abbreviation)
 142         var listid = $("#newlistitem_listid").val();
 143         var newitem = $('#newlistitem_value').val();
 144         var newitem_abbr = $('#newlistitem_abbr').val();
 145
 146     }
 147     else {
 148         // process generic form
 149         //  (note we have only collected the title, so will make
 150         //   abbreviation same as title)
 151         var listid = $("#newlistitem_listid").val();
 152         var newitem = $('#newlistitem_value').val();
 153         var newitem_abbr = $('#newlistitem_value').val();
 154     }
 155
 156         // make the AJAX call to save the new value to the specified list
 157         // upon returning successfully, refresh the list box and select
 158         // the new list item
 159         $.getJSON("<?php echo $GLOBALS['webroot']; ?>/library/ajax/addlistitem.php",
 160                     {csrf_token_form: "<?php echo attr($_SESSION['csrf_token']); ?>",
 161                     listid: listid,
 162              newitem: newitem,
 163              newitem_abbr: newitem_abbr},
 164                     function(jsondata, txtresponse) {
 165                  if( jsondata.error == '' ){
 166               //process each widget with the same list
 167             $("select.addtolistclass_"+listid).each(function(){
 168                 var pointer = $(this);
 169                 var currentselected = pointer.val();
 170                 var listboxfield = pointer.attr("id");
 171                 var listbox = document.getElementById(listboxfield);
 172                             while (listbox.options.length > 0) { listbox.options[0] = null; }
 173                             $.each(jsondata.options, function () {
 174                     if (listboxfield == $('#newlistitem_fieldid').val()) {
 175                     // build select for the chosen widget field
 176                                     listbox.options[listbox.options.length] = new Option(this.title, this.id);
 177                                     if (this.id == newitem_abbr) {
 178                         pointer.val(this.id);
 179                                     }
 180                 }
 181                 else {
 182                     // build select for the other widgets using the same list
 183                     listbox.options[listbox.options.length] = new Option(this.title, this.id);
 184                     if (this.id == currentselected) {
 185                                         pointer.val(currentselected);
 186                     }
 187                 }
 188                             });
 189             });
 190
 191                         // now hide the DIV
 192                         $('#newlistitem').hide();
 193              }else{
 194
 195                  alert( jsondata.error );
 196              }
 197                     }
 198                 );
 199
 200     }  // end SaveNewListItem
 201
 202 }); // end jQuery .ready
 203 </script>
 204