• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

während Antwort vom Server Javascript einblenden

_R_A_L_F_

Mitglied
Hallo,

ich möchte folgendes realisieren:

1) mann drückt auf einen Button
2) es wird ein Inhalt in eine DB geschrieben
< während der Bearbeitung soll ein javascript Popup eingeblendet werden >
3) Information wird ausgegeben, dass Eintrag erfolgreich

Sowas kennt man ja von "Bestellung abschließen" und dann läuft eine Eieruhr oder so ähnliches damit der Benutzer weiß, es tut sich was.

Ich hab zwar schon ein bisschen was probiert aber das Problem ist, dass das Javascript Popup immer erst erscheint, wenn die Antwort vom Server kommt und damit Punkt 3 schon ausgegeben wird.

Wie muss ich das anstellen, dass die Information während dessen kommt?

Vielen Dank schon mal
 
Werbung:
Werbung:
Danke für eure Antworten.

Kann ich das ganze auch so lösen? Nutze als Alert Box Sweetalert

HTML:
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link href="css/sweetalert.css" rel="stylesheet">
    <script src="js/sweetalert-dev.js"></script>

<script>
$(document).ready(function(){
  $("#btnSubmit").click(function(){

       swal({
       title: "<small><span style='color:#088A29'>Button senden gedrückt.</span></small>",
       text: "Bitte warten Sie kurz",
       imageUrl: "img/wait.gif",
       timer: 8000,
       showConfirmButton: true,
       html: true  
       });  
 
  });
});
</script>
   
  </head>
 
Zuletzt bearbeitet:
Die komplette Seite wäre:

HTML:
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Titel</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">   
    <link href="css/style.css" rel="stylesheet">
    
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link href="css/sweetalert.css" rel="stylesheet">
    <script src="js/sweetalert-dev.js"></script>

<script>
$(document).ready(function(){
  $("#btnSubmit").click(function(){

        swal({
        title: "<small><span style='color:#088A29'>Button senden gedrückt</span></small>",
        text: "Bitte warten Sie kurz",
        imageUrl: "img/wait.gif",
        timer: 8000,
        showConfirmButton: true,
        html: true 
        }); 
 
  });
});
</script>   
    
  </head>
  <body>
  
<?php

// Button abschließen drücken
if (isset($_POST['senden']))
{

// Variablen füllen
$name = $_POST['name'];

echo $name;


    $meldung_fehler = '<div class="alert alert-danger text-center h4" role="alert"><strong>Meldung fehler</div>';
        

}
else
{
    $name = '';
    $meldung_fehler = '';
}

?>

      
      <div class="jumbotron">
       <div class="container">
        
        <?php echo $meldung_fehler; ?>

        <form method="post" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">

        <label>Name</label>
            <div class="input-group">
                <span class="input-group-addon"></span>
                <input type="text" class="form-control" placeholder="Name" name="name" value="<?php echo $name;?>">
            </div>
        <p class="text-center">
        <input type="submit" class="btn btn-lg btn-success" id="btnSubmit" name="senden" role="button" value="senden">
        <br>
        <br>
        </form>
        </p>
      </div>
      
      
      
      </div>
      <footer class="footer">
      </footer> 
      
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
Werbung:
Zurück
Oben