Solved

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

Posted on 2013-01-25
5
1,002 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Entity Framework is a powerful tool to help you interact with the DataBase but still doesn't help much when we have a Stored Procedure that returns more than one resultset. The solution takes some of out-of-the-box thinking; read on!
This article discusses how to create an extensible mechanism for linked drop downs.
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)

810 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