Form submit with ajax fails despite 200 response + AP.messages

Jira Development Jira Cloud
, ,
1

Hi,

I’m working on a JIRA Cloud addon and I’m having some issues with the workflow of:

  1. Submit form in a Dialog via ajax
  2. Flash a message based on result

Currently, the form submits, the ajax call gets made successfully, and the addon server responds with JSON and a 200 response code.

However, the ajax .fail is triggered with a status of 0 and statusText of “error”.

Code:

app.js:

AJS.toInit(function () {

    AP.require(['dialog', 'messages'], function (dialog, messages) {
        AJS.$("#dialog-show-button").click(function () {
            dialog.create({
                key: 'create-item-dialog-key',
                size: 'large',
                chrome: false
            });
        });
        // Hides the dialog
        AJS.$("#dialog-close-button").click(function (e) {
            e.preventDefault();
            dialog.close()
        });

        AJS.$('#create-item-form').on('aui-valid-submit', function (e) {
            var itemData = {
                name: AJS.$("#item-name").val(),
                description: AJS.$("#item-description").val()
            };
            var baseUrl = getBaseUrl();
            var returnToken = getToken();
            $.ajax({
                    beforeSend: function (request) {
                        request.setRequestHeader("Authorization", 'JWT ' + returnToken);
                    },
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    url: baseUrl + '/item',
                    type: "POST",
                    data: JSON.stringify(itemData)
                }).done(function (data) {
                    messages.success('Success!', 'item added');
                })
                .fail(function (data, statusText, three) {
                    messages.error('Error', 'There was a problem creating a item.')
                });
            e.preventDefault();
            dialog.close()
        });
    });
});

form html in dialog:

<form id="create-item-form" class="aui">
    <!-- Main dialog content -->
    <div class="aui-dialog2-content">
        <div class="field-group">
            <label for="item-name">item name<span class="aui-icon icon-required">required</span></label>
            <input class="text" type="text" id="item-name" name="item-name" title="item Name"
                    data-aui-validation-field
                    required
                    maxlength="1000">
            <div class="description"></div>
        </div>
        <div class="field-group">
            <label for="item-description">Description</label>
            <textarea class="textarea" name="item-description" id="item-description"></textarea>
        </div>
    </div>
    <!-- Dialog footer -->
    <footer class="aui-dialog2-footer">
        <!-- Actions to render on the right of the footer -->
        <div class="aui-dialog2-footer-actions">
            <button id="dialog-submit-button" class="aui-button aui-button-primary">Create</button>
            <button id="dialog-close-button" class="aui-button aui-button-link">Cancel</button>
        </div>
        <!-- Hint text is rendered on the left of the footer -->
        <div class="aui-dialog2-footer-hint">this is a hint</div>
    </footer>
</form>

Possibly related, the message (in this case, always the Error message) will show up in Safari but not Chrome.

Chrome gives me this in the console:
[Simple-XDM] Failed to validate origin: (my ngrok url)

Any advice is greatly appreciated. Thank you!

1 Like
2

What do these two methods return? Which baseUrl? The products or your add-ons? How is the returnToken generated? How does your application know to accept it?

In the applications that Atlassian writes we usually use a “Page Token”, signed by the add-on service to use for return calls like these. Is that what the token is?

Are you using any of our supported frameworks or is this your own code?

3

Thanks for the reply. getBaseUrl() was grabbing the atlassian product’s baseUrl, and the returnToken was being generated on the backend and passed along to the front end (stored in a meta field). The backend was able to accept it fine.

I’ve since switched to using axios, but I think this was some weird behavior of ajax (or maybe just a lack of understanding on my part).

4

I think that means your AJAX call is attempting to send the HTTP request to the Atlassian host application, not your add-on’s server. Try setting the url of the AJAX call to '/item'.

By the way, ACJS version 5, the version of the AP.blahblah stuff that’s out there now, has deprecated the AP.require function. Check out “Migrate to Atlassian Connect JavaScript V5”.
AP.messages has also been deprecated in favour of AP.flag.

5

Sorry, I misspoke. getBaseUrl is the URL of the add-on. The request was going through fine, the only problem was $.ajax was handling the response as an error despite it being 200.

6

Feel free to close this, as I’ve rewritten almost all of this code and it’s working with axios, AP.flag, etc.

1 Like