How to pause between two javascript commands during the same onchange event

Question

I have a input with an onchange event:

<input type="text" value="2014-01-01" class="datepicker dateDashboard" onchange="repartiteur('DatesDashboard',$(this));document.location.href='index.php?menu=17|30&options=opt';" name="DateDebutDashboard">

function appelAjax(data)
 {$.ajax(
   {type: "post",
    data: data,
    url: 'index_ajax.php'
    });
  }

function repartiteur(action,this)
 {switch (action)
   {case 'DatesDashboard':
      data = (
       {'action' : action,
        'champ' : this.attr('name'),
        'date' : this.val()
        });
      break;}
  appelAjax(data);}

the desired goal is that when I change the date in the input, the date is sent via AJAX to change a value in the database, then the page is reloaded according to new values in database.

the problem is that sometimes, the ajax call by repartiteur takes longer to react and when the page reloads (with the second inline javascript call), the changes have not yet occured in the database.

the QUESTION: How can I, if it is in any way possible, delay the second javascript part (the reload document) to make sure the ajax call have finished updating the database before the page reloads?

checking this answer How to implement a lock in JavaScript I feel there some way to do that, but this answer applies to different events, while I want the delay to happen in the same event but between different javascript lines.

I know about event.stopPropagation but I don't want the event to stop, it must continue after the ajax call.

EDIT - here the php codes which receives the call:

$action = $_POST['action'];
switch ($action)
 {case 'DatesDashboard':
    $codeUSR = $_SESSION['usr'];
    $champ = $_POST['champ'];
    $date = $_POST['date'];
    $env = unserialize(getValue('Preferences','ps_personnes',"codeUSR='$codeUSR'"));
    $env['nav']['Contrat']['dates'][$champ] = $date;
    sauverEnvironnement($env,$oDB,'Preferences');
    break;}

the database definition:

$oDB = new PDO("mysql:host=$gSERV;dbname=$gBASE;charset=utf8",$gUSER,$gPASS);
$oDB->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
$oDB->setAttribute(PDO::ATTR_EMULATE_PREPARES,FALSE);

You cannot make JavaScript code "wait". But you *can* put your call to "repartiteur" in the completion callback to the ajax call. That way you ensure that it will not start until the ajax response has been received. — Pointy, Feb 03 '14 at 19:04
hmmm... you mean repartiteur will actually create the data for the ajax, call ajax with the data then be called again after the call? will give it a thought. — Félix Adriyel Gagnon-Grenier, Feb 03 '14 at 19:07
Why not simply trigger event programmatically after the ajax call? `onreadystatechange = function(e) { /* trigger on change here */ };` — Givi, Feb 03 '14 at 19:07
because this ajax function will be called by lots of different specific functions, and have to react in lots of different ways. I could of course pass more parameters to my specific functions which would then affect the way in witch `onreadystatechange` will react, but it spoils the purpose of simplifying the flow of everything — Félix Adriyel Gagnon-Grenier, Feb 03 '14 at 19:10

score 2 · Accepted Answer · answered Feb 03 '14 at 19:11

You want a nested callback function, something like this:

$.ajax({
  url: 'blahblah'
}).done(function() {
    $.ajax({
      url: 'secondlayer'
    }).done(function() {
        innerstuff();
    });
  })
});

The explanation is, you only do your second function after your first function is done (or completes successfully, up to you). Conversely, you only call your final (innerstuff) function when the second function has fully completed as well.

Source: http://api.jquery.com/jquery.ajax/

score 0 · Answer 2 · answered May 05 '14 at 12:22

so with timeout() I set the javascript to reload the page so that it "waits" before taking action:

<input type="text" value="2014-01-01" class="datepicker dateDashboard" onchange="repartiteur('DatesDashboard',$(this));setTimeout(document.location.href='index.php?menu=17|30&options=opt',500);" name="DateDebutDashboard">

hence the changes in the db are now done when the page reloads.

How to pause between two javascript commands during the same onchange event

2 Answers2