Click here to Skip to main content
15,918,668 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Editable dropdown list is working fine in direct aspx..

if i used in master page.. i am not getting result.....

see this code..

C#
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="../StyleSheet/Table.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="../JS/Validations.js"></script>

    <script src="../JS/DateValidation.js" type="text/javascript"></script>

    <meta charset="utf-8">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>

    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  
    <script>
        (function($) {
            $.widget("custom.combobox", {
                _create: function() {
                    this.wrapper = $("<span>")
          .addClass("custom-combobox")
          .insertAfter(this.element);

                    this.element.hide();
                    this._createAutocomplete();
                    this._createShowAllButton();
                },

                _createAutocomplete: function() {
                    var selected = this.element.children(":selected"),
          value = selected.val() ? selected.text() : "";

                    this.input = $("<input>")
          .appendTo(this.wrapper)
          .val(value)
          .attr("title", "")
          .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
          .autocomplete({
              delay: 0,
              minLength: 0,
              source: $.proxy(this, "_source")
          })
          .tooltip({
              tooltipClass: "ui-state-highlight"
          });

                    this._on(this.input, {
                        autocompleteselect: function(event, ui) {
                            ui.item.option.selected = true;
                            this._trigger("select", event, {
                                item: ui.item.option
                            });
                        },

                        autocompletechange: "_removeIfInvalid"
                    });
                },

                _createShowAllButton: function() {
                    var input = this.input,
          wasOpen = false;

                    $("<a>")
          .attr("tabIndex", -1)
          .attr("title", "Show All Items")
          .tooltip()
          .appendTo(this.wrapper)
          .button({
              icons: {
                  primary: "ui-icon-triangle-1-s"
              },
              text: false
          })
          .removeClass("ui-corner-all")
          .addClass("custom-combobox-toggle ui-corner-right")
          .mousedown(function() {
              wasOpen = input.autocomplete("widget").is(":visible");
          })
          .click(function() {
              input.focus();

              // Close if already visible
              if (wasOpen) {
                  return;
              }

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

                _source: function(request, response) {
                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                    response(this.element.children("option").map(function() {
                        var text = $(this).text();
                        if (this.value && (!request.term || matcher.test(text)))
                            return {
                                label: text,
                                value: text,
                                option: this
                            };
                    }));
                },

                _removeIfInvalid: function(event, ui) {

                    // Selected an item, nothing to do
                    if (ui.item) {
                        return;
                    }

                    // Search for a match (case-insensitive)
                    var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
                    this.element.children("option").each(function() {
                        if ($(this).text().toLowerCase() === valueLowerCase) {
                            this.selected = valid = true;
                            return false;
                        }
                    });

                    // Found a match, nothing to do
                    if (valid) {
                        return;
                    }

                    // Remove invalid value
                    this.input
          .val("")
          .attr("title", value + " didn't match any item")
          .tooltip("open");
                    this.element.val("");
                    this._delay(function() {
                        this.input.tooltip("close").attr("title", "");
                    }, 2500);
                    this.input.autocomplete("instance").term = "";
                },

                _destroy: function() {
                    this.wrapper.remove();
                    this.element.show();
                }
            });
        })(jQuery);

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

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <body>

        <div>
            <div class="ui-widget">
                <asp:DropDownList ID="combobox" runat="server">
                </asp:DropDownList>
                &nbsp;
            </div>
        </div>
        <asp:ImageButton runat="server" ID="imgbtn" ImageUrl="~/images/gobutton_red.gif"
            OnClick="imgbtn_Click" Style="height: 16px" />

    </body>
    <%-- <br />
          
</asp:Content>
Posted
Updated 19-Sep-14 19:27pm
v2

1 solution

my first guess is that you have an order issue.

you have the javascript being run before the control is loaded into the page. having javascript run like this is usually something that you want done at the bottom of the page.

if you really want it at the top like this then I would wrap it up inside of event handler.

something like....

JavaScript
$(document).ready(function() {
   // put your code here that you want run when the page loads. 
});
 
Share this answer
 
Comments
Siva Hyderabad 20-Sep-14 1:33am    
but same code works in aspx page...and i bind dropdownlist in page load event..I think it may be master page problem?
Dennis E White 20-Sep-14 1:34am    
I think it's just a timing issue of how the page is rendered and delivered from the server.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900