Solved

JQuery Autocomplete Enables Disabled ListItem in Asp.net DDLIST, how to disable using Javascript?

Posted on 2013-01-25
5
986 Views
Last Modified: 2013-01-30
I have an ASP.Net Dropdownlist that has items which are dynamically disabled using C#.  It works fine when no Jquery is applied, but when I apply the JQuery Autocomplete, it enables them. How do I disable them based on the option value (value="Header")?

The Rendered Drop Down List looks like:
<div class="ui-widget">

<select name="ctl00$cphBody$ddlProgram" id="ctl00_cphBody_ddlProgram" name="ProgramID"  style="width:400px;">
<option selected="selected" value="" class="ComboBoxItem"></option>
<option value="Header" disabled="disabled" class="ComboBoxHeader">Header 1</option>
<option value="1" class="ComboBoxItem">Option 1</option>
<option value="2" class="ComboBoxItem">Option 2</option>
<option value="3" class="ComboBoxItem">Option 3</option>
<option value="4" class="ComboBoxItem">Option 4</option>
<option value="5" class="ComboBoxItem">Option 5</option>
<option value="6" class="ComboBoxItem">Option 6</option>
<option value="7" class="ComboBoxItem">Option 7</option>
<option value="8" class="ComboBoxItem">Option 8</option>
<option value="Header" disabled="disabled" class="ComboBoxHeader">Header  2</option>
<option value="9" class="ComboBoxItem">Option 9</option>
<option value="10" class="ComboBoxItem">Option 10</option>
</select>
</div>

Open in new window


The Jquery Looks like this:
 <script>

        (function ($) {
            $.widget("ui.combobox", {
                _create: function () {
                    var input,
                        that = this,
                        select = this.element.hide(),
                        selected = select.children(":selected"),
                        value = selected.val() ? selected.text() : "",
                        wrapper = this.wrapper = $("<span>")
                            .addClass("ui-combobox")
                            .insertAfter(select);

                    function removeIfInvalid(element) {
                        var value = $(element).val(),
                            matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(value) + "$", "i"),
                            valid = false;
                        select.children("option").each(function () {
                            if ($(this).text().match(matcher)) {
                                this.selected = valid = true;
                                return false;
                            }
                        });
                        if (!valid) {
                            // remove invalid value, as it didn't match anything
                            $(element)
                                .val("")
                                .attr("title", value + " didn't match any item")
                                .tooltip("open");
                            select.val("");
                            setTimeout(function () {
                                input.tooltip("close").attr("title", "");
                            }, 2500);
                            input.data("autocomplete").term = "";
                            return false;
                        }
                    }

                    input = $("<input>")
                        .appendTo(wrapper)
                        .val(value)
                        .attr("title", "")
                        .addClass("ui-state-default ui-combobox-input validate[required]")
                        .autocomplete({
                            delay: 0,
                            minLength: 0,
                            source: function (request, response) {
                                var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                                response(select.children("option").map(function () {
                                    var text = $(this).text();
                                    if (this.value && (!request.term || matcher.test(text)))
                                        return {
                                            label: text.replace(
                                                new RegExp(
                                                    "(?![^&;]+;)(?!<[^<>]*)(" +
                                                        $.ui.autocomplete.escapeRegex(request.term) +
                                                        ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                                ), "<strong>$1</strong>"),
                                            value: text,
                                            option: this
                                        };
                                }));
                            },
                            select: function (event, ui) {
                                ui.item.option.selected = true;
                                that._trigger("selected", event, {
                                    item: ui.item.option
                                });
                            },
                            change: function (event, ui) {
                                if (!ui.item)
                                    return removeIfInvalid(this);
                            }
                        })
                    //.addClass("ui-widget ui-widget-content ui-corner-left");
                    var getwid = this.element.width();
                    input.width(getwid);
                    input.data("autocomplete")._renderItem = function (ul, item) {
                        return $("<li>")
                            .data("item.autocomplete", item)
                            .append("<a>" + item.label + "</a>")
                            .appendTo(ul);
                    };

                    $("<a>")
                        .attr("tabIndex", -1)
                    .attr("title", "Show All Items")
                        .tooltip()
                        .appendTo(wrapper)
                        .button({
                            icons: {
                                primary: "ui-icon-triangle-1-s"
                            },
                            text: false
                        })
                        .removeClass("ui-corner-all")
                        .addClass("ui-corner-right ui-combobox-toggle")
                        .click(function () {
                            // close if already visible
                            if (input.autocomplete("widget").is(":visible")) {
                                input.autocomplete("close");
                                removeIfInvalid(input);
                                return;
                            }

                            // work around a bug (likely same cause as #5265)
                            $(this).blur();

                            // pass empty string as value to search for, displaying all results
                            input.autocomplete("search", "");
                            input.focus();
                        });

                    input
                        .tooltip({
                            position: {
                                of: this.button
                            },
                            tooltipClass: "ui-state-highlight"
                        });
                },

                destroy: function () {
                    this.wrapper.remove();
                    this.element.show();
                    $.Widget.prototype.destroy.call(this);
                }
            });
        })(jQuery);

        $(function () {
            $("#ctl00_cphBody_ddlProgram").combobox();
        });
    </script>

Open in new window

0
Comment
Question by:crosstf
  • 3
  • 2
5 Comments
 
LVL 15

Expert Comment

by:Eyal
ID: 38829876
0
 

Author Comment

by:crosstf
ID: 38831673
The problem with these examples is that they deal with Lists. I am dealing with a select, with options. Jquery, or at least what I am using, a combobox, ignores the disabled attribute, so i need a way to disable them in jquery or modify the code to handle this. I am feeling that it isn't possible without modifying the jQuery UI file,  but I thought I would see if anyone here had any ideas.
0
 
LVL 15

Expert Comment

by:Eyal
ID: 38833855
0
 
LVL 15

Accepted Solution

by:
Eyal earned 500 total points
ID: 38833925
in my code I override the renderitem of the autocomplete like so

input.data("autocomplete")._renderItem = function (ul, item) {
                return $("<li>")
                        .data("item.autocomplete", item)
                        .append(item.option.disabled ? "<span>" + item.label + "</span>" : "<a>" + item.label + "</a>")
                        .addClass(item.option.disabled ? "ui-menu-item-disabled" : "")
                        .appendTo(ul);
            };

Open in new window

0
 

Author Closing Comment

by:crosstf
ID: 38835129
This is it. Thank you. No one had this posted anywhere; it's the autocomplete renderitem that ignores the attributes. Perfect.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now