(function ($) {
$.fn.mhsChapterDirectory = function (opts) {
var defaults = {
url: "demo.myhonorsociety.com",
ssl: true,
title: "{institution} ({name})"
}
var opts = $.extend(defaults, opts);
return this.each(function () {
var obj = $(this);
obj.html(
"<table>" +
"<tbody class='state-select'><tr><td align='right'><b>State:</b></td><td><select autocomplete='off'></select><div class='state-select-error' style='display: none'><i style='color: #800'>Failed to load states.</i> <a class='retry' href='#'>Retry</a> | <a class='error-details' href='#'>Details...</a><div class='state-select-error-details' style='display: none'></div></div></td></tr></tbody>" +
"<tbody class='chapter-select' style='display: none'><tr><td align='right'><b>Chapter:</b></td><td><select autocomplete='off'></select><div class='chapter-select-error' style='display: none'><i style='color: #800'>Failed to load chapters.</i> <a class='retry' href='#'>Retry</a> | <a class='error-details' href='#'>Details...</a><div class='chapter-select-error-details' style='display: none'></div></div></td></tr></tbody>" +
"</table>" +
"<div class='details'></div><div class='details-error' style='display: none'><i style='color: #800'>Failed to load chapter details.</i> <a class='retry' href='#'>Retry</a> | <a class='error-details' href='#'>Details...</a><div class='details-error-details' style='display: none'></div></div>");
var stateSelect = $("tbody.state-select tr td:eq(1) select:first", obj);
var chapterTbody = $("tbody.chapter-select", obj);
var chapterSelect = $("tbody.chapter-select tr td:eq(1) select:first", obj);
var detailsDiv = $("div.details", obj);
var stateErrorDiv = $("tbody.state-select div.state-select-error", obj);
var chapterErrorDiv = $("tbody.chapter-select div.chapter-select-error", obj);
var detailsErrorDiv = $("div.details-error", obj);
var stateErrorDetailsDiv = $("div.state-select-error-details", stateErrorDiv);
var chapterErrorDetailsDiv = $("div.chapter-select-error-details", chapterErrorDiv);
var detailsErrorDetailsDiv = $("div.details-error-details", detailsErrorDiv);
var stateRetryLink = $("a.retry", stateErrorDiv);
var stateErrorDetailsLink = $("a.error-details", stateErrorDiv);
var chapterRetryLink = $("a.retry", chapterErrorDiv);
var chapterErrorDetailsLink = $("a.error-details", chapterErrorDiv);
var detailsRetryLink = $("a.retry", detailsErrorDiv);
var detailsErrorDetailsLink = $("a.error-details", detailsErrorDiv);
//populate states select box
var loadStates = function () {
stateErrorDiv.hide();
stateErrorDetailsDiv.hide();
chapterTbody.hide();
detailsDiv.hide();
stateSelect.html("<option value=''>Loading states...</option>").attr("disabled", "disabled");
$.ajax({
url: "http" + ((opts.ssl) ? "s" : "") + "://" + opts.url + "/api.cfm/states",
type: "GET",
dataType: "jsonp",
success: function (r) {
stateSelect.removeAttr("disabled").html('<option value="">--- Select a State ---</option>');
for (var i in r) {
stateSelect.append('<option value="' + r[i].abbr + '">' + r[i].abbr + ' - ' + r[i].name + '</option>');
}
},
error: function (xhr, statusText, errorThrown) {
stateErrorDiv.show();
var xhrString = "(unavailable)";
try {
xhrString = JSON.stringify(xhr);
} catch (e) {};
stateErrorDetailsDiv.html("<b>Status:</b> " + statusText + "<br/><b>ErrorThrown:</b> " + errorThrown + "<br/><b>XHR:</b> " + xhrString);
}
});
}
loadStates();
//change handler for state select box
stateSelect.change(function () {
chapterErrorDiv.hide();
chapterErrorDetailsDiv.hide();
detailsDiv.hide();
chapterSelect.html("<option value=''>Loading chapters...</option>").attr("disabled", "disabled");
if (stateSelect.val() == "") {
chapterTbody.hide();
} else {
$.ajax({
url: "http" + ((opts.ssl) ? "s" : "") + "://" + opts.url + "/api.cfm/chapters?state=" + stateSelect.val(),
type: "GET",
dataType: "jsonp",
success: function (r) {
chapterSelect.removeAttr("disabled").html('<option value="">--- Select a Chapter ---</option>');
for (var i in r) {
var title = opts.title;
for (var j in r[i]) {
var regex = new RegExp("\\{" + j + "\\}", "g");
title = title.replace(regex, r[i][j]);
}
chapterSelect.append('<option value="' + r[i].id + '">' + title + '</option>');
}
},
error: function (xhr, statusText, errorThrown) {
chapterErrorDiv.show();
var xhrString = "(unavailable)";
try {
xhrString = JSON.stringify(xhr);
} catch (e) {};
chapterErrorDetailsDiv.html("<b>Status:</b> " + statusText + "<br/><b>ErrorThrown:</b> " + errorThrown + "<br/><b>XHR:</b> " + xhrString);
}
});
chapterTbody.show();
}
});
//change handler for chapter select box
chapterSelect.change(function () {
detailsErrorDiv.hide();
detailsErrorDetailsDiv.hide();
detailsDiv.html("Loading...");
if (chapterSelect.val() == "") {
detailsDiv.hide();
} else {
$.ajax({
url: "http" + ((opts.ssl) ? "s" : "") + "://" + opts.url + "/api.cfm/chapters/" + chapterSelect.val(),
type: "GET",
dataType: "jsonp",
success: function (r) {
var title = opts.title;
for (var i in r) {
var regex = new RegExp("\\{" + i + "\\}", "g");
title = title.replace(regex, r[i]);
}
var html = "<h2>" + title + "</h2>";
for (var i in r.addresses) {
if (r.addresses[i].isPrimary) {
if (r.addresses[i].country == "USA") {
html += r.addresses[i].address.replace(/\n\r?/g, "<br/>") + "<br/>" + r.addresses[i].city + ", " + r.addresses[i].locality + " " + r.addresses[i].postalCode + "<br/>" + r.addresses[i].country;
} else {
html += r.addresses[i].address.replace(/\n\r?/g, "<br/>") + "<br/>" + r.addresses[i].country;
}
break;
}
}
for (var i in r.phoneNumbers) {
if (r.phoneNumbers[i].isPrimary) {
html += "<br/><b>" + r.phoneNumbers[i].phoneType + ":</b> " + r.phoneNumbers[i].phoneNumber;
break;
}
}
for (var i in r.phoneNumbers) {
if (!r.phoneNumbers[i].isPrimary) {
html += "<br/><b>" + r.phoneNumbers[i].phoneType + ":</b> " + r.phoneNumbers[i].phoneNumber;
}
}
if (r.chapterWebsite) html += "<br/><b>Chapter Website:</b> <a href='" + r.chapterWebsite + "' target='_blank'>" + r.chapterWebsite + "</a>";
if (r.institutionWebsite) html += "<br/><b>" + r.institution + " Website:</b> <a href='" + r.institutionWebsite + "' target='_blank'>" + r.institutionWebsite + "</a>";
html += "<br/>";
for (var i in r.addresses) {
if (!r.addresses[i].isPrimary) {
html += "<p><b>" + r.addresses[i].addressType + " Address</b>";
if (r.addresses[i].country == "USA") {
html += r.addresses[i].address.replace(/\n\r?/g, "<br/>") + "<br/>" + r.addresses[i].city + ", " + r.addresses[i].locality + " " + r.addresses[i].postalCode + "<br/>" + r.addresses[i].country;
} else {
html += r.addresses[i].address.replace(/\n\r?/g, "<br/>") + "<br/>" + r.addresses[i].country;
}
html += "</p>";
}
}
html += "<h3>Sponsors</h3>";
for (var i in r.sponsors) {
if (r.sponsors[i].id == r.primarySponsorID) {
html += "<p><b>" + r.sponsors[i].firstName + " " + r.sponsors[i].lastName + "</b>";
if (r.sponsors[i].position) html += "<br/>" + r.sponsors[i].position;
if (r.sponsors[i].department) html += "<br/>" + r.sponsors[i].department;
html += "<br/><a href='mailto:" + r.sponsors[i].email + "'>" + r.sponsors[i].email + "</a>";
if (r.sponsors[i].phoneNumber) html += "<br/>" + r.sponsors[i].phoneNumber;
html += "</p>";
}
}
detailsDiv.html(html);
},
error: function (xhr, statusText, errorThrown) {
detailsErrorDiv.show();
var xhrString = "(unavailable)";
try {
xhrString = JSON.stringify(xhr);
} catch (e) {};
detailsErrorDetailsDiv.html("<b>Status:</b> " + statusText + "<br/><b>ErrorThrown:</b> " + errorThrown + "<br/><b>XHR:</b> " + xhrString);
}
});
detailsDiv.show();
}
});
//link hooks
stateRetryLink.click(function () {
loadStates();
});
stateErrorDetailsLink.click(function () {
stateErrorDetailsDiv.toggle();
});
chapterRetryLink.click(function () {
stateSelect.change();
});
chapterErrorDetailsLink.click(function () {
chapterErrorDetailsDiv.toggle();
});
detailsRetryLink.click(function () {
chapterSelect.change();
});
detailsErrorDetailsLink.click(function () {
detailsErrorDetailsDiv.toggle();
});
});
};
})(jQuery);
$(function () {
$("#directory").mhsChapterDirectory({
url: "ald.myhonorsociety.com",
title: "{institution}"
});
});
<h2>Alpha Lambda Delta: Chapter Directory</h2>
<div id="directory"></div>