Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2013-01-25
5
Medium Priority
?
1,155 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
 

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 2000 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Hello there! As a developer I have modified and refactored the unit tests which was written by fellow developers in the past. On the course, I have gone through various misconceptions and technical challenges when it comes to implementation. I would…
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…
Suggested Courses

926 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