• Like Rating with Jquery and Ajax

    Database Design :-

    1
    2
    3
    4
    5
    
    CREATE TABLE messages(
    id INT PRIMARY KEY AUTO_INCREMENT,
    message TEXT,
    up INT,
    down INT);


    index.php :-
    Contains javascript, PHP and HTML code. $(“.like”).click(function(){}- link is the class name of anchor tags(Like and Dislike). Using element.attr(“id”) calling button name and value((messsage Id)). Notice here anchor tag names(up and down).

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ ajax/libs/jquery/1.4.2/jquery. min.js"></script><script type="text/javascript">// <![CDATA[
    $(document).ready(function()
    {
    $(".like").click(function()
    {
    var id=$(this).attr("id");
    var name=$(this).attr("name");
    var dataString = 'id='+ id + '&#038;name='+ name;
    $("#votebox").slideDown("slow");
     
    $("#flash").fadeIn("slow");
     
    $.ajax
    ({
    type: "POST",
    url: "rating.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
    $("#flash").fadeOut("slow");
    $("#content").html(html);
    }
    });
    });
     
    // Close button action
    $(".close").click(function()
    {
    $("#votebox").slideUp("slow");
    });
     
    });
    // ]]></script>//HTML Code <a class="like" id="1" href="#" name="up">Like</a> -- <a class="like" id="1" href="#" name="down">Dislike</a>
    X

    Loading……..

    rating.php :-

    Contains PHP code. If name = up it will update UP else DOWN

    1
    
     

    CSS :-

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    
    #votebox
    {
    border:solid 1px #dedede; padding:3px;
    display:none;
    padding:15px;
    width:700px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    }
    #greebar
    {
    float:left;
    background-color:#aada37;
    border:solid 1px #698a14;
    width:0px;
    height:12px;
    }
    #redbar
    {
    float:left;
    background-color:#cf362f;
    border:solid 1px #881811;
    width:0px;
    height:12px;
    }
    #close
    {
    float:right; font-weight:bold;
    padding:3px 5px 3px 5px;
    border:solid 1px #333;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    }
    Tags:

Comments on this post

Leave a Reply

  • Security Code :


    − one = 7