asked on March 18, 2021
Hi,
In our implementation we have customized the Save button functionality to present a popup window that allows the user to enter a filename. This was working correctly up until maybe a couple of weeks ago and no code was changed on our end.
Here is the relevant JS code from our Save button handler:
var dialog = this.popupManager.createPopup();
dialog.content.classList.add("fm-popup-w500");
dialog.setTitle('@Resources.Resources.SaveReportToServer');
dialog.setToolbar([{
id: "fm-btn-save",
label: Labels.save,
handler: persistFileHandler,
isPositive: true
},
{
id: "fm-btn-cancel",
label: Labels.cancel,
handler: deleteTmpFileHandler
}
]);
var content = document.createElement("div");
var textInput = document.createElement("input");
textInput.type = "text";
var options = this.pivot.getOptions() || {};
var isFlatTable = (options.grid && options.grid.type == "flat");
textInput.value = "myFile";
content.appendChild(textInput);
dialog.setContent(content); debugger;
this.popupManager.addPopup(dialog.content);
Once we reach this last line where we are calling "addPopup", we get the following JS error in the console:
flexmonster.toolbar.js?2.8.28:3102 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at FlexmonsterToolbar.PopupManager.addPopup (flexmonster.toolbar.js?2.8.28:3102)
at FlexmonsterToolbar.flexmonsterServerSave (eval at globalEval (jquery?v=p85aBL4VVbxf_eVepQGg9YS3bEAHQ1F8BJegV7d-42A1:1), <anonymous>:23:620)
at HTMLAnchorElement.<anonymous> (flexmonster.toolbar.js?2.8.28:2814)
Did something change in a recent update with your popup API that would cause this error to occur? If so, what is the correct way of implementing this now?
⋅ March 19, 2021
Hello,
Thank you for contacting us.
We would like to confirm that internal changes to the Toolbar lead to this exception.
We suggest modifying the last line of the provided code in the following way to fix the issue:
this.popupManager.addPopup(dialog.content); -> this.popupManager.addPopup(dialog);
Please note that further updates of the Toolbar may have an unexpected impact on the custom parts if you want to keep updating the Toolbar along with the component itself. The recommended approach is to customize the Toolbar from the outside. It would imply creating the pop-up manually (without the internal popupManager); still, this approach independent of updates and internal changes.
Please see our documentation to learn the recommended approach to customize the Toolbar: https://www.flexmonster.com/doc/customizing-toolbar/.
For example, you would need to overwrite the "Save" button handler and create the desired pop-up manually in your case.
Please let us know if it works for you.
Our team is looking forward to hearing your feedback.
Regards,
Illia
⋅ March 24, 2021
Thank you Illia. This was very helpful. I've implemented an external popup instead to avoid any future issues
