Solved

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

Posted on 2013-01-25
5
975 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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jQuery Scroll on Mobile devices 1 31
Asp.net mvc entity issue 6 20
gif animation 6 22
Example unit tests with AngularJS 3 13
This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

746 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

11 Experts available now in Live!

Get 1:1 Help Now