Hi everyone,
I’ve run through this tutorial to review its contents. There are a few things that might go wrong when connecting everything together. Here’s what I’d suggest doing:
Before trying to find the problem
Add the following code to the bottom of the javascript file you have:
console.log('Admin form: javascript loaded');
Add the following code at the start of the updateConfig function body:
function updateConfig() {
console.log('Admin form: running PUT to update values');
// the rest of the function content as in the tutorial
From here, ensure your browser’s developer tools are open while you load and interact with the page, so you can see the console log statements.
I don’t see the “javascript loaded” comment
The javascript file may not be loaded on the page. You can use your browser’s developer tools to search for that console log call to confirm this.
If the file is not on the page, it is probably because the necessary web-resource was not loaded.
Open your atlassian-plugin.xml file and look for the block of code starting with <web-resource key="...". In the tutorial, this is as follows:
<web-resource key="xproduct-admin-ui-plugin-resources" name="xproduct-admin-ui-plugin Web Resources">
<dependency>com.atlassian.auiplugin:ajs</dependency>
<resource type="download" name="xproduct-admin-ui-plugin.css" location="/css/xproduct-admin-ui-plugin.css"/>
<resource type="download" name="xproduct-admin-ui-plugin.js" location="/js/xproduct-admin-ui-plugin.js"/>
<resource type="download" name="images/" location="/images"/>
<context>xproduct-admin-ui-plugin</context>
</web-resource>
Here, the key we need to reference is xproduct-admin-ui-plugin-resources.
When using the web resource manager (WRM) to load web-resources, you must give it a “complete module key” so it can find your web-resource. A complete module key is in the form "<your-plugin-key>:<your-webresource-key>".
Using the values from the tutorial,
-
<your-plugin-key> is “com.atlassian.plugins.tutorial.xproduct-admin-ui-plugin”, and
-
<your-webresource-key> is “xproduct-admin-ui-plugin-resources”.
So altogether, the complete module key is com.atlassian.plugins.tutorial.xproduct-admin-ui-plugin:xproduct-admin-ui-plugin-resources.
In your velocity template, check that this is the value passed to the requireResource call. Using the values above, that would be:
$webResourceManager.requireResource("com.atlassian.plugins.tutorial.xproduct-admin-ui-plugin:xproduct-admin-ui-plugin-resources")`
This is the most likely cause of the problem, as the tutorial’s content does not reference the correct web-resource key. I’ll raise an issue about that with the content team.
I click the “Submit” button, but I don’t see “running PUT to update values”
The updateConfig function is not being called. This in turn means the “submit” callback set up via jQuery did not work.
The most likely reason for this will be when the handler is registered. The #admin form element needs to exist on the page before jQuery can bind a handler to it. jQuery may have tried to locate the element before it was added to the page, couldn’t find it, and silently failed.
To remedy this, you should do one of two things:
- Move the registration of the submit handler inside the document ready handler. The general shape of your code would be something like this:
(function ($) {
$(document).ready(function() {
// request the config information from the server
// ...
function updateConfig() {
// ...
}
$("#admin").on("submit", function (e) {
e.preventDefault();
updateConfig();
});
});
})(AJS.$ || jQuery);
- Use delegated event handling instead of binding explicitly to the form element.
// Instead of doing this, which requires the
// element to exist by the time this code runs...
$("#admin").on("submit", function(e) {
// Bind the handler to document, then only
// run it when the 'submit' event fired on the `#admin` element
$(document).on("submit", "#admin", function(e) {
I click the “Submit” button and I see the console message, but when I refresh, the values were not updated
Check the Network tab of your developer console. Confirm that a PUT request was made to the http://localhost:5990/refapp/rest/xproduct-admin/1.0/ URL, and check the HTTP status code for your submission was 204.
If the HTTP response was 500, the server received the values, but couldn’t understand them. The most probable reason is that the time value was not a number. Try again with a numeric value for the time field. Proper error handling is beyond the scope of what this tutorial is teaching. With that said, I think it deserves inclusion, so will see when our team could revise the content and include something for that.
If there was no PUT request, it means the updateConfig method did not run, or there was an error in the javascript. Check your browser console for errors. Since we are dealing with a form submission that refreshes the page, it may be necessary to alter your devtools config to persist console errors across page reloads.
I tried all the above, but it still isn’t working!
The best thing to do at this point would be to post your code somewhere like bitbucket or github and raise a separate community question around it.
I hope that helps!
Cheers,
Daz
