Я не могу получить onChange, чтобы запустить dijit.form.Select - PullRequest
Новая
       22

Я не могу получить onChange, чтобы запустить dijit.form.Select

6 голосов
/ 01 апреля 2010

Я не могу правильно прикрепить событие onchange к виджету dijit.form.Select. Тем не менее, я новичок в веб-разработке, поэтому я мог делать что-то совершенно идиотское (хотя, насколько я могу судить (и я прочитал все документы, которые смог найти), я не). Я убедился, что класс 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.Select' к моему html-элементу (делая это декларативно), dijit фактически отображает однорядный двухколонный стол. Первый элемент таблицы - это span (с классом dijitSelectLabel), который, как я предполагаю, просто отображает выбранный (или используемый по умолчанию) элемент. Второй элемент выглядит как кнопка, отображаемая в виде стрелки вниз, которая переключает отображение элементов меню в ответ на определенные события DOM. Кроме того (и я думал, что это было довольно изящно), dijit фактически не помещает опции выбора в дерево DOM, пока не сработает одно из этих событий. Я посмотрел HTML-код в Firebug сразу после новой загрузки страницы (прежде чем щелкнуть по чему-либо), и второй вариант нигде не найти. Затем, как только я нажимаю на кнопку со стрелкой, появляется виджет dijit.Menu, dijit прикрепляет dijit.Menu к концу узла body; после того, как я щелкну где-то еще, виджет «Меню» по-прежнему остается lastChild тела, теперь он просто скрыт и не привязан к форме. Выберите виджет.

Должно ли это быть действительно сложно, если все, что я хочу сделать, это поместить другой виджет dijit.form в дерево DOM в зависимости от того, какой элемент выбирает пользователь?

Заключение: Оказывается, это была проблема с заглавными буквами. 

dojo.connect(widget_obj, 'onChange', function_obj);
работает, тогда как 

dojo.connect(widget_obj, 'onchange', function_obj);
нет.

Так что я был прав, что был совершенно глупым. Я предполагал, что, поскольку вся строчная версия работает, если поместить в нее html-тег в качестве атрибута, Dojo будет относиться к нему так же. Это имеет смысл, поскольку dijit.form.Select не имеет атрибута .onchange, но имеет атрибут .onChange. (В конечном итоге я придерживался .Select вместо .FilteringSelect, потому что у меня нет пользователей, чтобы у меня создавалось впечатление, что они могут что-то печатать.) Итак, кому из вас, ребята, я отвечу (потому что вы оба В ваших постах было onChange, я думаю, я был слишком неопытен, чтобы понять, что дело имело значение)?

Ответы [ 3 ]

4 голосов
/ 24 мая 2010

Для всех, кто находил эту страницу с помощью веб-поиска, вы, возможно, допустили ту же ошибку, что и я, - скопируйте вашу разметку так, чтобы у каждой была одинаковое значение.

, например 

<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, если он не изменен.

2 голосов
/ 01 апреля 2010

Попробуйте выполнить следующее при выполнении dojo.connect: 

  var inputEvents = [];  //Global var

  inputEvents.push(dojo.connect(dijit.byId(inputFldStr), "onChange", eventFuncObj));

Сохранить соединение в глобальном var.

1 голос
/ 02 апреля 2010

В вашем коде вы подключаете обработчик к событию 'onchange' узлов dom, а не виджетов dojo. dojo.query возвращает вам объект NodeList - набор узлов, соответствующих запросу.
В этом случае более надежно подключиться к событию «onChange» виджета, как показал GoinOff. Просто небольшое дополнение к его ответу, чтобы убедиться, что вы все делаете правильно.
Предположим, это ваш 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(){});
}

Но это другая история, если вы не знаете идентификатор своего виджета и хотите использовать dojo.query для подключения к нескольким виджетам.

...