columbia
columbia

Reputation: 3

jQuery: function won't be executed until ajax call is complete

There's a TinyMCE textarea on my website. When i click the "Save" button, the function save(); is called. It should lock the TinyMCE Editor while saving (assume save.php takes a few seconds to load). Even though formProgress(1) is the first line of code in my save() function, it won't be executed right away. The editor just gets locked for a moment AFTER the ajax call has completed. Anyone know how to fix that?

function save()
{
 formProgress(1); //why won't this be executed right away? for some reason i can see the result of this only when the ajax call is complete?!
 jQuery.ajax({
  url: 'save.php',
  type: 'POST',
  data: 'html=' + $('textarea[name=content_html]').tinymce().getContent(),
  completed: function() { formProgress(0); },
  async : false
 });
}

function formProgress(mode)
{
  if(mode == 1)
  {
    $('textarea[name=content_html]').tinymce().setProgressState(1);
  }
  else
  {
    $('textarea[name=content_html]').tinymce().setProgressState(0); 
  }
}

Upvotes: 0

Views: 379

Answers (3)

Nick Craver
Nick Craver

Reputation: 630379

It does complete right away, the issue is here:

async : false

The way async: false works also locks up your browser, so although everything before does happen before....but your UI is locked up and won't be updated until the XmlHttpRequest completes.

This is one of the main reasons not to use async: false whenever possible.

Upvotes: 3

Chinmayee G
Chinmayee G

Reputation: 8117

Try this function call asynchronously by using settimeout e.g.

function save()
{
    setTimeout("formProgress(1)",1000);
    // AJAX call
}

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

the setProgressState method accepts as parameter a time delay for appearing.

This implies that it is called with a setTimeout so this would explain why it has not yet been shown when the code moves to the next line.. (the ajax call)

Upvotes: 0

Related Questions