How to submit form within embedded form programmatically?

[Melissa Palmer]

Hi

Within Custom Javascript if you've set evt.submitPrevented = true; how do you get the form to submit and clear within the tasklist correctly? 

I'm looking at the details at [1] and have code such as below within my embedded form. All seems to work ok... however the UI is not being updated correctly. As in the Complete Button just stays as disabled and the form never really disapears off of the screen as it would without this custom javascript: 

<form role="form" name="form">
  <script cam-script type="text/form-script">
        // *********************************************************************************************
        // *****************************     FILE UPLOAD FUNCTIONALTIY     *****************************
        // *********************************************************************************************
        inject([ '$scope', '$http', 'Uri', function($scope, $http, Uri) {
            debugger;                      
           
            var BEFORE_UPLOAD = 'beforeUpload',
                UPLOAD_SUCCESS = 'uploadSuccess';
 
            $scope.status = BEFORE_UPLOAD;


            $http.get(Uri.appUri("engine://engine/:engine/task/" + camForm.taskId)).success(function(result) {
                $scope.processInstanceId = result.processInstanceId;
            });
           
            camForm.on('submit', function(evt) {                    
                function uploadComplete() {
                    $scope.$apply(function(){
                        $scope.status = UPLOAD_SUCCESS;
 
                        //now submit form???
                        evt.submitPrevented = false;
                        camForm.submit();
                    });
                }


                if ($scope.status == BEFORE_UPLOAD) {
                    evt.submitPrevented = true;
                   
                    // perform HTML 5 file opload (not supported by IE 9)
                    var fd = new FormData();
                    fd.append('data', $scope.file);
                    var xhr = new XMLHttpRequest();
                    xhr.addEventListener('load', uploadComplete, false);
                    xhr.open('POST', $scope.getVariableUploadUrl());
                    xhr.send(fd);
                }
            });
           
            $scope.setFile = function(element) {
                $scope.file = element.files[0];
            };


            $scope.getVariableUploadUrl = function () {
                return Uri.appUri('engine://engine/:engine/execution/'+$scope.processInstanceId+'/localVariables/attachement_fileName/data');
            };
        }]);
 </script>
 
 Some HTML goes here!
 <input type="file" class="form-control"  name="attachement_fileName" onchange="angular.element(this).scope().setFile(this)">
</form>

[1] http://docs.camunda.org/latest/api-references/embedded-forms/#custom-javascript-examples

Thanks in Advance

Melissa

[Sebastian Stamm]

Hi Melissa,

camForm.submit() will send the form to the server, but not refresh the UI. In order to submit the form properly, use $scope.complete() instead (this will call camForm.submit internally).

Cheers

Sebastian

[Melissa Palmer]

AWESOME! Thanks Sebastian that has worked.