Я не могу запустить onChange для dijit.form.Выберите
-
23-09-2019 - |
Вопрос
Кажется, я не могу правильно прикрепить событие onchange к dijit.form.Выберите виджет.Однако я новичок в веб-разработке, так что я мог бы делать что-то совершенно идиотское (хотя, насколько я могу судить (и я прочитал все документы, которые смог найти), это не так).Я убедился, что класс body соответствует теме dojo, которую я использую dojo.require() для всех виджетов, которые я использую (и dojo.parser), и все равно, nada.Код, который я использую, это:
dojo.addOnLoad(function () {
var _query = dojo.query('.toggle');
for (var i in _query) {
dojo.connect(_query[i], 'onchange', function (ev) {
console.log(ev + ' fired onchange');
});
}
});
Мы были бы признательны за любую помощь вообще.
Дополнение:покопавшись подробнее во внутренностях того, как dijit рендерит виджеты, я обнаружил, что когда я добавляю dojoType='dijit.form.Выберите 'пара атрибут-значение' для моего html-элемента (делая это декларативно), dijit фактически отображает однострочную таблицу с двумя столбцами.Первый элемент таблицы - это span (с классом dijitSelectLabel), который, как я предполагаю, просто отображает выбранный элемент (или по умолчанию).Второй элемент, по-видимому, представляет собой кнопку, отображаемую в виде стрелки вниз, которая переключает отображение элементов меню в ответ на определенные события DOM.Кроме того (и я подумал, что это довольно здорово), dijit фактически не помещает параметры выбора в дерево DOM до тех пор, пока не будет запущено одно из этих событий.Я просмотрел HTML-код в firebug сразу после новой загрузки страницы (до того, как я нажал на что-либо), и второй вариант нигде не найден.Затем, как только я нажимаю на кнопку со стрелкой, появляется dijit.Виджет меню, dijit вставляет dijit.Меню в конец основного узла;после того, как я щелкну где-нибудь еще, виджет меню по-прежнему будет последним дочерним элементом тела, теперь он просто скрыт и не прикреплен к форме.Выберите виджет.
Действительно ли это должно быть так сложно, если все, что я хочу сделать, это разместить другой виджет dijit.form в дереве DOM в зависимости от того, какой элемент выбирает пользователь?
Заключение:Оказывается, это была проблема с капитализацией.
dojo.connect(widget_obj, 'onChange', function_obj);
работает, тогда как
dojo.connect(widget_obj, 'onchange', function_obj);
не делает.Так что я был прав в том, что вел себя совершенно глупо.Я предположил, что, поскольку версия all в нижнем регистре работает при добавлении в нее html-тега в качестве атрибута, этот Dojo будет относиться к нему так же.Это имеет смысл, потому что dijit.form.У Select нет атрибута .onchange, но есть атрибут .onChange .(В итоге я остановился на .Выберите вместо .FilteringSelect, потому что я не хочу, чтобы у моих пользователей создалось впечатление, что они могут что-то вводить.) Итак, кому из вас, ребята, мне дать ответ (поскольку у вас обоих в ваших сообщениях было onChange, я думаю, я был просто слишком неопытен, чтобы понять, что это дело имело значение)?
Решение
Попробуйте следующее, когда занимаетесь в додзе.connect:
var inputEvents = []; //Global var
inputEvents.push(dojo.connect(dijit.byId(inputFldStr), "onChange", eventFuncObj));
Сохраните соединение в глобальной переменной.
Другие советы
Если кто-либо другой нашел эту страницу с помощью веб-поиска, возможно, вы допустили ту же ошибку, что и я ..скопируйте и вставьте вашу разметку таким образом, чтобы каждая из них имела одинаковое "значение".
например ,
<select dojoType='dijit.form.Select' onChange="fn">
<option value='foo'>Foo 1</option>
<option value='foo'>Foo 2</option>
<option value='foo'>Foo 3</option>
</select>
fn() никогда не будет вызван, потому что код обработчика изменений проверяет новое значение на соответствие ранее выбранному значению и не запускает onChange, если оно не было изменено.
В вашем коде вы подключаете обработчик к событию 'onchange' узлов dom, а не виджетов dojo.dojo.запрос возвращает вам объект NodeList - коллекцию узлов, которые соответствуют запросу.
В этом случае надежнее подключиться к событию виджета 'onChange', как показал ГойнОфф.Просто небольшое дополнение к его ответу, чтобы убедиться, что вы делаете это правильно.
Предположим, это ваш html (в более поздних версиях Dojo dijit.form.Select был заменен на dijit.form.FilteringSelect):
<input dojoType="dijit.form.FilteringSelect" id="stateInput" store="stateStore" searchAttr="name" name="state"/>
Затем вы подключились бы к 'onChange' таким образом (вы также можете сохранить соединение в некотором массиве, чтобы иметь возможность отключить его позже, как предложил GoinOff):
dojo.addOnLoad (function () {
dojo.connect(dijit.byId("stateInput"), "onChange", function(){});
}
Но это совсем другая история, если вы не знаете id своего виджета и хотите использовать dojo.запрос для подключения к нескольким виджетам.