Обновление полей формы с помощью dojo.xhrGet приводит к тому, что dijit.checkbox будет доступен только для чтения - PullRequest
0 голосов
/ 16 февраля 2011

У меня есть форма с таблицей, которая имеет два поля ввода, поле выбора и несколько флажков. Все поля формы используют dojoType = "dijit.form. {TheFieldType}".

Когда пользователь нажимает кнопку добавления, из файла JSP загружается новая таблица с такими же полями. Это моя функция AJAX:

    <script language="javascript">
    dojo.addOnLoad(passNumber);

    function passNumber() {
        var count = 0;
        dojo.query('#add').onclick(function() {
            var dNode = dojo.byId('more');
            count++;
            dojo.xhrGet({url: 'add.html', 
                         handleAs: "text", 
                         preventCache: true,
                         content:{fieldId:count} ,
                    load: function(data) {
                        dNode.innerHTML += data;
                        dojo.parser.parse(dNode);
                    },
                    error: function(error) {
                        dNode.innerHTML += "AJAX error: " + error;
                    }
            });
        });
    }

</script>

При нажатии на кнопку добавления все работает как надо.

Проблема возникает, когда вы нажимаете кнопку добавления более одного раза. При нескольких щелчках мышью поля в таблице добавляются в форму правильно, но все поля dojoType теперь доступны только для чтения (кроме самой новой добавленной таблицы).

Этим утром я искал несколько часов и не смог найти правильного решения для этого. Я видел, как некоторые люди писали об уничтожении объектов, в то время как другие говорили только о разборе новейших полей. Я попробовал несколько методов и не смог заставить его работать.

У меня есть простая работа, которая может помочь кому-то в том же положении.

<script language="javascript">
    dojo.addOnLoad(passNumber);

    function passNumber() {
        var count = 0;
        dojo.query('#add').onclick(function() {
            var dNode = dojo.byId('more'+count);
            count++;
            dojo.xhrGet({url: 'add.html', 
                         handleAs: "text", 
                         preventCache: true,
                         content:{fieldId:count} ,
                    load: function(data) {
                        dNode.innerHTML = data;
                        dojo.parser.parse(dNode);
                    },
                    error: function(error) {
                        dNode.innerHTML += "AJAX error: " + error;
                    }
            });
        });
    }

</script>

Основным отличием является то, что + = в dNode.innerHTML теперь является только =. Также я анализирую только самый новый элемент div. На моем jsp я добавил пустой контейнер div с именем 'more' + пройденное число.

Я новичок в додзё, так что может быть простое объяснение или решение моей первоначальной проблемы. Но я хотел поделиться своим исправлением для тех, кто сталкивался с той же проблемой.

Спасибо

Ответы [ 2 ]

2 голосов
/ 19 февраля 2011

У вас есть как минимум одна, а возможно и две проблемы.

Во-первых, вы должны использовать dojo.place для размещения фрагмента HTML на странице, а не innerHTML.

Во-вторых (и вы, возможно, этого не делаете), вам никогда не следует запускать анализатор над той частью DOM, где анализатор уже запущен.Если вы это сделаете, вы получите ошибку «Попытка зарегистрировать виджет, если« foo », но этот идентификатор уже зарегистрирован».

По сути, идентификаторы должны быть уникальными для узлов DOM, онидолжны быть уникальными и для виджетов.

У вас есть несколько вариантов:

  1. Не возвращать фрагмент документа / текст HTML из вашей JSP.Вместо этого используйте JSON или подобное и создайте новые элементы формы программно в обратном вызове load().

  2. Делайте то, что вы делаете (но убедитесь, что у вас есть уникальные идентификаторы), новместо использования innerHTML используйте dojo.place().Затем следите за новым узлом таблицы, который вы создаете, и анализируйте только его.

Например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">

    <head>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css">
    </head>

    <body class="claro ">
        <div id="container">
            <table id="original">
                <tr>
                    <td>
                        <input type="text" name="first" id="first" value="testing testing" dojoType="dijit.form.TextBox" trim="true" propercase="true">
                    </td><td>
                        <input type="text" name="second" id="second" value="testing testing" dojoType="dijit.form.TextBox" trim="true" propercase="true">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <select dojoType="dijit.form.FilteringSelect" id="third" name="third">
                            <option value="AP">
                                Apples
                            </option>
                            <option value="OR" selected>
                                Oranges
                            </option>
                            <option value="PE">
                                Pears
                            </option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="fourth" name="fourth" dojoType="dijit.form.CheckBox" value="agreed" checked>
                        <label for="mycheck">
                            I agree
                        </label>
                    </td>
                </tr>
            </table>
        </div>
        <div>
          <button dojoType="dijit.form.Button" type="button">
              Add new fields using HTML
              <script type="dojo/method" event="onClick" args="evt">
                  dojo.xhrGet({
                      url: '_data/mockBackendForXhrBuildDomExample.php',
                      handleAs: 'text',
                      preventCache: true,
                      load: function(data) {
                          // This is a little contrived, but hopefully you get the idea
                          console.log(data);
                          var container = dojo.byId('container');
                          var newTable = dojo.place(data, container, 'last');
                          dojo.parser.parse(newTable);                          
                      },
                      error: function(error) {
                          console.error(error);
                      }
                  });
              </script>
          </button>
        </div>
    </body>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
    djConfig="parseOnLoad: true">
    </script>
    <script type="text/javascript">
        dojo.require("dijit.form.FilteringSelect");
        dojo.require("dijit.form.TextBox");
        dojo.require("dijit.form.CheckBox");
        dojo.require("dijit.form.Button");
        dojo.addOnLoad(function() {


        });
    </script>

</html>

Я добавил пример этой работыв http://telliott.net/dojoExamples/dojo-xhrBuildDomExample.html. HTML-код, возвращаемый вызовом AJAX, можно найти в http://telliott.net/dojoExamples/_data/mockBackendForXhrBuildDomExample.php (он использует функцию PHP time (), поэтому не нажимайте кнопку чаще, чем раз в секунду!).

HTH,

Том

0 голосов
/ 21 февраля 2011

Большое спасибо за совет, Том.Я новичок в додзё и не знал о функции места.Я изменил свой код, и теперь я могу использовать его и размещать новые поля формы в том же самом div.Я использую фрагмент jsp, который использует следующие пружинные теги:

<%@taglib uri="http://www.springframework.org/tags" prefix="spring" %>

<% @ taglib uri = "http://www.springframework.org/tags/form" prefix =" form "%>

Когда они находятся нав самом верху фрагмента я получил бы сообщение об ошибке ajax, говорящее о несоответствии типов. Я пытался удалить их полностью, но тогда поля были бы помещены, но не имели значений. В итоге я поместил их в открывающий тег, и теперь все работает нормально.

Спасибо за вашу помощь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...