Question

我有一个要求，我必须在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>

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，上面写着＆＃34; Null Object错误＆＃34;这就是因为我认为这就是下面这条线。

（document.getElementById（＆＃34; yesButton＆＃34;），＆＃34; click＆＃34;，function（）

在DOM中呈现按钮之前，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上借助此示例创建自己的确认对话框小部件。

来自Dojo的Yes No Dialog的Ajax调用

1 个答案: