Stopping the page from jumping to the top on an href click

Replace

return true

Select allOpen in new window

to

return false;

Select allOpen in new window

in this code

<span id="newlikes"><a onclick="TracLikes('CurrentUser.UserName',<%#Eval("DocumentID")%>); return true" href="/KeepingTrac.aspx?DocID=<%# Eval("DocumentID") %>"><%#GetBlogLikesCount(Eval<int>("DocumentID"))%>  Likes</a></span></span>

Select allOpen in new window

When I set return to false, I don't get a count back unless I refresh the page.  For example the first blog has 38 likes.  If I click on the likes, I should immediately see 39 likes.  The return false stops the value from being returned to the onclick.    When I look at the click using Fiddler I see the return value from the service, just not making it to the page when return is false

Any other suggestions

At the end of the onclick use return false; and set href="#"

hielo - I cannot use any of these methods as I need a return value and return false prevents the value from returning to the onclick.  Using href="#" does not give me a unique identifier for each like clicked and the jQuery fires on the first click only.  I have done due diligence and have tried all the obvious methods, but without success.

Ok can you share code ot TracLikes function or add return false to this function at bottom and remove return true from onClick event handler.

When I set return to false, I don't get a count back unless I refresh the page.  For example the first blog has 38 likes.  If I click on the likes, I should immediately see 39 likes.  The return false stops the value from being returned to the onclick.    When I look at the click using Fiddler I see the return value from the service, just not making it to the page when return is false

I think you need to understand what is happening here.

Unless you put the return false in as has been suggested by other experts in this post the default behaviour for the <a> element is going to fire which is to navigate to /KeepingTrac.aspx?DocID=<%# Eval("DocumentID") %>

This will by default refresh the likes count because the page is being refreshed. It will also make the page "jump" to the top - because it is a reload of the page.

If your count does not update when return false is used then there is something wrong with your code that updates the count - because the fact it does not update means that the return false has done exactly what it was supposed to do which is prevent the default behaviour of the <a> element.

Therefore the first post in this thread is correct - you have to put return false to prevent the default click behaviour.

The next question is why your count does not update so lets look at that  

In your success function you have this line

$(this).text(data.d + ' Likes');

Select allOpen in new window

In this context $(this) does not refer to the element that invoked the click. Try changing this line to

$('#newlikes a').text(data.d + ' Likes');

Select allOpen in new window

Thanks everyone for your help.  I am still trying to get your solutions to work.  So far, not having any luck, but will get back after I try a bit more.

Thanks

I don't see a purpose for the href.  Also, I see an extra closing </span> tag that does not match an opening <span> tag.

Try taking out the href and modifying the jQuery code as the others have suggested.

<span id="newlikes"><a onclick="TracLikes('CurrentUser.UserName',<%#Eval("DocumentID")%>)"><%#GetBlogLikesCount(Eval<int>("DocumentID"))%> Likes</a></span>

Select allOpen in new window

function TracLikes(UserName,DocumentID) {
  
  var myuser = UserName;
  var mydoc = DocumentID;
   
  $.ajax({
             type: "POST",
             url: "/CMSPages/WebService.asmx/InsertLikes",
             async: true,
            data: JSON.stringify({ UserName: myuser, DocumentID: mydoc }),
             //data: JSON.stringify({
                 //UserName: $(this).data("UserName"),
                 //DocumentID: $(this).data("blogposttitle")
             //}),
             contentType: "application/json",
             success: function(data) {
                $('#newlikes a').text(data.d + ' Likes');
             },
             error: function(XMLHttpRequest, textStatus, errorThrown) {
                 console.log(errorThrown);
             }
         });
   
}

Select allOpen in new window

The href gives the free pointer AND retains some functionality even when JS is turned off or blocked