+<%doc>
+Selector for DID phone number.
+
+Options:
+
+- prefix: prefix for all the object IDs, field names, javascript functions,
+etc. for including multiple DID selectors on a single page.
+
+- empty: text to display when no number is selected ("empty_label")
+
+- bulknum: allow bulk selection of up to this many numbers (self-service
+only? wtf?)
+
+- svcpart: svcpart (required)
+
+- tollfree: pass "tollfree" to misc/phonenums.cgi, instead of passing an
+exchange/region/anything else.
+
+- region: corresponds to the inverse of "get_dids_npa_select". The selector
+creates an on-change handler telling the previous selector in the hierarchy
+to update the list of phone numbers. If 'region' is true, it will look for
+a previous selector named "region", and prefix the query it sends to
+phonenums.cgi with '_REGION', which results in get_dids() being called
+with a 'region' parameter instead of 'ratecenter' and 'state'.
+
+
+Internally, this will set up an exchange_changed or region_changed function
+to refresh the phone number list. The function will fetch misc/phonenums.cgi,
+passing the exchange (or region) and
+</%doc>
+
<% include('/elements/xmlhttp.html',
'url' => $p.'misc/phonenums.cgi',
'subs' => [ $opt{'prefix'}. 'get_phonenums' ],
<SCRIPT TYPE="text/javascript">
- function opt(what,value,text) {
+ function jopt(what,value,text) {
var optionName = new Option(text, value, false, false);
- var length = what.length;
- what.options[length] = optionName;
+ what.append(optionName);
}
- function <% $opt{'prefix'} %>exchange_changed(what, callback) {
+ function <% $opt{'prefix'} %><% $previous %>_changed(what, callback) {
- what.form.<% $opt{'prefix'} %>phonenum.disabled = 'disabled';
- what.form.<% $opt{'prefix'} %>phonenum.style.display = 'none';
+ $('#<% $opt{'prefix'} %>phonenum').prop('disabled', true);
+ $('#<% $opt{'prefix'} %>phonenum').css('display', 'none');
var phonenumwait = document.getElementById('<% $opt{'prefix'} %>phonenumwait');
- phonenumwait.style.display = '';
+ phonenumwait.style.display = 'inline';
var phonenumerror = document.getElementById('<% $opt{'prefix'} %>phonenumerror');
phonenumerror.style.display = 'none';
- exchange = what.options[what.selectedIndex].value;
+ var thing = "<% $previous eq 'region' ? '_REGION ' : '' %>" + what.options[what.selectedIndex].value;
function <% $opt{'prefix'} %>update_phonenums(phonenums) {
+ var reply = JSON.parse(phonenums);
// blank the current phonenum
- for ( var i = what.form.<% $opt{'prefix'} %>phonenum.length; i >= 0; i-- )
- what.form.<% $opt{'prefix'} %>phonenum.options[i] = null;
+ $('#<% $opt{prefix} %>phonenum').empty();
% if ($opt{empty}) {
if ( what.form.<% $opt{'prefix'} %>phonenum.type != 'select-multiple' ){
- opt(what.form.<% $opt{'prefix'} %>phonenum, '', '<% $opt{empty} %>');
+ jopt($('#<% $opt{'prefix'} %>phonenum'), '', '<% $opt{empty} %>');
}
% }
// add the new phonenums
- var phonenumArray = eval('(' + phonenums + ')' );
+ var phonenumArray = reply.phonenums;
for ( var s = 0; s < phonenumArray.length; s++ ) {
var phonenumLabel = phonenumArray[s];
if ( phonenumLabel == "" )
phonenumLabel = '(n/a)';
- opt(what.form.<% $opt{'prefix'} %>phonenum, phonenumArray[s], phonenumLabel);
+ jopt($('#<% $opt{'prefix'} %>phonenum'), phonenumArray[s], phonenumLabel);
}
//var phonenumFormLabel = document.getElementById('<% $opt{'prefix'} %>phonenumlabel');
- what.form.<% $opt{'prefix'} %>phonenum.disabled = '';
+ $('#<% $opt{'prefix'} %>phonenum').prop('disabled', false);
phonenumwait.style.display = 'none';
if ( phonenumArray.length >= 1 ) {
- what.form.<% $opt{'prefix'} %>phonenum.disabled = '';
- what.form.<% $opt{'prefix'} %>phonenum.style.display = '';
+ $('#<% $opt{'prefix'} %>phonenum').prop('disabled', false);
+ $('#<% $opt{'prefix'} %>phonenum').css('display', '');
} else {
var phonenumerror = document.getElementById('<% $opt{'prefix'} %>phonenumerror');
- phonenumerror.style.display = '';
+ phonenumerror.style.display = 'inline';
+ if ( reply.error ) {
+ phonenumerror.textContent = reply.error;
+ } else {
+ phonenumerror.textContent = 'Select a different <% $opt{'region'} ? 'region' : 'city/exchange' %>';
+ }
}
//run the callback
}
// go get the new phonenums
- <% $opt{'prefix'} %>get_phonenums( exchange, <% $opt{'svcpart'} %>, <% $opt{'prefix'} %>update_phonenums );
+ <% $opt{'prefix'} %>get_phonenums( thing, <% $opt{'svcpart'} %>, <% $opt{'prefix'} %>update_phonenums );
}
what = document.getElementById('<% $opt{prefix} %>phonenum');
// blank the current phonenum
- for ( var i = what.form.<% $opt{'prefix'} %>phonenum.length; i >= 0; i-- )
- what.form.<% $opt{'prefix'} %>phonenum.options[i] = null;
+ $('#<% $opt{prefix} %>phonenum').empty();
% if ($opt{empty}) {
- opt(what.form.<% $opt{'prefix'} %>phonenum, '', '<% $opt{empty} %>');
+ jopt($('#<% $opt{'prefix'} %>phonenum'), '', '<% $opt{empty} %>');
% }
// add the new phonenums
var phonenumLabel = phonenumArray[s];
if ( phonenumLabel == "" )
phonenumLabel = '(n/a)';
- opt(what.form.<% $opt{'prefix'} %>phonenum, phonenumArray[s], phonenumLabel);
+ jopt($('#<% $opt{'prefix'} %>phonenum'), phonenumArray[s], phonenumLabel);
}
- what.form.<% $opt{'prefix'} %>phonenum.disabled = '';
+ $('#<% $opt{'prefix'} %>phonenum').prop('disabled', false);
if ( phonenumArray.length >= 1 ) {
- what.form.<% $opt{'prefix'} %>phonenum.disabled = '';
- what.form.<% $opt{'prefix'} %>phonenum.style.display = '';
+ $('#<% $opt{'prefix'} %>phonenum').prop('disabled', false);
+ $('#<% $opt{'prefix'} %>phonenum').css('display', '');
}
}
% unless ( $opt{'tollfree'} ) {
<DIV ID="phonenumwait" STYLE="display:none"><IMG SRC="<%$fsurl%>images/wait-orange.gif"> <B>Finding phone numbers</B></DIV>
-<DIV ID="phonenumerror" STYLE="display:none"><IMG SRC="<%$fsurl%>images/cross.png"> <B>Select a different city/exchange</B></DIV>
+<DIV ID="phonenumerror" STYLE="display:none; font-weight: bold"><IMG SRC="<%$fsurl%>images/cross.png"></DIV>
% }
<SELECT <% $opt{multiple} ? 'MULTIPLE SIZE=25' : '' %>
$opt{disabled} = 'disabled' unless exists $opt{disabled};
+my $previous = $opt{'region'} ? 'region' : 'exchange';
+
</%init>