Number of Likes increases when page is refreshed.

[Mudassir]

Dear all,
i want to update the number of likes increased when the user clicks on the like button. like on my site , when on this page
http://modelspk.com/urwa-tul-wusqa-model18
user clicks on the like button, the no of likes in increased by one in the database. but until the page is not refreshed, it is not updated at the front end. the code currently i am using is as follows

<script type="text/javascript">
        $("#likeThis").live("click", function () {
            var pid = document.getElementById("pid");
            var uRL = "/updateRatings.aspx?opt=1&pid=" + pid.value;
            $.post(uRL);
            alert('You Like This');
            this.disabled = true;
            document.getElementById("dislikeThis").disabled = true;
            return false;
        });
 
        $("#dislikeThis").live("click", function () {
            var pid = document.getElementById("pid");
            var uRL = "/updateRatings.aspx?opt=2&pid=" + pid.value;
            $.post(uRL);
            alert("You don't Like This");
            this.disabled = true;
            document.getElementById("likeThis").disabled = true;
            return false;
        });         
 
    </script>
 

and the html input button for like or dislike are as follows..

<tr>
                        <td>
                            <asp:HiddenField ID="newPhotoID" runat="server" />
                            <input type="hidden" id="pid" value="<%=ModelID%>" />
                            <asp:Label ID="lblModelID" runat="server" Visible="false"></asp:Label>
                            <table width="253" align="center">
                                <tr>
                                    <td align="left" class="txt" style="color: #0068c6; font-weight: bold;">
                                        Rate This:
                                    </td>
                                    <td align="center" class="WaterText">
                                        <input type="image" id="likeThis" onclick="javascript:rateThis(1,<%=ModelID%>);"
                                            src="/images2/inact-thumb.jpg" onmouseover="this.src='/images2/active-thumb.jpg'"
                                            onmouseout="this.src='/images2/inact-thumb.jpg'" />&nbsp;<%=Likes%>
                                        <span class="txt" style="color: #0068c6; font-weight: bold;">Likes</span>
                                    </td>
                                    <td align="center" class="WaterText">
                                        <input type="image" id="dislikeThis" src="/images2/no-inact.jpg" onclick="javascript:rateThis(2,<%=ModelID%>)"
                                            onmouseover="this.src='/images2/no-active.jpg'" onmouseout="this.src='/images2/no-inact.jpg'" />&nbsp;<%=Dislikes%>
                                        <span class="txt" style="color: #0068c6; font-weight: bold;">Disikes</span>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td width="127" align="right" class="WaterText">
                            <%=Views %>
                            <span class="txt" style="color: #0068c6; font-weight: bold;">Views</span>
                        </td>
                    </tr>
 

what i want to do is that as the user clicks on the like button, it should be increased by one at the same time without refreshing the page.


Regards:
Mudassir

[Rabbit]

In your click function, have it add one to the current value.