Live Update and Delete Records with Animation Effect using Jquery and Ajax.

    Rating: ★★★★☆
    View: 185
    Download: 156
    Từ khóa:

    Database Table Details: 

    CREATE TABLE messages(
    msg_id INT AUTO_INCREMENT PRIMARY KEY,
    msg TEXT
    );

    update_delete.php
    Contains javascript and HTML code update button with class "update_button" and textarea with id "content". When a user click update button the new message is display to top of the oltimeline list with an id "update" with an animated slide Down effect with jQuery and Ajax. 

    If you want fadeIn and fadeOut effect just replace the word "slideDown" to "fadeIn" and "slideUp" to "fadeOut" in this following script.

    
    
    // HTML code
    

    What are you doing?


    // Display old updates form messages table.

    update_data.php
    Contains simple PHP Code displays recently inserted record details from the database.

    
    
  • X
  • delete_data.php
    Contains PHP code. Delete record from the database.

    CSS Code

    *{margin:0;padding:0;}
    ol.timeline{
    list-style:none;font-size:1.2em;
    }
    ol.timeline li{ 
    display:none;position:relative;
    padding:.7em 0 .6em 0;
    border-bottom:1px dashed #000;
    line-height:1.1em; 
    background-color:#D3E7F5;
    height:55px;
    width:499px;}
    ol.timeline li:first-child{
    border-top:1px dashed #000;}

     

    loading Đang tải...

    template được ưa chuộng