We help IT Professionals succeed at work.
Get Started

New Item not being added to JavaScript collection

Scott Baldridge
on
89 Views
Last Modified: 2015-10-29
Hello, I'm new to JavaScript and attempting to make a component to allow users to add URL links to a collection that will be saved to a database.
With my attached code I'm having issues with my _addToLinksList function in that the new link is not added to my _linksStorage collection. When I step through the  _addToLinksList function the expected values are present but the new link is not added.

I could use some pointers as to why and perhaps some help in fixing the issue. Any help is appreciated.


 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:&nbsp;</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>

Open in new window

Comment
Watch Question
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2017
Commented:
This problem has been solved!
Unlock 1 Answer and 3 Comments.
See Answer
Why Experts Exchange?

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.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE