Question

I’ll try to make this as simple a posible.

I just started working with jquery and don’t know what’s the best aproach to do what i want to do or if i’m completely wrong. I’m trying to make a simple “recommend” button to recomend articles but i want that once the user has recommended one article he can’t recomend it again.

So far i got the button working and posting the data with the function $.post, and then, when the user has voted i disable the button so he can’t post data again. The problem is, that if he reloads the page the button is enabled again (i’m controlling this serverside, but i want to disable the button client side also).

What would be the best aproach to detect from jquery if the user has recommended one article within the .ready function in order to do not bind the button event?

I can think of two viable solutions but none seems clean enough to me, the first would be to give a direfent ID to the button in the view if the recommendation is loaded with the model so that the event never binds. Or the other solution would be to make another ajax call in the document.ready to check if the article was already recomended.

A lot of sites have this kind of behavior (youtube for ex.) so there must be a better way to do this.

Some code:

this is my “button” in the view:

<% // Display the button %>
<%= Html.Image("/ECA/Content/Images/notchecked.png", new { id = "recommend"  })%>

And my jquery event bind:

    //Add click event to recommend the article
    $("img[id^='recommend']").click
    (
            function() {

                UpdateVote( 2);
            }
    );

My callback function:

var UpdateVoteCallBack=function(data) {
     $("#recommend")
    .attr('src','/ECA/Content/Images/checked.png');
     $("#recommend").unbind('click');

}

Answer 1

I would check server side to see if the article has been recommended and send the appropriate class/id to the view and have a jquery function to disable any buttons with a cancelled class/id.