function LinksManager() {
var hdnSelectedLinksSelector = "#" + "<%=hdnSelectedLinks.ClientID%>";
var tblLinksListSelector = "#tblLinks";
var delLinkSelector = ".delLink";
var modLinkSelector = ".modLink";
var addLinkSelector = "#addLinksLink";
var hdnLinkIdClassSelector = "input.linkId";
var modifyDialogSelector = "#linksDialog";
var linkNameSelector = "#linkName";
var linkUrlSelector = "#linkUrl";
var linksListItemClassSelector = ".linksListItem";
var linksListItemTemplateSelector = ".linksListItem-template";
var tdLinksListContainerSelector = "tdLinksListContainer";
var _currentLinkForModifyId;
var _linksStorage = [];
var _dialogValidationManager = new ValidationManager(undefined, "linksDialogErrorMessages");
_dialogValidationManager.forseOnChange = false;
var _linksValidationManager = new ValidationManager(undefined, globalValidationManager.getErrorMessageContainerSelector().substring(1));
new RequiredHiddenValidator(hdnSelectedLinksSelector, tdLinksListContainerSelector, undefined, _linksValidationManager);
function _initLinksStorage() {
var linksList = JSON.parse($(hdnSelectedLinksSelector).val());
if (linksList) {
for (var i = 0; i < linksList.length; i++) {
_linksStorage[linksList[i].Id] = linksList[i];
}
}
}
function getLinksStorageIds() {
var ids = [];
for (var k in _linksStorage) {
ids.push(k);
}
return ids;
}
function _onDelLinkClick() {
var $listItemTr = $(this).closest(linksListItemClassSelector);
var lnkId = $listItemTr.find(hdnLinkIdClassSelector).val();
delete _linksStorage[lnkId];
$listItemTr.remove();
}
function _openDialog(linkForModifyId) {
_currentLinkForModifyId = linkForModifyId;
$(modifyDialogSelector).dialog("open");
}
function _setDialogFields(linkForModifyId) {
var lnk = _linksStorage[linkForModifyId];
$(linkNameSelector).val(lnk.name);
$(linkUrlSelector).val(lnk.url);
}
function _getLinkFromDialogFields() {
return {
name: $(linkNameSelector).val(),
url: $(linkUrlSelector).val()
};
}
function _clearDialogFields() {
$(modifyDialogSelector).find("input").val("");
}
function _addToLinksList(lnk) {
var $listTr = $(linksListItemTemplateSelector).clone();
$listTr.find(linkNameSelector).text(lnk.name);
$listTr.find(linkUrlSelector).text(lnk.url);
$listTr.find(hdnLinkIdClassSelector).val(lnk.Id);
$listTr.attr("class", linksListItemClassSelector.substring(1));
$listTr.appendTo(tblLinksListSelector);
var $sortedTrs = $(linksListItemClassSelector).sort(_customSort);
$(linksListItemClassSelector).remove();
$sortedTrs.appendTo(tblLinksListSelector);
}
function _customSort(a, b) {
var nameA = $(linkNameSelector, $(a)).text().toLowerCase();
var nameB = $(linkNameSelector, $(b)).text().toLowerCase();
return nameA > nameB ? 1 : -1;
}
function _onDialogApply() {
if (!_dialogValidationManager.validate()) {
return;
}
var lnk = _getLinkFromDialogFields();
_linksStorage[lnk.id] = lnk;
if (!_currentLinkForModifyId) {
_addToLinksList(lnk);
}
$(modifyDialogSelector).dialog("close");
_linksValidationManager.discardErrors();
}
function _initDialog() {
$(modifyDialogSelector).dialog({
autoOpen: false,
width: 400,
position: ['center', 100],
modal: true,
buttons: {
"Apply": _onDialogApply,
"Cancel": function () { $(this).dialog("close"); }
},
create: function () {
new RequiredValidator(linkNameSelector, undefined, _dialogValidationManager);
new RequiredValidator(linkUrlSelector, undefined, _dialogValidationManager);
},
open: function () {
_dialogValidationManager.discardErrors();
if (_currentLinkForModifyId) {
_setDialogFields(_currentLinkForModifyId);
} else {
_clearDialogFields();
}
}
});
}
return {
onPageLoaded: function () {
$(tblLinks).on("click", delLinkSelector, _onDelLinkClick);
$(tblLinks).on("click", modLinkSelector, function () {
_openDialog($(this).closest("tr").find(hdnLinkIdClassSelector).val());
});
$(addLinkSelector).click(_openDialog.bind(this, null));
_initDialog();
_initLinksStorage();
},
saveLinksStorage: function () {
var lnkArray = $.map(_linksStorage, function (res) {
return res;
});
var data = lnkArray.length === 0 ? null : JSON.stringify(lnkArray);
$(hdnSelectedLinksSelector).val(data);
},
getRequiredValidationManager: function () {
return _linksValidationManager;
}
};
}
<td id="tdLinksListContainer" colspan="2" valign="top">
<span class="markedOutText">Contact Links: </span>
<div style="float: right;"><a id="addLinksLink" href="#">Add Link</a></div>
<input type="hidden" runat="server" id="hdnSelectedLinks" />
<table id="tblLinks" width="100%">
<colgroup>
<col width="80%" />
</colgroup>
<tr class="subLabel">
<td>Name</td>
<td class="tdAction">Actions</td>
</tr>
<%foreach (var lnk in Links)
{%>
<tr class="linksListItem<%=lnk.Id==0 ? "-template" : string.Empty %>">
<td>
<a target="_blank" href="<%=lnk.Url%>"><%=lnk.Name%></a>
<input type="hidden" class="linkId" value="<%=lnk.Id %>" />
</td>
<td class="tdAction"><a class="delLink" href="#"><%=AppResources.Resources.Common_DelLink%></a>
<a class="modLink" href="#"><%=AppResources.Resources.Common_ModLink%></a></td>
</tr>
<% } %>
</table>
</td>
<%--Links Dialog--%>
<div id="linksDialog" class="ui-helper-hidden" title="Add / Modify Link">
<div class="linksDialogErrorMessages"></div>
<table id="tblLink" width="100%">
<tr>
<td>Name:</td>
<td>
<input type="text" id="linkName" class="text required" />
</td>
</tr>
<tr>
<td>URL:</td>
<td>
<input type="text" id="linkUrl" class="text required" />
</td>
</tr>
</table>
</div>
Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.
When asked, what has been your best career decision?
Deciding to stick with EE.
Being involved with EE helped me to grow personally and professionally.
Connect with Certified Experts to gain insight and support on specific technology challenges including:
We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE