AJAX POST dans la même fenêtre au lieu de nouveau

Question

J'ai essayé de faire un formulaire de contact dans un modal bootstrap. Une alerte devrait apparaître juste après l'envoi du formulaire dans le modal. Cela fonctionne bien sur mon site que j'utilise pour les tests. Mais lorsque j'intègre le code sur mon site principal, l'alerte est affichée sous forme de texte dans une nouvelle fenêtre. Même code Réponse différente Qu'est-ce qui pourrait causer ce comportement?

HTML:

<div class="container"> 

    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

    <!-- Modal --> 
    <div id="myModal" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 

      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Modal Header</h4> 
       </div> 
       <div class="modal-body"> 
        <form id="contact-form" method="post" action="contact.php" role="form"> 

         <div class="messages"></div> 

         <div class="controls"> 

          <div class="row"> 
           <div class="col-md-12"> 
            <div class="form-group"> 
             <label for="form_name">Name</label> 
             <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" data-error="Firstname is required."> 
             <div class="help-block with-errors"></div> 
            </div> 
           </div> 
          </div> 
          <div class="row"> 
           <div class="col-md-12"> 
            <div class="form-group"> 
             <label for="form_email">Email</label> 
             <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" data-error="Valid email is required."> 
             <div class="help-block with-errors"></div> 
            </div> 
           </div> 
          </div> 
          <div class="row"> 
           <div class="col-md-12"> 
            <div class="form-group"> 
             <label for="form_message">Message *</label> 
             <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please,leave us a message."></textarea> 
             <div class="help-block with-errors"></div> 
            </div> 
           </div> 
           <div class="col-md-12"> 
            <input type="submit" class="btn btn-success btn-send" value="Send message"> 
           </div> 
          </div> 
         </div> 
        </form> 

       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 

     </div> 
    </div> 

</div> 
<!-- /.container--> 

PHP:

<?php 

// configure 
$from = 'noreplay@xy.de'; 
$sendTo = 'webmaster@xy.de'; 
$subject = 'New message from contact form'; 
$fields = array('name' => 'Name', 'email' => 'Email', 'message' => 'Message'); // array variable name => Text to appear in email 
$okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!'; 
$errorMessage = 'There was an error while submitting the form. Please try again later'; 

// let's do the sending 

try 
{ 
    $emailText = "You have new message from contact form\n=============================\n"; 

    foreach ($_POST as $key => $value) { 

     if (isset($fields[$key])) { 
      $emailText .= "$fields[$key]: $value\n"; 
     } 
    } 

    mail($sendTo, $subject, $emailText, "From: " . $from); 

    $responseArray = array('type' => 'success', 'message' => $okMessage); 
} 
catch (\Exception $e) 
{ 
    $responseArray = array('type' => 'danger', 'message' => $errorMessage); 
} 

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { 
    $encoded = json_encode($responseArray); 

    header('Content-Type: application/json'); 

    echo $encoded; 
} 
else { 
    echo $responseArray['message']; 
} 

JS:

$(function() { 

$('#contact-form').validator(); 

$('#contact-form').on('submit', function (e) { 
    if (!e.isDefaultPrevented()) { 
     var url = "contact.php"; 

     $.ajax({ 
      type: "POST", 
      url: url, 
      data: $(this).serialize(), 
      success: function (data) 
      { 
       var messageAlert = 'alert-' + data.type; 
       var messageText = data.message; 

       var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>'; 
       if (messageAlert && messageText) { 
        $('#contact-form').find('.messages').html(alertBox); 
        $('#contact-form')[0].reset(); 
       } 
      } 
     }); 
     return false; 
    } 
}) 

});

Answer 1

Le paramètre d'action sous forme balise action="contact.php" est de forcer la page à rafraîchir essayer d'utiliser cela comme balise form: -

<form id="contact-form"> 

et changer $(this).serialize() dans votre code postal ajax à: -

$('#contact-form').serialize()