来自 Dojo 中的是否对话框的 Ajax 调用

Question

我有一个要求，即在 Dojo 对话框中单击"是"按钮时，必须对控制器进行 ajax 调用。dojo 对话框在 javascript 中是 creta，当单击 Jsp 中的按钮时会调用。

道场对话框代码：

function launchYesNoDialog(message,action) {
    require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){
        yesNoDialog = new Dialog({
            title: "Warning",
            content: message+'<BR><BR><BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
            ' <button data-dojo-type="dijit/form/Button" id="yesButton">Yes</button>'+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
            '<button data-dojo-type="dijit/form/Button" id="noButton" data-dojo-props="onClick:function(){yesNoDialog.hide();}">No</button>'
        });
    });
    yesNoDialog.show();
}

从

中调用 dojo 对话框的 Jsp 按钮代码。

<button type="button" id="removeCustomerButton"
                                 style="float: left;"
                                disabled="disabled" onclick="launchYesNoDialog(confirmMessage,'Remove');">
                                <SPAN class=grey><EM><s:message
                                            code="customer.removeCustomer" text="" /></EM></SPAN>
                            </button>

javascript中存在ajax功能的Ajax代码如下：

require(["dojo/request/xhr", "dojo/dom", "dojo/dom-construct", "dojo/json", "dojo/on", "dojo/_base/lang", "dojo/domReady!"],
        function(xhr, dom, domConst, JSON, on, lang){
          on(document.getElementById("yesButton"), "click", function(){
              var val = selectedId;
              if(lang.trim(val).length == 0){
                  return;
              }
              waitingForResponse();
            xhr("relationship/deleteCustomer/"+val, {
              handleAs: "json"
            }).then(function(data){
                waitingEnd();
                buildDataGrid("relationGrid", data, null, 0, 'A');
            },  function(err){
                waitingEnd();
                /*if(err.response.text != null && err.response.text.indexOf("j_username") > -1){
                    launchSessionTimeout();
                } else {
                    alert("Error: " + err.response.text);
                }*/
            });
    });
});

现在，当页面加载时，我得到一个javascript，上面写着"空对象错误"，我想这是因为下面这一行。

（document.getElementById（"yesButton"）， "click"， function（）

在 DOM 中呈现 Yes 按钮之前，JavaScript 正在尝试找到它。任何人都可以提供任何解决方案吗？

Answer 1

当你使用dijit小部件时，你应该尝试使用dijit/registry模块来获取dijit对象的引用。

此外，您还需要解析对话框中的 html 内容，以将是/否按钮转换为 dijits。

function launchYesNoDialog(message,action) {
    require(["dijit/Dialog", "dojo/parse", "dojo/domReady!"], function(parse, Dialog){
        yesNoDialog = new Dialog({
            title: "Warning",
            content: message+'<BR><BR><BR>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
            ' <button data-dojo-type="dijit/form/Button" id="yesButton">Yes</button>'+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
            '<button data-dojo-type="dijit/form/Button" id="noButton" data-dojo-props="onClick:function(){yesNoDialog.hide();}">No</button>'
        });
        parser.parse(yesNoDialog.content);
    });
    yesNoDialog.show();
}

将dijit/registry模块添加到 require 调用。

require(["dojo/request/xhr", "dojo/dom", "dojo/dom-construct", "dojo/json", "dojo/on", "dojo/_base/lang", "dijit/registry", "dojo/domReady!"],
        function(xhr, dom, domConst, JSON, on, registry, lang){
          //on(document.getElementById("yesButton"), "click", function(){
          registry.byId("yesButton").on("click", function(){
          .... 

如果上述方法仍然不起作用，那么您可以在jsfiddle上借助此示例创建自己的确认对话框小部件。