How to trigger a Javascript function through a form's POST method?

Taylan · September 21, 2020, 1:49pm

Hello there,

I am quite new to the Velocity Template / jQuery part, therefore I would like to know how to pass data from a form’s post method to a js function. In a plugin

I am trying to initialise a Banner which has its content set by the form. The form triggers an overriden doPost method from my servlet.

tjoy · September 22, 2020, 1:30pm

The doPost will then trigger a full page refresh, right?
So do you want to trigger this function before or after the refresh?

Or are you trying to avoid this page refresh?

Taylan · September 22, 2020, 1:49pm

Oh hello there, @tjoy

Yes that is correct.
Before refresh, it refreshes so the newly posted banner can be included after the refresh.
I currently have the user input in a variable called “bannerBody”, which is also available for my do Post method:

 @Override
    protected void doPost(final HttpServletRequest req, final HttpServletResponse resp) throws ServletException, IOException {
        networkService.redirectUnauthorizedUsers(req, resp);
        System.out.println(req.getParameter("bannerBody")); // this prints out exactly what the user put in in Wiki format
        resp.sendRedirect("myPluginURL");
    }

Also do you know a good way to convert this WikiMarkup to plain HTML as well? Because I think that is what the banner needs.

tjoy · September 22, 2020, 1:58pm

If I understood correctly,
The best way would be to use WRM data: https://developer.atlassian.com/server/framework/atlassian-sdk/adding-data-providers-to-your-plugin/

Other (old) way would be to write the information in a <meta> tag.

Regarding the question about WikiMarkup, there is a rest endpoint called render that can do it,
I found an issue related to docs for it [JRASERVER-38731] Add /render/ to REST API v2.0 - Create and track feature requests for Atlassian products. , not sure if it is well documented

Taylan · September 23, 2020, 10:14am

I have managed to get the Method to trigger. Main problem was that I was using an <input> tag instead of a <button> tag, changing it made the method trigger.
Also I was mixing up / misunderstanding the different possibilities here.
Submitting the form itself does what the doPost() Method from the servlet tells it to do, which is separate from the method I wanted to trigger, which was in a JavaScript file.

The solution:
First of all import the JavaScript file properly, this can be done in 2 ways in a Velocity Template:

Plain way:

<head>
      <script>
        #include("js/myPlugin.js")
      </script>
</head>

WRM way:
First one needs the web resources configured:

<web-resource key="myPlugin-resources" name="myPluginWeb Resources">
        <dependency>com.atlassian.auiplugin:ajs</dependency>
        <resource type="download" name="myPlugin.js" location="/js/myPlugin.js"/>
        <resource type="download" name="myPlugin.css" location="/css/myPlugin.css"/>
        <resource type="download" name="images/" location="/images"/>
        <context>myPluginContext</context>
    </web-resource>

After that add this line to your template:

<head>
      $webResourceManager.requireResourcesForContext("myPluginContext")
</head>

Now you can assign an id to the submit button where you want the method to trigger.(In this case this button is in a form, but this will also work outside of forms)

<button class="button submit aui-button-primary" type="submit"
             id="my-plugin-submit-button"> Create
</button>

The js file:

AJS.$(document).ready(function () {
    jQuery("#my-plugin-submit-button").click(function (parameter) {
     // Do something
    });
});

Taylan · September 23, 2020, 10:22am

What I am trying to do right now is to have the JavaScript method return a value which should override the value given to the doPost() Method:

AJS.$(document).ready(function () {
    jQuery("#my-plugin-submit-button").click(function (bannerBody) {
        jQuery.ajax({
            contentType: 'application/json',
            type: 'POST',
            url: '/rest/api/1.0/render',
            async: 'false',
            data: '{"rendererType":"atlassian-wiki-renderer","unrenderedMarkup:bannerBody,"issueKey":""}',
            success: function (response) {
                bannerBody = response; // this is what I thought would update the value with what the response's return value is
            },
            error: function (response) {
                console.log(response);
            }
        });
    });
});

But this ends up using the following URL:
http://localhost:2990/jira/plugins/servlet/company/myPlugin/rest/api/1.0/render which does not work.
@tjoy as you mentioned the render method is barely documented

Taylan · January 21, 2021, 12:13pm

I would like to add to this for future reference. I have observed that in some cases where one uses a context name separated by dots like : de.my.com.context it fails to load resources properly.

mkemp · January 22, 2021, 9:48am

Hey @Taylan ,

Re: wrong URL using jquery.ajax (jQuery 1.8.3 - version will probably change with products and their versions)

With a / at the start of the URL string, it’ll replace the entire path in when performing the request and without the forward-slash, the path will be relative to the current location. Our products could have a context path (e.g /jira at the start of the path) so it’s best to set the request URL to something like; (in a template string) /${AJS.contextPath()}/${RENDERER_ENDPOINT}

I’m not sure which versions of the products you’re working with, but we’re moving contextPath() function to the WRM.

The web-resource key you’ll probably want to require is: "wr!com.atlassian.plugins.atlassian-plugins-webresource-plugin:context-path" and you’ll want to require 'wrm/context-path'

Sorry for the late reply,
Michael

mkemp · January 22, 2021, 9:56am

Hmmm, do you mind if I ask for the following details so we can reproduce the issue?

Product
Product version
Page tested
Context name

In the meantime, using dashes - as a separator should work. Please let us know how you go.

Michael

Taylan · January 22, 2021, 1:21pm

Hi, @mkemp

thank you for your answer, I am sure it might help out someone in the future.
I have since then moved on in this implementation in favour of an another, therefore am not exactly able to test your suggestion for this section.

Taylan · January 22, 2021, 1:31pm

Information maybe that can help you reproduce the context issue with dots:

Jira Server
Jira version 8.12.1 / Jira SDK 8.2.6
A page that uses a class from a specific CSS file that comes from the context.
In my case : 2990/jira/plugins/servlet/company/servletName
<context>de.company.jira.pluginName</context>
as you said using - helps with the issue

mkemp · February 8, 2021, 10:31am

Whoops, very sorry about the late reply (I had email notifications turned off).

No problem at all.

mkemp · February 8, 2021, 10:57am

I still couldn’t reproduce it;

Jira Server
Version 8.12.1
AMPS 8.2.1 + Atlassian Server SDK 8.2.6
Context name with . (fullstop) in it
Template being rendered from a servlet which then in turn requires the context

This plugin I’m testing with has CSS too which is loading properly. This is using the WRM webpack plugin which outputs a webresource definition with the CSS file under the same webresource. The resources are even being required by using the context name with dots in it. If you can think of anything else that’d be great, but I understand if you’ve moved on now.

Taylan · February 9, 2021, 4:23am

Hey @mkemp,

thank you for trying to reproduce the issue and your effort.
I will try to provide something useful (hopefully) soon when I have the capacity. No worries about the reply speed, we both have the email notifications off : )