Как я могу переместить скрипт додзё на мою веб-страницу? - PullRequest
Новая
       31

Как я могу переместить скрипт додзё на мою веб-страницу?

0 голосов
/ 10 сентября 2018

У меня есть рабочая страница JavaScript, которая использует dojo для проверки результатов формы dijit/Dialog. 

<div class="content">
    <div data-dojo-type="dijit/Dialog" data-dojo-id="myFormDialog" title="Form Dialog" style="display: none">
<form data-dojo-type="dijit/form/Form" data-dojo-id="myForm">
    <script type="dojo/on" data-dojo-event="submit" data-dojo-args="e">
        require(["dijit/registry"],function(registry){
            e.preventDefault(); // prevent the default submit
            if(!myForm.isValid()){ alert("Please fix fields"); return; }
            var inputField = registry.byId("input-field");
            var resultVal = inputField.get("value");
            console.log("Would submit "+resultVal+" here via dojo/xhr.");
            window.alert("Would submit "+resultVal+" here via dojo/xhr.");
            myFormDialog.hide();
        });
    </script>
    <div class="dijitDialogPaneContentArea">
        <label for='foo'>Foo: </label>
        <input type="text" name="input-field" id="input-field" value="Foo here" required="true" data-dojo-type="dijit/form/TextBox" />
    </div>
    <div class="dijitDialogPaneActionBar">
            <button data-dojo-type="dijit/form/Button" type="submit">OK</button>
            <button data-dojo-type="dijit/form/Button" type="button"
                data-dojo-props="onClick:function(){myFormDialog.hide();}">Cancel</button>
    </div>
 </form>
</div>
<p>When pressing this button the dialog will popup:</p>
<button id="buttonThree" data-dojo-type="dijit/form/Button" type="button">Show me!
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
    myFormDialog.show();
</script>
</button>

</div>
<script>
  require(["dijit/Dialog", "dijit/form/Form", "dijit/form/Button", "dijit/form/TextBox", "dojo/on"]);';
</script>

Я хочу переместить сценарий в форме вниз страницы, чтобыЯ могу интегрировать его с другой страницей.

(Этот код сгенерирован PHP, и я использую heredoc для включения кода из примера dojotools.)

Я попробовал следующий код: 

<div class="content">
<div data-dojo-type="dijit/Dialog" data-dojo-id="myFormDialog" title="Form Dialog" style="display: none">
<form data-dojo-type="dijit/form/Form" data-dojo-id="myForm">
    <div class="dijitDialogPaneContentArea">
        <label for='foo'>Foo: </label>
        <input type="text" name="input-field" id="input-field" data-dojo-id="input-field" value="Foo here" required="true" data-dojo-type="dijit/form/TextBox" />
    </div>
    <div class="dijitDialogPaneActionBar">
            <button data-dojo-type="dijit/form/Button" type="submit" data-dojo-id="my-button" id="my-button" data-dojo-args="e">OK</button>
            <button data-dojo-type="dijit/form/Button" type="button"
                data-dojo-props="onClick:function(){myFormDialog.hide();}">Cancel</button>
    </div>
 </form>
</div>

<p>When pressing this button the dialog will popup:</p>
<button id="buttonThree" data-dojo-type="dijit/form/Button" type="button">Show me!
  <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
      myFormDialog.show();
  </script>
</button>
</div>
<script>
require(["dojo/dom", "dojo/on", "dijit/registry", "dijit/Dialog", "dijit/form/Form", "dijit/form/Button", "dijit/form/TextBox", ],
function(dom, on, registry){
  on(dom.byId("my-button"), "click", function(e){
      e.preventDefault(); // prevent the default submit
      console.log("Reached on() function.");
  })
});
</script>

Это приводит к следующему на странице (скопировано из инструментов разработчика Chrome, где консоль не показывает никаких синтаксических ошибок): 

<div class="content">
  <div data-dojo-type="dijit/Dialog" data-dojo-id="myFormDialog" title="Form Dialog" style="display: none">
    <form data-dojo-type="dijit/form/Form" data-dojo-id="myForm">
      <div class="dijitDialogPaneContentArea">
        <label for='foo'>Foo: </label>
        <input type="text" name="input-field" id="input-field" data-dojo-id="input-field" value="Foo here" required="true" data-dojo-type="dijit/form/TextBox" />
      </div>
      <div class="dijitDialogPaneActionBar">
        <button data-dojo-type="dijit/form/Button" type="submit" data-dojo-id="my-button" id="my-button" data-dojo-args="e">OK</button>
        <button data-dojo-type="dijit/form/Button" type="button"
          data-dojo-props="onClick:function(){myFormDialog.hide();}">Cancel</button>
      </div>
    </form>
  </div>
  <p>When pressing this button the dialog will popup:</p>
  <button id="buttonThree" data-dojo-type="dijit/form/Button" type="button">Show me!
    <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
      myFormDialog.show();
    </script>
  </button>
</div>
<script>
require(["dojo/dom", "dojo/on", "dijit/registry", "dijit/Dialog", "dijit/form/Form", "dijit/form/Button", "dijit/form/TextBox", ],
function(dom, on, registry){
  on(dom.byId("my-button"), "click", function(e){
      e.preventDefault(); // prevent the default submit
      console.log("Reached on() function.");
  })
});</script>

В этом случае обработчик on()не кажется, чтобы быть вызванным.Появляется кнопка Show Me .

Если вы щелкнете по ней, отобразится форма с полем Foo.Если вы введете значение в поле и нажмете кнопку OK , форма исчезнет.Но сообщение не отправляется на консоль.

У кого-нибудь есть предложения, почему скрипт будет работать как часть формы, а не как отдельный вызов на странице?

Оригинальный кодпроисходит из раздела «Формы и функциональность в диалогах» на странице dijit / Dialog (https://dojotoolkit.org/reference-guide/1.10/dijit/Dialog.html#dijit-dialog).

1 Ответ

0 голосов
/ 10 сентября 2018

Сначала on(dom.byId("my-button"), "click", function(e){...}) не сработает, потому что он подключен к dom, который не заменяется парсером dojo,

также вы объявили кнопку с data-dojo-id и id,

обратите внимание, что data-dojo-id (не используйте минус - в названии здесь, используйте вместо этого подчеркивание _) создайте глобальный элемент с этим идентификатором в объекте окна, так что позже вы сможете получить доступ к своему элементу напрямую, как здесь my_button.on(...)

в то время как id создает виджет с widgetid=id для доступа к нему с помощью dijit/registry.

Второе: здесь важно получить доступ к этим виджетам. Вам следует подождать, пока они все не будут проанализированы, поэтому с помощью функции обратного вызова dojo / ready убедитесь, что все виджеты правильно проанализированы,

Soo в вашем случае после готовности (виджет проанализирован, сгенерированный элемент dom с id="my-button" заменен на виджет itselef) таким образом, кнопка отправки будет отправлена ​​напрямую, и никакое действие по умолчанию не действует, также нет сообщения

См. Ниже рабочий фрагмент: 

<script type="text/javascript">
  dojoConfig = {
    isDebug: true,
    async: true,
    parseOnLoad: true
  }
</script>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />


<body class="claro">
  <div data-dojo-type="dijit/Dialog" data-dojo-id="myFormDialog" title="Form Dialog" style="display: none">
    <form data-dojo-type="dijit/form/Form" data-dojo-id="myForm" action="#">
      <div class="dijitDialogPaneContentArea">
        <label for='foo'>Foo: </label>
        <input type="text" name="input-field" id="input-field" data-dojo-id="input-field" value="Foo here" required="true" data-dojo-type="dijit/form/ValidationTextBox"/>
      </div>
      <div class="dijitDialogPaneActionBar">
        <button data-dojo-type="dijit/form/Button" type="submit" data-dojo-id="my_button" id="my-button" data-dojo-args="e">OK</button>
        <button data-dojo-type="dijit/form/Button" type="button" data-dojo-props="onClick:function(){myFormDialog.hide();}">Cancel</button>
      </div>
    </form>
  </div>

  <p>When pressing this button the dialog will popup:</p>
  <button id="buttonThree" data-dojo-type="dijit/form/Button" type="button">Show me!
  <script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
      myFormDialog.show();
  </script>
</button>
  <script>
    require(["dojo/dom", "dojo/on", "dijit/registry", "dojo/ready", "dijit/Dialog", "dijit/form/Form", "dijit/form/Button", "dijit/form/ValidationTextBox"],
      function(dom, on, registry, ready) {

        ready(function() {
          // my_button same as = registry.byId("my-button");
          my_button.on("click", function(e) {  
            e.preventDefault(); // prevent the default submit
            console.log("Reached on() function.",myForm.validate());
            if(myForm.validate()) {
              //do som stuff here and then close dilaog
            }
          });
          
        });

      });
  </script>


</body>
...