title: Bootstrap alert not showing after php-ajax form submission
body: <p>I am trying to show alert when the user submits the form, whether it's a success or not. The script is working fine in submitting the data but the alert is not showing.The code is-</p>
  
  <p>IMPORTANT- The form is in bootstrap modal.</p>
  
  <p>HTML is:</p>
  
  <pre><code>&lt;div class="col-md-12"&gt;
       &lt;form id="inquiry-form" method="post" action="inq.php" role="form"&gt;
           &lt;div class="messages"&gt;&lt;/div&gt;
           &lt;div class="controls"&gt;
               &lt;div class="form-group"&gt;
                   &lt;label for="Name"&gt;Name&lt;/label&gt;
                   &lt;input type="text" name="name" class="form-control" id="exampleInputEmail1" placeholder="Name" required="required" data-error="Name is required."/&gt;
                   &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
               &lt;/div&gt;
           &lt;/div&gt;
          &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My php Script is:</p>
  
  <pre><code>try
  {
  $sql = mysqli_query($conn,"INSERT INTO wig (fname, lname, email,msg)
  VALUES ('$fname', '$lname', '$email','$msg')");
  
  
  
  $responseArray = array('type' =&gt; 'success', 'message' =&gt; $okMessage);
  }
  catch (\Exception $e)
  {
  $responseArray = array('type' =&gt; 'danger', 'message' =&gt; $errorMessage);
  }
  
  if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &amp;&amp; strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
  $encoded = json_encode($responseArray);
  
  header('Content-Type: application/json');
  
  echo $encoded;
  }
  else {
  echo $responseArray['message'];
  }
  </code></pre>
  
  <p>And the jquery to handle the form submission is:</p>
  
  <pre><code>$(function () {
  
  $('#inquiry-form').validator();
  
  $('#inquiry-form').on('submit', function (e) {
      if (!e.isDefaultPrevented()) {
          var url = "inq.php";
  
          $.ajax({
              type: "POST",
              url: url,
              data: $(this).serialize(),
              success: function (data)
              {
                  var messageAlert = 'alert-' + data.type;
                  var messageText = data.message;
  
                  var alertBox = '&lt;div class="alert ' + messageAlert + ' alert-dismissable fade in role=alert"&gt;&lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;' + messageText + '&lt;/div&gt;';
                  if (messageAlert &amp;&amp; messageText) {
                      $('#inquiry-form').find('.messages').html(alertBox);
                      $('#inquiry-form')[0].reset();
                  }
              }
          });
          return false;
      }
  })
  });
  </code></pre>