Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.07.2019, 06:31
Интересующийся
Отправить личное сообщение для Misha_White Посмотреть профиль Найти все сообщения от Misha_White
 
Регистрация: 17.02.2010
Сообщений: 16

Фабрика виджетов и autocomplite
Здравствуйте.
Прикрутил себе autocomplite на основе комбобокса.
https://jqueryui.com/autocomplete/#combobox

там идёт переопределение комбобокса и вот тут:
_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 = "";
      },

в случае неверного ввода (отсутствует в списке), поле ввода очищается и выводится сообщение.
Хотел сделать вместо этого добавление нового элемента при помощи ajax.У меня это даже получилось, до того момента, пока на форме не появилось два комбобокса. Если переопределить в $.widjet(), то все комбобоксы будут вести себя одинаково. В случае с очисткой и выводом сообщения это хорошо. Но мне нужно выполнять разные ajax-запросы с различными параметрами для каждого комбобокса.
Соответственно, мне необходимо переопределять эту функцию для каждого комбобокса, но как это сделать, ума не приложу. Натолкните на правильную мысль, пожалуйста.
Ответить с цитированием
  #2 (permalink)  
Старый 10.07.2019, 08:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Misha_White,
в селекте в атрибуте data-url укажите ссылку.
<select class="combobox" data-url="http" >

this.url = this.element.data("url");
Ответить с цитированием
  #3 (permalink)  
Старый 10.07.2019, 08:36
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Misha_White, для каждого отдельно параметры в jquery-ui так передаются: $( "#combobox" ).combobox({ param1: 'value1', param2: 'value2' }), а внутри функций станет доступно так: this.options.param1, this.options.param2 и тд. Здесь можно почитать про устройство фабрики.
Ответить с цитированием
  #4 (permalink)  
Старый 10.07.2019, 08:56
Интересующийся
Отправить личное сообщение для Misha_White Посмотреть профиль Найти все сообщения от Misha_White
 
Регистрация: 17.02.2010
Сообщений: 16

Да, с параметрами я уже сделал. Просто думал, что это похоже на костыли.
Теперь вопрос о том же, но в другом.
На форме есть combobox, в котором, при отсутствии значения выполняется функция добавления значения. И есть другой комбобокс, в котором необходимо использовать механизм по-умолчанию. т.е. как в примере.
Можно, конечно, опять параметр передавать, типа флаг и исходя из этого параметра выполнять определённые действия...
Но я думал, что можно как-то при создании экземпляра ($('#selector').combobox()) переопределять функцию, которая отрабатывала бы ввод...

код из примера:
this._on( this.input, {
          autocompleteselect: function( event, ui ) {
            ui.item.option.selected = true;
            this._trigger( "select", event, {
              item: ui.item.option
            });
          },
 
          autocompletechange: "_removeIfInvalid"
        });


autocompletechange: как-то подменять, может...
Ответить с цитированием
  #5 (permalink)  
Старый 10.07.2019, 09:12
Интересующийся
Отправить личное сообщение для Misha_White Посмотреть профиль Найти все сообщения от Misha_White
 
Регистрация: 17.02.2010
Сообщений: 16

Пока сделал так:
$.widget( "custom.combobox", {
    options:{
     func:"_removeIfInvalid", //действие по умолчанию
     url:"/failajaxlink",
     ....//ещё параметры для формирования AJAX запроса и диалоговых окон.
    },
.....
  this._on( this.input, {
          autocompleteselect: function( event, ui ) {
            ui.item.option.selected = true;
            this._trigger( "select", event, {
              item: ui.item.option
            });
          },
 
          autocompletechange: this.options.func
        });

Последний раз редактировалось Misha_White, 10.07.2019 в 09:15.
Ответить с цитированием
  #6 (permalink)  
Старый 10.07.2019, 09:15
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Misha_White, так параметр может быть и функцией:
_removeIfInvalid: function( event, ui ) {
    this.options.myFunc.call(this, event, ui);
}

Последний раз редактировалось Rise, 10.07.2019 в 09:18.
Ответить с цитированием
  #7 (permalink)  
Старый 10.07.2019, 09:34
Интересующийся
Отправить личное сообщение для Misha_White Посмотреть профиль Найти все сообщения от Misha_White
 
Регистрация: 17.02.2010
Сообщений: 16


Не догоняю...
т.е. я в options myFunc пишу код функции по умолчанию? и в случае необходимости предаю другую функцию при создании?

$.widget( "custom.combobox", {
    options:{
     myFunc: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 + "\' отсутсвует в справочнике. Для добавления обратитесь к Администратору" )
			         .tooltip( "open" );
			        this.element.val( "" );
			        this._delay(function() {
			        this.input.tooltip( "close" ).attr( "title", "" );
			        }, 2500 );
			        this.input.autocomplete( "instance" ).term = "";
							      },

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


и затем:
$('#selector').combobox({myFunc: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;
							          }
							   
							          // add invalid value
....
							          })

Последний раз редактировалось Misha_White, 10.07.2019 в 09:43.
Ответить с цитированием
  #8 (permalink)  
Старый 10.07.2019, 09:43
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Misha_White, ну повторяющийся код можешь оставить в _removeIfInvalid.
Ответить с цитированием
  #9 (permalink)  
Старый 10.07.2019, 09:48
Интересующийся
Отправить личное сообщение для Misha_White Посмотреть профиль Найти все сообщения от Misha_White
 
Регистрация: 17.02.2010
Сообщений: 16

ага. Спасибо.
Вот как-то так я изначально и хотел сделать, только не знал как
Ответить с цитированием
  #10 (permalink)  
Старый 10.07.2019, 10:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Misha_White,
если в функциях различаются только ajax-запросы с различными параметрами, то зачем две функции?
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сайт приема заказов на создание виджетов и сайтов ) maximkr1 Ваши сайты и скрипты 0 09.04.2019 02:29
Конструкторы сайтов и виджетов для них wertklop Общие вопросы Javascript 11 10.08.2016 15:15
Фабрика виджетов jQuery UI FanAizu jQuery 4 22.01.2014 17:14
Создание виджетов. Выбор решения. m00 Общие вопросы Javascript 1 15.04.2010 04:27
Jquery IE6 autocomplite hp5741 Internet Explorer 8 31.08.2009 17:55