Recharger div sans rafraîchir la page principale

Question

d'abord merci pour votre temps. J'ai fait quelques recherches et trouvé beaucoup de questions similaires utiles comme le mien. Mais je ne peux toujours pas faire ce travail, j'ai une forme simple que je veux rafraîchir submiting, voici ce que j'ai essayé

Voici ma forme:

<div id="contact" class="contact"> 
 
    <div class="container"> 
 
<?php if(!empty($emailSent)): ?> 
 
    <div class="col-md-6 col-md-offset-3"> 
 
     <div class="alert alert-success text-center">Votre message a ete envoye avec succes.</div> 
 
    </div> 
 
<?php else: ?> 
 
<?php if(!empty($hasError)): ?> 
 
    <div class="col-md-5 col-md-offset-4"> 
 
     <div class="alert alert-danger text-center">Un erreur s'est produite, essayer a nouveau.</div> 
 
    </div> 
 
<?php endif; ?> 
 
    <div class="col-md-6 col-md-offset-3"> 
 
     <form action="<?php echo $_SERVER['REQUEST_URI']; ?>" id="contact-form" class="form-horizontal" role="form" method="post"> 
 
     <input type="text" name="form-name" placeholder="Nom" /> 
 
     <input type="email" name="form-email" placeholder="Email" /> 
 
     <input type="text" name="form-subject" placeholder="Objet" /> 
 
     <div class="clearfix"></div> 
 
     <textarea rows="3" name="form-message" placeholder="Message" /></textarea> 
 
     <div class="sub"> 
 
      <button id="envoyer" type="button" class="btn btn-default">Envoyer</button> 
 
     </div> 
 
     </form> 
 
    </div> 
 
<?php endif; ?> 
 
    </div> 
 
</div>

Et voici mon jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
$(function() { 
    $("#envoyer").click(function(evt) { 
    $("#contact").load("index.php") 
    evt.preventDefault(); 
    }) 
}) 
</script> 

Encore une fois merci pour votre temps précieux!

Answer 1

Si vous ne souhaitez pas utiliser un iframe avec votre formulaire, vous devriez utilisez ajax pour publier les données du formulaire sur le serveur et charger le message d'échec ou de succès du serveur, sans actualiser la page.

Pour publier des données sur l'utilisation du serveur, cette fonction jquery (expliqué et écrit ci-dessous):

$.ajax({ 
    type: "POST", 
    url: url, 
    data: data, 
    dataType: dataType, 
    success: successFunction, 
    error: errorFunction 
}); 

L'API: http://api.jquery.com/jquery.ajax/ AJAX peut envoyer une requête au serveur et recevoir des données sans rafraîchir la page entière, vous pouvez utiliser pour mettre à jour votre code HTML sur le client. J'ai fait une photo pour vous:

Commençons donc:

Dans votre formulaire, vous utilisez uniquement html et javascript:

<div id="contact" class="contact"> 
    <div class="container"> 

    <!-- here will appear after sending your form data --> 
    <!-- the answer with fail or success message --> 
    <span id="serverAnswer"></span> 

    <div class="col-md-6 col-md-offset-3"> 
     <form action="urlToFormSubmitPage.php" id="contact-form" class="form-horizontal" role="form" method="post"> 
     <input type="text" name="form-name" placeholder="Nom" /> 
     <input type="email" name="form-email" placeholder="Email" /> 
     <input type="text" name="form-subject" placeholder="Objet" /> 
     <div class="clearfix"></div> 
     <textarea rows="3" name="form-message" placeholder="Message" /></textarea> 
     <div class="sub"> 
      <button id="envoyer" class="btn btn-default">Envoyer</button> 
     </div> 
     </form> 
    </div> 
    </div> 
</div> 

Du côté du serveur que vous avez un php skript ou autre chose qui reçoit et enregistre les données de formulaire et génère la réponse, par exemple:

//read in the data with PHP and $_POST[...] 

//Do something with your data, for example save to database 

//echo fail or success 
<?php if(!empty($emailSent)): ?> 
    <div class="col-md-6 col-md-offset-3"> 
     <div class="alert alert-success text-center">Votre message a ete envoye avec succes.</div> 
    </div> 
<?php else: ?> 
<?php if(!empty($hasError)): ?> 
    <div class="col-md-5 col-md-offset-4"> 
     <div class="alert alert-danger text-center">Un erreur s'est produite, essayer a nouveau.</div> 
    </div> 
<?php endif; ?> 

maintenant écrire la fonction ajax:

$.ajax({ 
    type: 'POST', 
    ... 

... lire vos données de formulaire et l'URL de votre forme avec quelque chose comme ça (l'URL dans votre forme attribut action de l'élément HTML doit pointer vers votre page php) :

... 
    url: $('#contact-form').attr('action'), 
    data: $('#contact-form').serialize(), 
    ... 

... vous attend html de la page php:

... 
    dataType: 'html', 
    ... 

...et votre jquery ajax funtion devrait avoir un successFunction (qui est appelée sur la réponse du serveur) comme ceci:

... 
    success: function(data) { 
     //set your received html message from php page to your server answer html element 
     $('#serverAnswer').html(data); 
    }, 
    error: function() { 
     alert("something went wrong while sending data to server"); 
    } 
}); 

fonction ajax est prêt, déclencheront maintenant la ajax avec votre fonction de clic, vous avez déjà écrit:

Ce n'est pas une solution complète, je ne peux pas écrire le code entier pour vous, mais j'espère que ce petit tutoriel pourrait vous aider, pour résoudre votre problème.

Si vous voulez vérifier, si vos données postées sont envoyées à la bonne URL ou la réponse est correcte ou autre chose, utilisez les outils de développement de navigateur: Appuyez sur F12 et sous l'onglet réseau, vous trouverez des informations qui peuvent aider vous pour déboguer votre message ajax.

Answer 2

Vous pouvez utiliser un javascript location.reload()

comme ceci:

<button id="envoyer" onclick="location.reload()" type="button" class="btn btn-default">Envoyer</button> 

Voir violon: https://jsfiddle.net/cbtqwr5n/