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 <!-- hidden DIV used for creating new list items -->
  17 <div id="newlistitem" class="body_top" style="border: 2px outset #666; display:none; position:absolute; padding:5px; ">
  18 <form id="newlistitem_form" action="" style="margin:0px; padding:5px; display:inline;">
  19 <input type="hidden" name="newlistitem_listid" id="newlistitem_listid" value="">
  20 <input type="textbox" name="newlistitem_value" id="newlistitem_value" size="25" maxlength="50">
  21 <input type="button" name="newlistitem_submit" id="newlistitem_submit" value="Add">
  22 <input type="button" name="newlistitem_cancel" id="newlistitem_cancel" value="Cancel">
  23 </form>
  24 </div>
  25
  26 <script language="javascript">
  27
  28 // jQuery makes life easier (sometimes)
  29
  30 $(document).ready(function(){
  31
  32     /********************************************************/
  33     /************ List-box modification functions ***********/
  34     /********************************************************/
  35
  36     $("#newlistitem_form").keypress(function(evt) { if (evt.keyCode == 13) { SaveNewListItem(this, evt); return false; }});
  37     $(".addtolist").click(function(evt) { AddToList(this, evt); });
  38     $("#newlistitem_submit").click(function(evt) { SaveNewListItem(this, evt); });
  39     $("#newlistitem_cancel").click(function(evt) { CancelAddToList(this, evt); });
  40
  41     // display the 'new list item' DIV at the mouse position
  42     var AddToList = function(btnObj, e) {
  43         // make the item visible before setting its x,y location
  44         $('#newlistitem').css('display', 'inline');
  45         $('#newlistitem_value').val("");
  46         //getting height and width of the message box
  47         var height = $('#newlistitem').height();
  48         var width = $('#newlistitem').width();
  49         //calculating offset for displaying popup message
  50         leftVal=e.pageX-(width/2)+"px";
  51         topVal=e.pageY-(height/2)+"px";
  52         //show the DIV and set cursor focus
  53         $('#newlistitem').css({left:leftVal,top:topVal}).show();
  54         $('#newlistitem_value').focus();
  55         // capture the ID of the list being modified from the object's ID
  56         $('#newlistitem_listid').val($(btnObj).attr("id").replace(/^addtolistid_/g, ""));
  57     };
  58
  59     // hide the add-to-list DIV and clear its textbox
  60     var CancelAddToList = function(btnObj, e) {
  61         $('#newlistitem').hide();
  62     }
  63
  64     // save the new list item to the given list
  65     var SaveNewListItem = function(btnObj, e) {
  66         // the group name field can only have letters, numbers, spaces and underscores
  67         // AND it cannot start with a number
  68         if ($("#newlistitem_value").val().match(/\W/)) {
  69             alert("List items can only contain letters, numbers, and spaces.");
  70             $("#newlistitem_value").focus();
  71             return false;
  72         }
  73
  74         // make the AJAX call to save the new value to the specified list
  75         // upon returning successfully, refresh the list box and select
  76         // the new list item
  77         $.getJSON("<?php echo $GLOBALS['webroot']; ?>/library/ajax/addlistitem.php",
  78                     {listid: $("#newlistitem_listid").val(), newitem: $('#newlistitem_value').val()},
  79                     function(jsondata, txtresponse) {
  80                         var listboxname = ($('#addtolistid_'+$("#newlistitem_listid").val()).attr("fieldid"));
  81                         var listbox = document.getElementById(listboxname);
  82                         while (listbox.options.length > 0) { listbox.options[0] = null; }
  83
  84                         $.each(jsondata.options, function () {
  85                             listbox.options[listbox.options.length] = new Option(this.title, this.id);
  86                             if (this.title == $("#newlistitem_value").val()) {
  87                                 listbox.selectedIndex = (listbox.options.length-1);
  88                             }
  89                         });
  90
  91                         // now hide the DIV
  92                         $('#newlistitem').hide();
  93                     }
  94                 );
  95
  96     }  // end SaveNewListItem
  97
  98 }); // end jQuery .ready
  99 </script>
 100