I have 3 columns in SQL database viz: (Topic, CountLikes, CountDislikes). DataType for CountLike & CountDislikes is INT.
I want to create 2 buttons. 1 for Like and 1 for Dislike. When user clicks on Like button it should increment the value by 1 in the SQL table 'CounLikes' column.
I can do this by running the following SQL Update command in the SQL Database.
Update Command: UPDATE Rating SET CountLikes=CountLikes + 1 where ID=1
But, I want to trigger this command on a Button click event, so everytime a user clicks on the Like button it should increment the value in the database by +1.
In simple words I am trying to create a jQuery button similar to FaceBook Like button.
Thank you for the answer. Below is my code, using the method you suggested.
But I am facing a problem, Using the below code I can only increment Likes and Dislikes column of one particular row in the database. My page displays data for each row in different divison. How do I increment the Likes and Dislikes count for each row.
Another problem is that If I refresh the page in browser it automatically increments or decrements the value depending on the last click, so no matter I click on the button or not a page refresh just increments/decrements the value.
Below is my current code.
@{
//Variables
var CountLikes="";
var CountDisLikes="";
if (IsPost) {
// Check if buttons value is Like
if (Request["action"] == "Like")
{
CountLikes=Request["action"];
var db=Database.Open("Rating");
var updateCommand="UPDATE Rating SET CountLikes=CountLikes + 1 where ID=1";
db.Execute(updateCommand, CountLikes);
}
// Check if buttons value is DisLike
if (Request["action"] == "DisLike")
{
CountDisLikes=Request.Form["action"];
var db=Database.Open("Rating");
var updateCommand="UPDATE Rating SET CountDisLikes=CountDisLikes + 1 where ID=1";
db.Execute(updateCommand, CountDisLikes);
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
@{
var dbase = Database.Open("Rating");
var topic = dbase.Query("SELECT * FROM Rating ORDER BY ID DESC");
}
<div>
@foreach (var row in topic)
{
<div style="border: 1px solid">
<b>Topic:</b>@row.topic
<br />
<b>Likes:</b>@row.CountLikes
<br />
<b>DisLikes:</b>@row.CountDisLikes
<br />
<form method="post">
<input type="hidden" name="ID" value="@row.ID" />
<input type="submit" name="action" value="Like" />
<input type="submit" name="action" value="DisLike" />
</form>
<br /> <br />
</div>
}
</div>
</body>
</html>
Thank you for the answer. Below is my code, using the method you suggested.
But I am facing a problem, Using the below code I can only increment Likes and Dislikes column of one particular row in the database. My page displays data for each row in different divison. How do I increment the Likes and Dislikes count for each row.
are you using a webgrid?
Another problem is that If I refresh the page in browser it automatically increments or decrements the value depending on the last click, so no matter I click on the button or not a page refresh just increments/decrements the value.
reset your variables when you are done with the first increment/decrement operation?
No, I am not using webgrid, the data is displayed using the foreach command.
wavemaster
reset your variables when you are done with the first increment/decrement operation?
I am very new to programming, can you please guide me on how to do this, also I would like to add a functionality to disable the button once the button has been clicked.
Aafi
Member
32 Points
53 Posts
Like and Dislike counter using Ajax / JQuery (increment value in SQL database)
Dec 27, 2012 12:18 AM|LINK
Hi All,
Need Help,
I am trying to create a Like and Dislike counter.
I have 3 columns in SQL database viz: (Topic, CountLikes, CountDislikes). DataType for CountLike & CountDislikes is INT.
I want to create 2 buttons. 1 for Like and 1 for Dislike. When user clicks on Like button it should increment the value by 1 in the SQL table 'CounLikes' column.
I can do this by running the following SQL Update command in the SQL Database.
Update Command: UPDATE Rating SET CountLikes=CountLikes + 1 where ID=1
But, I want to trigger this command on a Button click event, so everytime a user clicks on the Like button it should increment the value in the database by +1.
In simple words I am trying to create a jQuery button similar to FaceBook Like button.
Thank you.
wavemaster
Participant
1295 Points
1131 Posts
Re: Like and Dislike counter using Ajax / JQuery (increment value in SQL database)
Dec 27, 2012 04:15 PM|LINK
You could do this with two buttons, without using jquery at all.
Aafi
Member
32 Points
53 Posts
Re: Like and Dislike counter using Ajax / JQuery (increment value in SQL database)
Dec 28, 2012 12:53 AM|LINK
Thank you for the answer. Below is my code, using the method you suggested.
But I am facing a problem, Using the below code I can only increment Likes and Dislikes column of one particular row in the database. My page displays data for each row in different divison. How do I increment the Likes and Dislikes count for each row.
Another problem is that If I refresh the page in browser it automatically increments or decrements the value depending on the last click, so no matter I click on the button or not a page refresh just increments/decrements the value.
Below is my current code.
@{ //Variables var CountLikes=""; var CountDisLikes=""; if (IsPost) { // Check if buttons value is Like if (Request["action"] == "Like") { CountLikes=Request["action"]; var db=Database.Open("Rating"); var updateCommand="UPDATE Rating SET CountLikes=CountLikes + 1 where ID=1"; db.Execute(updateCommand, CountLikes); } // Check if buttons value is DisLike if (Request["action"] == "DisLike") { CountDisLikes=Request.Form["action"]; var db=Database.Open("Rating"); var updateCommand="UPDATE Rating SET CountDisLikes=CountDisLikes + 1 where ID=1"; db.Execute(updateCommand, CountDisLikes); } } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Test</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> </head> <body> @{ var dbase = Database.Open("Rating"); var topic = dbase.Query("SELECT * FROM Rating ORDER BY ID DESC"); } <div> @foreach (var row in topic) { <div style="border: 1px solid"> <b>Topic:</b>@row.topic <br /> <b>Likes:</b>@row.CountLikes <br /> <b>DisLikes:</b>@row.CountDisLikes <br /> <form method="post"> <input type="hidden" name="ID" value="@row.ID" /> <input type="submit" name="action" value="Like" /> <input type="submit" name="action" value="DisLike" /> </form> <br /> <br /> </div> } </div> </body> </html>wavemaster
Participant
1295 Points
1131 Posts
Re: Like and Dislike counter using Ajax / JQuery (increment value in SQL database)
Dec 28, 2012 12:40 PM|LINK
are you using a webgrid?
reset your variables when you are done with the first increment/decrement operation?
Aafi
Member
32 Points
53 Posts
Re: Like and Dislike counter using Ajax / JQuery (increment value in SQL database)
Dec 28, 2012 03:22 PM|LINK
No, I am not using webgrid, the data is displayed using the foreach command.
I am very new to programming, can you please guide me on how to do this, also I would like to add a functionality to disable the button once the button has been clicked.
Thank you again.
wavemaster
Participant
1295 Points
1131 Posts
Re: Like and Dislike counter using Ajax / JQuery (increment value in SQL database)
Dec 28, 2012 03:33 PM|LINK
It is probably better if you work through some of the tutorials first, before you get in too deep.
Here is something about webGrid.
This is the tutorial that is going to help you most.
Can you share your code?
Afzaal.Ahmad...
Contributor
2661 Points
1040 Posts
Re: Like and Dislike counter using Ajax / JQuery (increment value in SQL database)
Dec 28, 2012 04:10 PM|LINK
jQuery will not obviously do the job. Use AJAX that will send the code in background and will show a word like "Liked" after code has been sent!
~~! FIREWALL !~~
Aafi
Member
32 Points
53 Posts
Re: Like and Dislike counter using Ajax / JQuery (increment value in SQL database)
Dec 28, 2012 04:16 PM|LINK
I have already been through the soccer website tutorials and another tutorial by Mike Pope here. There is a lot to learn, and I am still learning :)
below is my code, and here is my website project file. Thanks for your time.
@{ //Variables var CountLikes=""; var CountDisLikes=""; if (IsPost) { // Check if buttons value is Like if (Request["action"] == "Like") { CountLikes=Request["action"]; var db=Database.Open("Rating"); var updateCommand="UPDATE Rating SET CountLikes=CountLikes + 1 where ID=1"; db.Execute(updateCommand, CountLikes); } // Check if buttons value is DisLike if (Request["action"] == "DisLike") { CountDisLikes=Request.Form["action"]; var db=Database.Open("Rating"); var updateCommand="UPDATE Rating SET CountDisLikes=CountDisLikes + 1 where ID=1"; db.Execute(updateCommand, CountDisLikes); } } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Test</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> </head> <body> @{ var dbase = Database.Open("Rating"); var topic = dbase.Query("SELECT * FROM Rating ORDER BY ID"); } <div> @foreach (var row in topic) { <div style="border: 1px solid"> <b>Topic:</b>@row.topic <br /> <b>Likes:</b>@row.CountLikes <br /> <b>DisLikes:</b>@row.CountDisLikes <br /> <form method="post"> <input type="hidden" name="ID" value="@row.ID" /> <input type="submit" name="action" value="Like" /> <input type="submit" name="action" value="DisLike"/> </form> <br /> <br /> </div> } </div> </body> </html>Aafi
Member
32 Points
53 Posts
Re: Like and Dislike counter using Ajax / JQuery (increment value in SQL database)
Dec 28, 2012 04:17 PM|LINK
Can you please give me a tutorial link to start with.
Afzaal.Ahmad...
Contributor
2661 Points
1040 Posts
Re: Like and Dislike counter using Ajax / JQuery (increment value in SQL database)
Dec 28, 2012 04:22 PM|LINK
I am really sorry but this time I am out of order of any code or tutorial because I have my self yet not found any code for this. :(
However you can still just stick to a code that reloads the page.
Like a submit button. But that will be a lengthy one.
~~! FIREWALL !~~