Rendered HTML has no ID associated with the dialog buttons
This is the JS displays a standard 'OK' dialog using jQueryUI:
function genericPopupDialog(dialogTitle, dialogBody, closeButtonText, dialogWidth, parentContainer) {
parentContainer = parentContainer || "#bodyDiv";
$("" + parentContainer + "").append($("<div id='genericPopupDialog'>" + dialogBody + "</div>"));
$("#genericPopupDialog").dialog({
autoResize: true,
autoOpen: true,
width: parseInt(dialogWidth),
maxHeight: 500,
title: dialogTitle,
modal: true,
closeOnEscape: true,
buttons: [{
id: "btnCancel",
text: closeButtonText,
click: function () {
$(this).dialog("close");
}
}],
open: function () {
$(this).scrollTop(0);
},
close: function() {
$(this).remove();
},
dialogClass: 'center-dialog-buttons'
});
}
And this calls that function:
function showStandardDialog() {
genericPopupDialog(
'Standard popup dialog example',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
'Close',
'500'
);
}
When I view the source code in a small test harness web app, I'm seeing the ID of the button which closes the dialog;
btnCancel. However, when I incorporate this in a much larger web application, the button ID is not present in the rendered page, making automated testing a bit tricky. Both web apps are using jQuery UI v1.11.4 & jQuery v1.10.2. I'm fairly new to this aspect of JS, so any help would be greatly appreciated!