Apologies in advance for the newbie question as I believe this is actually a fairly simple issue. I am using JSOM and in my WebBart.ts file have a named function that queries a list and produces front-end output. It works without issues:

      private PopulateExistingVacancies(): void {

In a different function (triggered via an event listener), I do an asynchronous call:

    protected FinalizeVacancy(): void {


                // Execute the asynchronous operation and on success update status 
                // and attempt to run additional (pre-defined logic) 
                context.executeQueryAsync(function () {
                    (<HTMLDivElement>(document.getElementById("lblMsgInfo"))).innerText = "New Vacancy entry has been created";
                  function (sender, args) {
                    (<HTMLDivElement>(document.getElementById("lblMsgError"))).innerText =
                      "Error encountered adding new Vacancy entry: " + args.get_message();

On success, I would like to actually call PopulateExistingVacancies(), but I don't think this is possible (or at least it won't work).

So my question is, what is the proper way to call a pre-written function from an anonymous function which is executed upon an asynchronous success?

Thanks in advance.


Since you're using Spfx, why are you using JSOM? You should be using sphttp service and even better PnP JS for your tasks. Those libraries Wil handle the asynchronous calls for you, and Spfx provides you with the context already so you don't have to initialize context through JSOM.

| improve this answer | |
  • I will keep this in mind for web parts I develop myself. The issue here is that this is an existing web part. So rather than re-architecting it from scratch, I'd like to add the functionality by calling an existing function. – user6009780 Jun 6 at 1:49
  • You mentioned that the way you're doing it now isn't working. What errors are you getting? – Mohamed Derhalli Jun 6 at 11:26
  • I'm actually not getting any errors but the function that is being called doesn't seem to actually execute. If I call the function outside the async block, it refreshes a datagrid. But calling the same function from inside the success branch of the ExecuteQueryAsync doesn't do anything. In fact, even the intellisense doessn't pick up the name of the function to be called. This makes me think that somehow inside an async block, it is unaware of anything that is named/static. – user6009780 Jun 8 at 2:04

Mohamed - following your suggestion, I re-programmed the web-part using PnP JS and the grid refresh works without issues. I'm still not sure why this is a problem with the original JSOM setup but with PnP - I was able to plug it into the list item addition success without any issues. Thank you very much.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.