Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

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,135 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
This article discusses how to implement server side field validation and display customized error messages to the client.
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

721 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