Community resources
Community resources
Community resources
Open Dialog, Refresh Content within Servlet Plugin
Hello everyone,
I have just created a servlet plugin and so far everything works. On this page I have a table with entries and would like to create a button to add a new entry. The entries come from the database and are already displayed. As soon as you press this button, a dialog window should appear, where you have to enter the name of the new entry for example.
Until now I realized that I do the iteration in my velocity page and pass the list of current entries via the context.
@Scanned
public class AdministrationServlet extends HttpServlet{
private static final Logger log = LoggerFactory.getLogger(AdministrationServlet.class);
...
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
...
Map<String, Object> context = new HashMap<>();
context.put("ref", this);
...
templateRenderer.render(pageVM, context, resp.getWriter());
...
public void onCreate() {
log.info("CREATED CALLED !!!!!!!!!!!");
}
I read that I have to put this into the context in order to call a java method (onCreate) from the velocity page. I guess, this method needs some kind of parameters (the vales from the dialog, but I am not quite sure if that is the correct way the archive this).
This is my velocity page
<html>
<head>
<title>Team Overview</title>
<meta name="decorator" content="atl.general">
<script language="JavaScript" type="text/javascript">
AJS.$("#dialog-show-button").click(function(e) {
e.preventDefault();
AJS.dialog2("#demo-dialog").show();
});
// Hides the dialog
AJS.$("#dialog-submit-button").click(function (e) {
e.preventDefault();
AJS.dialog2("#demo-dialog").hide();
});
function newTeamClick() {
$ref.onCreate();
console.log("Hello");
}
</script>
</head>
<body class="page-type-admin">
<div class="content-container">
#parse("/templates/administration/navigation.vm")
<div class="aui-page-header" style="padding: 20px">
<div class="aui-page-header-inner">
<div class="aui-page-header-main"><h1>Teams</h1></div>
<div class="aui-page-header-actions" id="dash-options">
<div id="dash-throbber" class="throbber"> </div>
<button id="dialog-button" class="aui-button" onclick="newTeamClick()">Add new team</button>
</div>
</div>
</div>
<!-- Create a trigger which will be used by the JavaScript -->
<button id="dialog-show-button" class="aui-button">Show dialog</button>
<section id="demo-dialog" class="aui-dialog2 aui-dialog2-small aui-layer" role="dialog" aria-hidden="true">
<header class="aui-dialog2-header">
<h2 class="aui-dialog2-header-main">Captain...</h2>
<a class="aui-dialog2-header-close">
<span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span>
</a>
</header>
<div class="aui-dialog2-content">
<p>We've detected debris of some sort in a loose orbit.</p>
<p>I suggest we beam a section aboard for analysis...</p>
</div>
<footer class="aui-dialog2-footer">
<div class="aui-dialog2-footer-actions">
<button id="dialog-submit-button" class="aui-button aui-button-primary">Make it so</button>
</div>
</footer>
</section>
</body>
</html>
Actually I have two buttons in order to play around. The first Button "Add new team" I tried just to call the java method. The log output workes, but the output of the java method does not show up.
The other button "Show dialog" I copied from some tutorial, but nothing happens at all.
Besides, I am not quite sure how to proceed best. As soon as the user has entered a name in the dialog and clicks on "Save", the dialog should be closed. Furthermore, the information of the dialog has to be given to the Java class so that it can save the information in the database. In the end, the page will probably have to be re-rendered so that the new entry appears.
Is there an example of what is halfway current and works?
Thank you very much!
Hauke