2 /* This include is just a HTML and JS *fragment* it CANNOT stand alone
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
9 * REQUIRED to make work:
11 * - form element with the class '.addtolist'
12 * - be used in a file that already includes globals.php
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">
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'); ?>'>
32 <script language="javascript">
34 // collect the custom state widget flag
35 var stateCustomFlag = "<?php echo $GLOBALS['state_custom_addlist_widget']; ?>"
37 // generic form for input box
38 var generic = "<input type='textbox' name='newlistitem_value' id='newlistitem_value' size='20' maxlength='50'>"
40 // state form for input box
42 <ul style='list-style-type:none; margin:0; padding:0;'>\
43 <li style='font-weight:bold; font-size:120%; text-align:center;'><?php xl('Enter new State','e'); ?></li>\
44 <li style='margin:0.5em 0 0 0; padding:0;'><?php xl('Full Name', 'e', '', ': '); ?>\
45 <input type='textbox' name='newlistitem_value' id='newlistitem_value' size='20' maxlength='50'><li>\
46 <li style='margin:0.5em 0 0 0; padding:0;'><?php xl('Abbreviation', 'e', '', ': '); ?>\
47 <input type='textbox' name='newlistitem_abbr' id='newlistitem_abbr' size='10' maxlength='50'><li>\
51 // jQuery makes life easier (sometimes)
53 $(document).ready(function(){
55 /********************************************************/
56 /************ List-box modification functions ***********/
57 /********************************************************/
59 $("#newlistitem").keypress(function(evt) { if (evt.keyCode == 13) { SaveNewListItem(this, evt); return false; }});
60 $(".addtolist").click(function(evt) { AddToList(this, evt); });
61 $("#newlistitem_submit").click(function(evt) { SaveNewListItem(this, evt); });
62 $("#newlistitem_cancel").click(function(evt) { CancelAddToList(this, evt); });
64 // display the 'new list item' DIV at the mouse position
65 var AddToList = function(btnObj, e) {
66 // capture the ID of the list and specific field being modified from the object's ID
67 $('#newlistitem_listid').val($(btnObj).attr("id").replace(/^addtolistid_/g, ""));
68 $('#newlistitem_fieldid').val($(btnObj).attr("fieldid"));
70 // REMOVE previous form
71 $("#specificForm").empty();
73 // INSERT the selected form
74 if (($("#newlistitem_listid").val() == "state") && (stateCustomFlag)) {
75 // insert state form and clear values
76 $("#specificForm").append(state);
77 $('#newlistitem_value').val("");
78 $('#newlistitem_abbr').val("");
81 // insert generic form and clear values
82 $("#specificForm").append(generic);
83 $('#newlistitem_value').val("");
86 // make the item visible before setting its x,y location
87 $('#newlistitem').css('display', 'inline');
88 //getting height and width of the message box
89 var height = $('#newlistitem').height();
90 var width = $('#newlistitem').width();
91 //calculating offset for displaying popup message
92 leftVal=e.pageX-(width/2)+"px";
93 topVal=e.pageY-(height/2)+"px";
94 //show the DIV and set cursor focus
95 $('#newlistitem').css({left:leftVal,top:topVal}).show();
96 $('#newlistitem_value').focus();
99 // hide the add-to-list DIV and clear its textbox
100 var CancelAddToList = function(btnObj, e) {
101 $('#newlistitem').hide();
104 // save the new list item to the given list
105 var SaveNewListItem = function(btnObj, e) {
106 // VALIDATE the selected form
107 // Don't allow a number as first character
108 // Don't allow illegal characters (' and " for now) - still developing
109 // First, validate fields common to all forms
110 if ($("#newlistitem_value").val().match(/^\d/)) {
111 alert("<?php xl('List items can not start with a number.','e'); ?>");
112 $("#newlistitem_value").focus();
115 if ($("#newlistitem_value").val().match(/[\'\"]/)) {
116 alert("<?php xl('List items contains illegal character(s).','e'); ?>");
117 $("#newlistitem_value").focus();
120 // Second, validate form specific fields
121 if (($("#newlistitem_listid").val() == "state") && (stateCustomFlag)) {
122 // state forms specific validation
123 if ($("#newlistitem_abbr").val().match(/^\d/)) {
124 alert("<?php xl('List items can not start with a number.','e'); ?>");
125 $("#newlistitem_abbr").focus();
128 if ($("#newlistitem_abbr").val().match(/[\'\"]/)) {
129 alert("<?php xl('List items contains illegal character(s).','e'); ?>");
130 $("#newlistitem_abbr").focus();
135 // PROCESS the selected form
136 if (($("#newlistitem_listid").val() == "state") && (stateCustomFlag)) {
137 // process state form
138 // (note we have collected a title and abbreviation)
139 var listid = $("#newlistitem_listid").val();
140 var newitem = $('#newlistitem_value').val();
141 var newitem_abbr = $('#newlistitem_abbr').val();
145 // process generic form
146 // (note we have only collected the title, so will make
147 // abbreviation same as title)
148 var listid = $("#newlistitem_listid").val();
149 var newitem = $('#newlistitem_value').val();
150 var newitem_abbr = $('#newlistitem_value').val();
153 // make the AJAX call to save the new value to the specified list
154 // upon returning successfully, refresh the list box and select
156 $.getJSON("<?php echo $GLOBALS['webroot']; ?>/library/ajax/addlistitem.php",
159 newitem_abbr: newitem_abbr},
160 function(jsondata, txtresponse) {
161 //process each widget with the same list
162 $("select.addtolistclass_"+listid).each(function(){
163 var pointer = $(this);
164 var currentselected = pointer.val();
165 var listboxfield = pointer.attr("id");
166 var listbox = document.getElementById(listboxfield);
167 while (listbox.options.length > 0) { listbox.options[0] = null; }
168 $.each(jsondata.options, function () {
169 if (listboxfield == $('#newlistitem_fieldid').val()) {
170 // build select for the chosen widget field
171 listbox.options[listbox.options.length] = new Option(this.title, this.id);
172 if (this.id == newitem_abbr) {
173 pointer.val(this.id);
177 // build select for the other widgets using the same list
178 listbox.options[listbox.options.length] = new Option(this.title, this.id);
179 if (this.id == currentselected) {
180 pointer.val(currentselected);
187 $('#newlistitem').hide();
191 } // end SaveNewListItem
193 }); // end jQuery .ready