[RESOLVED]Can't Define the ASP.NET ID in JQuery

I implemented a Dual List Box using plain html and JQuery. It was all working fine until I changed the Box2View to an asp.net object and now the javascript won’t reference the asp.net object because the ID value changes at runtime.

How do I tell the javascript to reference Box2View?

The box2View

<div class="rightBox">
    <div class="searchBox"><input type="text" id="box2Filter" class="searchField" placeholder="filter ..." /><button id="box2Clear"  type="button" class="btn" ><span class="icon12  icomoon-icon-cancel-3"></span></button></div>
    <!-- <select id="box2View" multiple="multiple" class="multiple nostyle" style="height:200px;"></select><br/> -->
    <asp:ListBox ID="box2View" CssClass="multiple nostyle" runat="server"></asp:ListBox><br />
    <span id="box2Counter" class="count"></span>
                                                    
    <div class="dn"><select id="box2Storage" class="nostyle"></select></div>
</div>

The JQuery Script

/*
*       Developed by Justin Mead
*       ©2011 MeadMiracle
*		www.meadmiracle.com / meadmiracle@gmail.com
*       Version 1.3
*       Testing: IE8/Windows XP
*                Firefox/Windows XP
*                Chrome/Windows XP
*       Licensed under the Creative Commons GPL http://creativecommons.org/licenses/GPL/2.0/
*/

(function ($) {
    var settings = new Array();
    var group1 = new Array();
    var group2 = new Array();
    var onSort = new Array();
    $.configureBoxes = function (options) {
        var index = settings.push({
            box1View: 'box1View',
            box1Storage: 'box1Storage',
            box1Filter: 'box1Filter',
            box1Clear: 'box1Clear',
            box1Counter: 'box1Counter',
            box2View: 'box2View',
            box2Storage: 'box2Storage',
            box2Filter: 'box2Filter',
            box2Clear: 'box2Clear',
            box2Counter: 'box2Counter',
            to1: 'to1',
            allTo1: 'allTo1',
            to2: 'to2',
            allTo2: 'allTo2',
            transferMode: 'move',
            sortBy: 'text',
            useFilters: true,
            useCounters: true,
            useSorting: true,
            selectOnSubmit: true
        });
        index--;
        $.extend(settings[index], options);
        group1.push({
            view: settings[index].box1View,
            storage: settings[index].box1Storage,
            filter: settings[index].box1Filter,
            clear: settings[index].box1Clear,
            counter: settings[index].box1Counter,
            index: index
        });
        group2.push({
            view: settings[index].box2View,
            storage: settings[index].box2Storage,
            filter: settings[index].box2Filter,
            clear: settings[index].box2Clear,
            counter: settings[index].box2Counter,
            index: index
        });
        if (settings[index].sortBy == 'text') {
            onSort.push(function (a, b) {
                var aVal = a.text.toLowerCase();
                var bVal = b.text.toLowerCase();
                if (aVal < bVal) {
                    return -1;
                }
                if (aVal > bVal) {
                    return 1;
                }
                return 0;
            });
        } else {
            onSort.push(function (a, b) {
                var aVal = a.value.toLowerCase();
                var bVal = b.value.toLowerCase();
                if (aVal < bVal) {
                    return -1;
                }
                if (aVal > bVal) {
                    return 1;
                }
                return 0;
            });
        }
        if (settings[index].useFilters) {
            $('#' + group1[index].filter).keyup(function () {
                Filter(group1[index]);
            });
            $('#' + group2[index].filter).keyup(function () {
                Filter(group2[index]);
            });
            $('#' + group1[index].clear).click(function () {
                ClearFilter(group1[index]);
            });
            $('#' + group2[index].clear).click(function () {
                ClearFilter(group2[index]);
            });
        }
        if (IsMoveMode(settings[index])) {
            $('#' + group2[index].view).dblclick(function () {
                MoveSelected(group2[index], group1[index]);
            });
            $('#' + settings[index].to1).click(function () {
                MoveSelected(group2[index], group1[index]);
            });
            $('#' + settings[index].allTo1).click(function () {
                MoveAll(group2[index], group1[index]);
            });
        } else {
            $('#' + group2[index].view).dblclick(function () {
                RemoveSelected(group2[index], group1[index]);
            });
            $('#' + settings[index].to1).click(function () {
                RemoveSelected(group2[index], group1[index]);
            });
            $('#' + settings[index].allTo1).click(function () {
                RemoveAll(group2[index], group1[index]);
            });
        }
        $('#' + group1[index].view).dblclick(function () {
            MoveSelected(group1[index], group2[index]);
        });
        $('#' + settings[index].to2).click(function () {
            MoveSelected(group1[index], group2[index]);
        });
        $('#' + settings[index].allTo2).click(function () {
            MoveAll(group1[index], group2[index]);
        });
        if (settings[index].useCounters) {
            UpdateLabel(group1[index]);
            UpdateLabel(group2[index]);
        }
        if (settings[index].useSorting) {
            SortOptions(group1[index]);
            SortOptions(group2[index]);
        }
        $('#' + group1[index].storage + ',#' + group2[index].storage).css('display', 'none');
        if (settings[index].selectOnSubmit) {
            $('#' + settings[index].box2View).closest('form').submit(function () {
                $('#' + settings[index].box2View).children('option').attr('selected', 'selected');
            });
        }
    };

    function UpdateLabel(group) {
        var showingCount = $("#" + group.view + " option").size();
        var hiddenCount = $("#" + group.storage + " option").size();
        $("#" + group.counter).text('Showing ' + showingCount + ' of ' + (showingCount + hiddenCount));
    }

    function Filter(group) {
        var index = group.index;
        var filterLower;
        if (settings[index].useFilters) {
            filterLower = $('#' + group.filter).val().toString().toLowerCase();
        } else {
            filterLower = '';
        }
        $('#' + group.view + ' option').filter(function (i) {
            var toMatch = $(this).text().toString().toLowerCase();
            return toMatch.indexOf(filterLower) == -1;
        }).appendTo('#' + group.storage);
        $('#' + group.storage + ' option').filter(function (i) {
            var toMatch = $(this).text().toString().toLowerCase();
            return toMatch.indexOf(filterLower) != -1;
        }).appendTo('#' + group.view);
        try {
            $('#' + group.view + ' option').removeAttr('selected');
        } catch (ex) { }
        if (settings[index].useSorting) {
            SortOptions(group);
        }
        if (settings[index].useCounters) {
            UpdateLabel(group);
        }
    }

    function SortOptions(group) {
        var $toSortOptions = $('#' + group.view + ' option');
        $toSortOptions.sort(onSort[group.index]);
        $('#' + group.view).empty().append($toSortOptions);
    }

    function MoveSelected(fromGroup, toGroup) {
        if (IsMoveMode(settings[fromGroup.index])) {
            $('#' + fromGroup.view + ' option:selected').appendTo('#' + toGroup.view);
        } else {
            $('#' + fromGroup.view + ' option:selected:not([class*=copiedOption])').clone().appendTo('#' + toGroup.view).end().end().addClass('copiedOption');
        }
        try {
            $('#' + fromGroup.view + ' option,#' + toGroup.view + ' option').removeAttr('selected');
        } catch (ex) { }
        Filter(toGroup);
        if (settings[fromGroup.index].useCounters) {
            UpdateLabel(fromGroup);
        }
    }

    function MoveAll(fromGroup, toGroup) {
        if (IsMoveMode(settings[fromGroup.index])) {
            $('#' + fromGroup.view + ' option').appendTo('#' + toGroup.view);
        } else {
            $('#' + fromGroup.view + ' option:not([class*=copiedOption])').clone().appendTo('#' + toGroup.view).end().end().addClass('copiedOption');
        }
        try {
            $('#' + fromGroup.view + ' option,#' + toGroup.view + ' option').removeAttr('selected');
        } catch (ex) { }
        Filter(toGroup);
        if (settings[fromGroup.index].useCounters) {
            UpdateLabel(fromGroup);
        }
    }

    function RemoveSelected(removeGroup, otherGroup) {
        $('#' + otherGroup.view + ' option.copiedOption').add('#' + otherGroup.storage + ' option.copiedOption').remove();
        try {
            $('#' + removeGroup.view + ' option:selected').appendTo('#' + otherGroup.view).removeAttr('selected');
        } catch (ex) { }
        $('#' + removeGroup.view + ' option').add('#' + removeGroup.storage + ' option').clone().addClass('copiedOption').appendTo('#' + otherGroup.view);
        Filter(otherGroup);
        if (settings[removeGroup.index].useCounters) {
            UpdateLabel(removeGroup);
        }
    }

    function RemoveAll(removeGroup, otherGroup) {
        $('#' + otherGroup.view + ' option.copiedOption').add('#' + otherGroup.storage + ' option.copiedOption').remove();
        try {
            $('#' + removeGroup.storage + ' option').clone().addClass('copiedOption').add('#' + removeGroup.view + ' option').appendTo('#' + otherGroup.view).removeAttr('selected');
        } catch (ex) { }
        Filter(otherGroup);
        if (settings[removeGroup.index].useCounters) {
            UpdateLabel(removeGroup);
        }
    }

    function ClearFilter(group) {
        $('#' + group.filter).val('');
        $('#' + group.storage + ' option').appendTo('#' + group.view);
        try {
            $('#' + group.view + ' option').removeAttr('selected');
        } catch (ex) { }
        if (settings[group.index].useSorting) {
            SortOptions(group);
        }
        if (settings[group.index].useCounters) {
            UpdateLabel(group);
        }
    }

    function IsMoveMode(currSettings) {
        return currSettings.transferMode == 'move';
    }
})(jQuery);

Leeoshea

because the ID value changes at runtime.

Try setting your label controls ClientIDMode property to Static like given below

  <asp:ListBox ID="box2View" CssClass="multiple nostyle" runat="server" ClientIDMode="Static"></asp:ListBox>

This option forces the control’s ClientID to use its ID value directly.

Thanks million. I had no idea it would be that simple

Leeoshea

Thanks million.

You are welcome

Leave a Reply