来自 Dojo 中 Yes No Dialog 的 Ajax 调用答案

【问题标题】：Ajax call from Yes No Dialog in Dojo来自 Dojo 中 Yes No Dialog 的 Ajax 调用
【发布时间】：2015-06-18 10:47:15
【问题描述】：

我有一个要求，我必须在单击 Dojo 对话框中的 Yes 按钮时对控制器进行 ajax 调用。 dojo对话框是用javascript创建的，当点击jsp中的按钮时调用。

Dojo 对话框代码：

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 代码。

<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>

并且存在ajax功能的javascript中的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 正在尝试找到它。谁能提供任何解决方案？

【问题讨论】：

如果我在 jsp 中创建此对话框并创建一个 dojo 对话框类型的 div，那么我可以解决此问题。但我想使用当前的方法来实现这一点。仅供参考，我使用的是 Dojo 1.9 .. 所以不能使用 Dojo 确认对话框，因为我猜 1.10 库中也有这个对话框

标签： javascript ajax jsp dojo

【解决方案1】：

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

您还需要解析对话框中的 html 内容以将是/否按钮变为 dijit。

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 上的此示例创建自己的确认对话框小部件。

【讨论】：