Click here to Skip to main content
15,921,467 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I m using below script for editable drop down list and it is working fine with without master page but when i apply this with master page it is not working. can anybody help on this.


<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


HTML
<script type="text/javascript">
      (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>


What I have tried:

i have tried to get control value in master page as below:
var combobox = document.getElementById('<%= this.ContentPlaceHolder1.FindControl("combobox").ClientID %>');

but it is not work
Posted
Updated 23-Aug-16 0:24am
v2
Comments
F-ES Sitecore 22-Aug-16 11:04am    
Is that script on the master page or the content page? Is combobox and toggle on the master page or content page? The solution is fairly straight forward but it depends where everything is.

http://forums.asp.net/t/2034467.aspx?Accessing+controls+via+jQuery+when+using+master+pages
Sainiharish 23-Aug-16 1:59am    
i have check the script on master page and content page too but not working. drop down on content page, In this situation where i have to put script master page or content page and what i have to change in jquery
F-ES Sitecore 23-Aug-16 4:02am    
That link covers script on master page accessing components on content page and vice versa. Also master accessing controls on the master page (the code for that is the same for the content page), so just look how it is done in the link and do the same. It's still unclear where everything is so it's hard to give you a specific answer.
ZurdoDev 22-Aug-16 11:39am    
The client id changes when you put it into a master page. Just do a little bit of debugging and you'll find out exactly what is happening.
Sainiharish 23-Aug-16 1:51am    
i have check the script on master page and content page too but not working. drop down on content page, In this situation where i have to put script master page or content page and what i have to change in jquery

1 solution

Try to move your codes within the ContentHead of your Content page and then do something like this for referencing the server control:

JavaScript
$(function () {
	  var $cb = $("#<%=combobox.ClientID%>");
          $cb.combobox();
          $("#toggle").click(function () {
              $cb.toggle();
          });
});


If your toggle element is a server control then you may also need to change the code for accessing it like this:

JavaScript
$("<%=toggle.ClientID%>").click(function () {
             $cb.toggle();
});


If you are still getting error after applying this changes, then use the browser debugger tools to get the error details.
 
Share this answer
 
Comments
Sainiharish 24-Aug-16 6:47am    
Thanks dear my issue is resolved by this thanks a lot
Vincent Maverick Durano 24-Aug-16 6:56am    
glad to be of help. :)
Sainiharish 24-Aug-16 7:40am    
But there is new problem i m facing, when i select a item from this editable drop down and if i bound s event code behind for onselectedindexchanged which is not executed. AutoPostback also "True". what i have to do. thanks in advance
Vincent Maverick Durano 24-Aug-16 7:47am    
I would suggest you to create a separate thread for your new issue. Don't forget to provide the details.

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