In order to fulfill a requirement, I need to initiate an ajax call to a controller when the Yes button is clicked within a Dojo Dialog Box. The Dojo dialog box is created through JavaScript and triggered by clicking a button in a JSP file.
Here is the code for the Dojo Dialog Box:
function launchYesNoDialog(message, action) {
require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){
yesNoDialog = new Dialog({
title: "Warning",
content: message+'<BR><BR><BR> ' +
' <button data-dojo-type="dijit/form/Button" id="yesButton">Yes</button>'+' '+
'<button data-dojo-type="dijit/form/Button" id="noButton" data-dojo-props="onClick:function(){yesNoDialog.hide();}">No</button>'
});
});
yesNoDialog.show();
}
This is the code snippet from the JSP file that triggers the Dojo dialog:
<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>
Below is the Ajax code where the ajax functionality is implemented:
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();
});
});
});
Upon loading the page, there is a "Null Object error" being thrown by JavaScript due to this line of code:
(document.getElementById("yesButton"), "click", function()
It seems like JavaScript is trying to locate the Yes Button before it's even rendered in the DOM. Can anyone suggest a solution to this issue?