Question

My goal is, when we press command button, it needs to execute onclick methods which call another click button for uploading files. Once the uploading files are finished, it needs to execute the action method. But currently, though it is calling the function, it is executing the action method asynchronously and completes even before the file upload finishes. How can we make it synchronous such that, only when onclick method finishes, it needs to execute the action method?

<p:commandButton styleClass="shareButton" ajax="true"
                 action="#{topicController.createTopic}"
                 onclick='javascript:setTopicDetails();uploadFile();'
                 value="Share"
                 oncomplete="javascript:complTopic(xhr, status,args);"
                 partialSubmit="true">
</p:commandButton>

function uploadFile(){
    $('.progress').show();
    $('button.start[type=button]').click();
}

Answer 1

try callback function something like below code
e.preventDefault(); //prevents default click action
and manually trigger click event once you upload is complete.

function uploadFile(){
e.preventDefault(); 
$('#upload').load('ajax/test.html', function() {
  alert('upLoad completed.');

//call functions which need to be called after upload completed..
setTopicDetail();
 $('.progress').show();
    $('button.start[type=button]').click();

// click commandlink here.
$('commandlink').click();
});

}