Bootstrap successful alert in updating record Ajax

Question

I would like to use bootstrap alert in displaying success message in updating existing records. This is what I have:

index.php

 <         


        

Answer 1

If I got it right, you need two things:

1. Center the alert message.
2. Display the alert box only after button click.

For this you can omit adding the alert and alert-success class in the HTML itself. Change your HTML to (along with aligning of text):

Instead, we will add the class, once the text inside has been placed such as:

$("#submit_button").click( function() {
          $.post( $("#updateunit").attr("action"), 
            $("#updateunit :input").serializeArray(),function(info){ 
              $("#result").html(info); 
              //adding class
              $("#result").addClass("alert alert-success");
          });
      });

Fiddle

If you want the box to be centered too, make use of bootstrap classes:

 $("#result").addClass("alert alert-success offset4 span4");

Based on the grid system of Bootstrap 2.3, you can have 12 columns, so to make the box center, we will leave 4 columns from the left which is what offset4 does and make the length of the box to be 4 columns which is what span4 does.

Fiddle 2

Additional:

what if I want to automatically close the alert message if it passes 5 seconds? and display the close button inside the alert message

For a smoother solution, you can do:

 //adding a 'x' button if the user wants to close manually
 $("#result").html('
×'+info+'
');

 //timing the alert box to close after 5 seconds
 window.setTimeout(function () {
     $(".alert").fadeTo(500, 0).slideUp(500, function () {
         $(this).remove();
     });
 }, 5000);

 //Adding a click event to the 'x' button to close immediately
 $('.alert .close').on("click", function (e) {
     $(this).parent().fadeTo(500, 0).slideUp(500);
 });

Fiddle 3