Bootstrap successful alert in updating record Ajax

后端 未结 1 1876
再見小時候
再見小時候 2021-01-07 12:06

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

index.php

 <         


        
相关标签:
1条回答
  • 2021-01-07 12:40

    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):

    <center><div id="result"></div></center>
    

    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('<div class="alert alert-success"><button type="button" class="close">×</button>'+info+'</div>');
    
     //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

    0 讨论(0)
提交回复
热议问题