Question

I have two javascript/jquery functions in my app, there is always refresh() function, which grabs data from database and redraw frontend view.

One of methods is sending data into PHP function, which makes simple insert to MySQL database, second edits it, here they are (they’re the same, so I post only one):

function insertedit()
{
$('.res').each(function()
{
    $.post("/controller/method/",{id: id},function(data,status,xhr)
    {
        if(status=="success")
        {
        }
    })
});     

refresh();
}

When I’m trying to insert data with this function, all works fine and my view is redrawing asynchronously, but when i’m trying to edit data with it – I have to refresh page to see updated view. I think, that edit operation takes more time than insert and my refresh function, which grabs data from SQL just grabs the old data (undeleted record) – how can I fix it?

EDIT

$(function()
{
 refresh();
});



function insertedit(){
  var $promises = [];
  $('.res').each(function()
  {

    $promises.push(
    $.post("/controller/metgod/",{id, id},function(data,status,xhr)
    {
        if(status=="success")
        {
        }
    })
    );
});     

$.when.apply($, $promises).then(function() {
    refresh();
});
}

Answer 1

Use promises

function insertedit()
{
  var $promises = [];

  $('.res').each(function(id){
    var $this = $(this);

    $promises.push(
      $.post("/controller/method/", {'id': $this.attr('id')}, function(data,status,xhr){
        $this.text(data); // success
      })
    );
  });

  $.when.apply($, $promises).then(function(){
    refresh();
  });     
}

See the fiddle here, it works http://jsfiddle.net/69eMp/4/