jquery - how can i make live Like button with Asp.net MVC 5 and Ajax -

i new @ stackoverflow , first question.

i making first blog site, , want button, facebook.

2 problems button.

1. it wont update counts in articles same data-id. avaible update (this) article-link

2. when user likes/dislikes article, should able unlike without refreshing page. because wont check if there data in database without refreshing page. how can without refresh?

controller:

        public string likethis(int id)     {         article art = db.articles.firstordefault(x => x.id == id);         if (user.identity.isauthenticated || session["username"] != null)         {             var username = user.identity.name;             member m = db.members.firstordefault(x => x.username == username);             art.likes++;             like = new like();             like.articleid = id;             like.userid = m.id;             like.likeddate = datetime.now;             like.liked = true;             db.likes.add(like);             db.savechanges();          }          return art.likes.tostring();     }     public string unlikethis(int id)     {         article art = db.articles.firstordefault(x => x.id == id);         if (user.identity.isauthenticated || session["username"] != null)         {             var username = user.identity.name;             member m = db.members.firstordefault(x => x.username == username);             l = db.likes.firstordefault(x => x.articleid == id && x.userid == m.id);             art.likes--;             db.likes.remove(l);             db.savechanges();          }         return art.likes.tostring();     } 

view:

                        <li>@{                          int userid = convert.toint32(session["id"]);                          if (!user.identity.isauthenticated)                         {                             <i class="fa fa-heart-o fa-lg"></i><span>(@art.likes)</span>                          }                         else if (art.likes1.any(x => x.userid == userid && x.articleid == art.id) || ajax.viewbag.liked == true)                         {                             <a href="javascript:void(0)" class="unlike" data-id="@art.id"><i class="fa fa-heart fa-lg text-danger"></i><span>(@art.likes)u</span></a>                         }                         else                         {                             <a href="javascript:void(0)" class="like" data-id="@art.id"><i class="fa fa-heart-o fa-lg"></i><span>(@art.likes)l</span></a>                         }                         }                     </li> 

ajax:

        $(document).ready(function () {         //like         $("a.like").click(function () {             var id = $(this).data("id");             var link = "/article/likethis/" + id;             var = $(this);             $.ajax({                 type: "get",                 url: link,                 success: function (result) {                     a.html('<i class="fa fa-heart fa-lg text-danger"></i> (' + result + ')').removeclass("like").addclass("unlike");                 }             });         });         //unlike         $("a.unlike").click(function () {             var id = $(this).data("id");             var link = "/article/unlikethis/" + id;             var = $(this);             $.ajax({                 type: "get",                 url: link,                 success: function (result) {                     a.html('<i class="fa fa-heart fa-lg text-danger"></i> (' + result + ')');                 }             });         });      }); 

i don't hope missed anything. hope u guys can help.

the problem is, registered click event on "like" , "unlike" css classes on document ready event. work elements present in dom @ time. in success handler of ajax call, resetting anchor tag html new markup , registered click event code won't work this.

what should is, use jquery on event delegation register click event. work current , future elements(dynamically injected dom).

so change code

$("a.like").click(function () {     //do ajax call }); 

to

$(document).on("click","a.like",function () {    //do ajax call }); 

and should work.

another suggestion is, can use same code both ajax calls if keep data attribute in markup determine whether user liked or not , target url each markup along jquery multiple selectors( both css classes). also, should not try hardcode url action methods in js code. instead should use url.action helper methods shown in post