naghal February 2016

ajax callback display function closing too fast

I have a funcction in ajax callback that display a div with bootstrap alert inside. The problem is that it only stay for about half a second before it dissaspear. I'd like it to stay for 2 seconds. Async is set to false because I need form input to reload themself with the updated values and if it's set to true, I have to manually refresh the page with F5 to see the updated version.

function

$('#btnEnregistrerMembre').on('click', function (e) {
    $.ajax({
        async: false, type: 'POST', url: 'functionPHP.php', data: {
            userID: document.getElementById('id').value, nomUtilisateur: document.getElementById('nomUtilisateur').value, estActif: +document.getElementById('actif').checked, estAdmin: +document.getElementById('admin').checked, updateMembre: 'updateMembre'
        },
        success: function (msg) {
            ajouterMessage('messageArea', 'succes', 'Les modifications ont étés prises en compte.');
            // alert('succes ajax');
        },
        error: function (err) {
            ajouterMessage('messageArea', 'danger', 'Les modifications ont échouées.');
        }
    });
});

AjouterMessage

function ajouterMessage(locationID, type, message) {
    var endroit = document.getElementById(locationID);

    var element = document.createElement('div');
    if (type == 'danger')
    {
        element.className = 'alert alert-danger';
        element.innerHTML = '<strong>Erreur!</strong>' + ' ' + message;
    }
    else
    {
        element.className = 'alert alert-succes';
        element.innerHTML = '<strong>Succès!</strong>' + ' ' + message;
    }
    endroit.appendChild(element);
}

Thank you for your help.

Answers


thomaspsk February 2016

Your problem is that async is set to false. I know you want the page reload effect, but you are trying to set a value in the old page before the reload.

What is happening:

  1. You send a request synchronously
  2. receive the response from the server
  3. You handle the response message and show and appropriate message
  4. The web browser also handles the response from the server (remember, it's synchronous!)
  5. The page reloads because the request was synchronous and not asynchronous and your message is lost

You have a few options here...

Option 1 (recommended): You can send the request asynchronously and return whatever relevant data you need to be refreshed in the response.

Option 2: Set a cookie with a flag to indicate what message should be set upon refresh of your page. Remember to clear the flag after reading it.

Si c'est plus facile pour toi, je peux traduire ma réponse en français.

Edit: It should be noted that synchronous AJAX is altogether not that useful. It stands for Asynchronous Javascript And XML. If you want to send a synchronous request, a simple form submission or link with some GET parameters would probably be far more simple.


naghal February 2016

Thank you for this very clear answer. However, i have a return value in the function that update the database, but how can I get the values in the modifierUtilisapeur.php page? Here is some code on the function if it can help:

update

function updateMembre($id,$nomUtilisateur,$status,$admin){
$caught = false;
$connexion = Connexion(NOM, PASSE, BASE, SERVEUR);

$requete = "update utilisateur set nomUtilisateur = '".addslashes($nomUtilisateur)."', estActif = '".$status."',estAdmin = '".$admin."' where id ='".$id."' ;";


try{
ExecRequete($requete, $connexion);}
catch (Exception $e){
$caught = true;
echo '<div class="alert alert-danger">
  <strong>Erreur!</strong> Le nom d\'utilisateur existe déjà.
</div>';
}
finally{
if (!$caught){
    echo '<div class="alert alert-success">
  <strong>Succès!</strong> Les modifications ont étés prises en compte.
</div>';
    }
}
return getMembre($id);
}

getMembre

function getMembre($nomUtilisateur){
$connexion = Connexion(NOM, PASSE, BASE, SERVEUR);
    $requete = "SELECT * FROM utilisateur where nomUtilisateur = '".$nomUtilisateur."';";

    $resultat = ExecRequete($requete, $connexion);
    $resultat->data_seek(0);
    $row = $resultat->fetch_assoc();
    return $row;
}

Post Status

Asked in February 2016
Viewed 1,743 times
Voted 7
Answered 2 times

Search




Leave an answer