Async $http.post request validation

Camunda 7 Topics Discussion & Questions
,
1

Hello!

Is it possible to execute an async request by $http.post inside camForm.on('submit') , something like this:

function postFunction(caseObjectData, evt) {
                return $http.post(webserviceUrl, caseObjectData, {
                    headers: {'Content-Type': 'application/json'}
                }).then(function successCallback(response) {
                    console.log(response);
                    console.log('Successfully transferred case object to web service');
                    evt.submitPrevented = false;
                }, function errorCallback(response) {
                    console.error(response);
                    console.error('Error during case transfer to web service: ');
                    evt.submitPrevented = true;
                });
            }

camForm.on('submit', function(evt) {

                postFunction(caseObjectData, evt);
});

The problem is that submit method executes before the postFunction and I cannot correctly in time define evt.submitPrevented = true or false

Thanks in advance!

Kind regards,
Deniss

2

Hi @Deniss_Makarenkov,

do you want to have both submit and custom ajax request in specific sequence upon form submission? Or just an AJAX request?

Cheers,
Askar

3

Hi @aakhmerov
Thanks for your reply :slight_smile:

http.post is an async request. So ideally I want it to finish and then the camForm.on('submit') to finish.

Currently I have a solution by using the jQuery.ajax with async: false, which in our days is probably a programming crime :smile:

Let me know what you have in mind!
Thanks and kind regards,
Deniss

4

Hi @Deniss_Makarenkov,

well theoretically to do that you would have to:

  • prevent default on event
  • trigger ajax call
  • after ajax call unbind listeners on form submission
  • trigger form submit
  • on form submitted bind listeners again

Though I think this is not the most optimal way. If you can, you should rather bind to some other event, not form submission. Form submission has a pretty strict mechanic, it’s a mess if you try to break inside of it.

Does that help you?
Askar

1 Like
5

@aakhmerov thanks!

I had a feeling this wouldn’t be a hello world task :smiley:
Another solution I had was to create a separate button like Submit Data which would do the POST and then return a boolean upon which the Submit button in the form would become active or not.

But then again it isn’t exactly the most convenient solution, so if you can, please elaborate a bit more on the internal stuff I have to adjust in order to do:

  • prevent default on event
  • trigger ajax call
  • after ajax call unbind listeners on form submission
  • trigger form submit
  • on form submitted bind listeners again

Thanks and kind regards,
Deniss

6

This topic is important not just for validation: In our Camunda Best Practices on Handling Data in Processes, we recommend to store payload data externally and only keep references as process variables. This leads to designs, where data that has been entered in forms is first sent to a service and then a variable or the business key is used to store the reference to the stored entity.

I tried the blocking POST request with jQuery:

camForm.on('submit', function() {
  // this callback is executed when the form is submitted, *before* the submit request to
  // the server is executed

  // store data in domain service and retrieve business key
  $.ajax({
    url: '/api/engine/engine/default/history/activity-instance/count',
    method: 'POST',
    async: false,
    data: JSON.stringify({ finished: true }), 
    contentType: 'application/json',
    dataType: 'json',
    success: function (data) {
      camForm.businessKey = data.count
    }
  });

});

It works, but since blocking XHRs are deprecated and will soon disappear from Browsers, we should think about adding a proper API for additional asynchronous operations before submit.

1 Like
7

Hello,
Is there any update on this topic?