The code I pasted earlier was just a work in progress, from my original post. After you suggested to use Ajax, I have read some online tutorials for Ajax and below is my code using Ajax and jQuery :-)
The defaul page:
@{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function CountLikes(str) {
var xmlhttp;
if (str == "") {
document.getElementById("resultlike").innerHTML = "";
return;
}
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("resultlike").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "Likes.cshtml?ids=" + str, true);
xmlhttp.send();
}
</script>
<script>
function CountDisLikes(str) {
var xmlhttp;
if (str == "") {
document.getElementById("resultdislike").innerHTML = "";
return;
}
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("resultdislike").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "DisLikes.cshtml?ids=" + str, true);
xmlhttp.send();
}
</script>
</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 />
<button name="action" value="@row.ID" onclick="CountLikes(this.value)" id="btnLike">Like</Button><span id="resultlike" style="color: #00ff21"></span>
<button name="action" value="@row.ID" onclick="CountDisLikes(this.value)" id="btnDisLike">DisLike</button><span id="resultdislike" style="color: #f00"></span>
<br /> <br />
</div>
}
</div>
<script>
$("#btnLike, #btnDisLike").click(function(){
$("#btnLike, #btnDisLike").hide(100);
});
</script>
</body>
</html>
Server Page for Like:
@{
var TopicId="";
var CountLikes="";
var Likes="";
if (IsPost) {
if(!Request.QueryString["IDS"].IsEmpty()){
TopicId = Request.QueryString["IDS"];
var db=Database.Open("Rating");
var updateCommand="UPDATE Rating SET CountLikes=CountLikes + 1 where ID=@1";
db.Execute(updateCommand, CountLikes, TopicId);
}
}
if(!Request.QueryString["IDS"].IsEmpty()){
TopicId=Request.QueryString["IDS"];
var dbase = Database.Open("Rating");
var querystring = "SELECT CountLikes FROM Rating where ID=@0";
var row = dbase.QuerySingle(querystring, TopicId);
if(row !=null){
Likes=(row.CountLikes).ToString();
}
}
Response.Write("You Like this");
}
Server Page for dislike:
@{
var TopicId="";
var CountDisLikes="";
var DisLikes="";
if (IsPost) {
if(!Request.QueryString["IDS"].IsEmpty()){
TopicId = Request.QueryString["IDS"];
var db=Database.Open("Rating");
var updateCommand="UPDATE Rating SET CountDisLikes=CountDisLikes + 1 where ID=@1";
db.Execute(updateCommand, CountDisLikes, TopicId);
}
}
if(!Request.QueryString["IDS"].IsEmpty()){
TopicId=Request.QueryString["IDS"];
var dbase = Database.Open("Rating");
var querystring = "SELECT CountDisLikes FROM Rating where ID=@0";
var row = dbase.QuerySingle(querystring, TopicId);
if(row !=null){
DisLikes=(row.CountDisLikes).ToString();
}
}
Response.Write("You Dislike this");
}
The code works fine, but there is one problem I need help with. As you see in the default page I am using foreach command. The command also displays like/dislike button for each row in database. But when I click on like or dislike button the post back only
appears on the first divison, no matter I click Like/Dislike button on the first divison or any other division the postback will be displayed on first diviosn only.. Can you please help me find the problem here
According to me that is not an error with the AJAX or jQuery code.
That error is just about the foreach. Are you using some code that will update the like? because maybe the code you are using gets the link of only first post. Not the second or third.
If its getting correct ones than maybe an error for getting the correct database value. Please dont autoupdate the like counter. Try to update it from database like a javascript refresh
Please "Marks As Answer" if any answer helped you out!
~~! FIREWALL !~~
That error is just about the foreach. Are you using some code that will update the like? because maybe the code you are using gets the link of only first post. Not the second or third.
My 'like/dislike' button passes the Topic ID as a parameter to the SQL query. The SQL page then increment likes or dilikes accordingly. So whenever I click on a button it will increment like/dislike value for that particular Topic only.
Please dont autoupdate the like counter. Try to update it from database like a javascript refresh
Can you please elabroate more on this, I didnt understood .
What I said was, try to update the variable containing the like/dislike manually by using javascript. Do not depend on Ajax response about it. Use ajax to update the SQL but try to get a javascript to update the variable after every sec.
http://www.w3schools.com/js/js_timing.asp
Please "Marks As Answer" if any answer helped you out!
~~! FIREWALL !~~
Aafi
Member
32 Points
53 Posts
Re: Like and Dislike counter using Ajax / JQuery (increment value in SQL database)
Dec 28, 2012 04:40 PM|LINK
Never Mind, I am just going through the Ajax Tutorial on W3Schools. I guess Ajax is exactly somthing I would like to use in my project.
Anybody else, if you have any online tutorial link for Ajax and how to use it with Razor syntax, please post the link here.
Afzaal.Ahmad...
Contributor
2660 Points
1039 Posts
Re: Like and Dislike counter using Ajax / JQuery (increment value in SQL database)
Dec 28, 2012 04:42 PM|LINK
No the tutorial present there is not enough!
Thats just for loading a page. Not for doing other complex functions.
Here: http://www.asp.net/ajaxlibrary/act.ashx
Find something here.
~~! FIREWALL !~~
Aafi
Member
32 Points
53 Posts
Re: Like and Dislike counter using Ajax / JQuery (increment value in SQL database)
Dec 29, 2012 08:56 AM|LINK
below is my code, which is working. This works but not exactly the way I want,
Problem 1 :refreshing the page will increase the counter
Problem 2: Everytime the button is pressed the page reloads
I wont be using these codes due to the above problems, but just wanted to check with you guys if this code is open for SQL injection.
@{ //Variables var CountLikes=""; var CountDisLikes=""; var ID=""; if (IsPost) { // Check if buttons value is Like if (Request["action"] == "Like") { ID=Request.Form["DID"]; var db=Database.Open("Rating"); var updateCommand="UPDATE Rating SET CountLikes=CountLikes + 1 where ID=@1"; db.Execute(updateCommand, CountLikes, ID); } // Check if buttons value is DisLike if (Request["action"] == "DisLike") { ID=Request.Form["DID"]; var db=Database.Open("Rating"); var updateCommand="UPDATE Rating SET CountDisLikes=CountDisLikes + 1 where ID=@1"; db.Execute(updateCommand, CountDisLikes, ID); } } } <!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="DID" value="@row.ID" /> <input type="submit" name="action" value="Like" /> <input type="submit" name="action" value="DisLike"/> </form> <br /> <br /> </div> } </div> </body> </html>Afzaal.Ahmad...
Contributor
2660 Points
1039 Posts
Re: Like and Dislike counter using Ajax / JQuery (increment value in SQL database)
Dec 29, 2012 01:01 PM|LINK
You are just using if(Request["action"] == "Dislike")
You should use if(IsPost) too. To tell only to increase or decrease counter if submitted
The page will reload because it is a submit button! You are not using ajax to send data in background.
~~! FIREWALL !~~
Aafi
Member
32 Points
53 Posts
Re: Like and Dislike counter using Ajax / JQuery (increment value in SQL database)
Jan 01, 2013 11:07 AM|LINK
Hey Afzaal,
The code I pasted earlier was just a work in progress, from my original post. After you suggested to use Ajax, I have read some online tutorials for Ajax and below is my code using Ajax and jQuery :-)
The defaul page:
@{ } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> function CountLikes(str) { var xmlhttp; if (str == "") { document.getElementById("resultlike").innerHTML = ""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("resultlike").innerHTML = xmlhttp.responseText; } } xmlhttp.open("POST", "Likes.cshtml?ids=" + str, true); xmlhttp.send(); } </script> <script> function CountDisLikes(str) { var xmlhttp; if (str == "") { document.getElementById("resultdislike").innerHTML = ""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("resultdislike").innerHTML = xmlhttp.responseText; } } xmlhttp.open("POST", "DisLikes.cshtml?ids=" + str, true); xmlhttp.send(); } </script> </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 /> <button name="action" value="@row.ID" onclick="CountLikes(this.value)" id="btnLike">Like</Button><span id="resultlike" style="color: #00ff21"></span> <button name="action" value="@row.ID" onclick="CountDisLikes(this.value)" id="btnDisLike">DisLike</button><span id="resultdislike" style="color: #f00"></span> <br /> <br /> </div> } </div> <script> $("#btnLike, #btnDisLike").click(function(){ $("#btnLike, #btnDisLike").hide(100); }); </script> </body> </html>Server Page for Like:
@{ var TopicId=""; var CountLikes=""; var Likes=""; if (IsPost) { if(!Request.QueryString["IDS"].IsEmpty()){ TopicId = Request.QueryString["IDS"]; var db=Database.Open("Rating"); var updateCommand="UPDATE Rating SET CountLikes=CountLikes + 1 where ID=@1"; db.Execute(updateCommand, CountLikes, TopicId); } } if(!Request.QueryString["IDS"].IsEmpty()){ TopicId=Request.QueryString["IDS"]; var dbase = Database.Open("Rating"); var querystring = "SELECT CountLikes FROM Rating where ID=@0"; var row = dbase.QuerySingle(querystring, TopicId); if(row !=null){ Likes=(row.CountLikes).ToString(); } } Response.Write("You Like this"); }Server Page for dislike:
@{ var TopicId=""; var CountDisLikes=""; var DisLikes=""; if (IsPost) { if(!Request.QueryString["IDS"].IsEmpty()){ TopicId = Request.QueryString["IDS"]; var db=Database.Open("Rating"); var updateCommand="UPDATE Rating SET CountDisLikes=CountDisLikes + 1 where ID=@1"; db.Execute(updateCommand, CountDisLikes, TopicId); } } if(!Request.QueryString["IDS"].IsEmpty()){ TopicId=Request.QueryString["IDS"]; var dbase = Database.Open("Rating"); var querystring = "SELECT CountDisLikes FROM Rating where ID=@0"; var row = dbase.QuerySingle(querystring, TopicId); if(row !=null){ DisLikes=(row.CountDisLikes).ToString(); } } Response.Write("You Dislike this"); }The code works fine, but there is one problem I need help with. As you see in the default page I am using foreach command. The command also displays like/dislike button for each row in database. But when I click on like or dislike button the post back only appears on the first divison, no matter I click Like/Dislike button on the first divison or any other division the postback will be displayed on first diviosn only.. Can you please help me find the problem here
Afzaal.Ahmad...
Contributor
2660 Points
1039 Posts
Re: Like and Dislike counter using Ajax / JQuery (increment value in SQL database)
Jan 01, 2013 04:47 PM|LINK
According to me that is not an error with the AJAX or jQuery code.
That error is just about the foreach. Are you using some code that will update the like? because maybe the code you are using gets the link of only first post. Not the second or third.
If its getting correct ones than maybe an error for getting the correct database value. Please dont autoupdate the like counter. Try to update it from database like a javascript refresh
~~! FIREWALL !~~
Aafi
Member
32 Points
53 Posts
Re: Like and Dislike counter using Ajax / JQuery (increment value in SQL database)
Jan 01, 2013 04:57 PM|LINK
My 'like/dislike' button passes the Topic ID as a parameter to the SQL query. The SQL page then increment likes or dilikes accordingly. So whenever I click on a button it will increment like/dislike value for that particular Topic only.
Can you please elabroate more on this, I didnt understood .
As Always Thanks for your time and efforts.
Afzaal.Ahmad...
Contributor
2660 Points
1039 Posts
Re: Like and Dislike counter using Ajax / JQuery (increment value in SQL database)
Jan 01, 2013 06:21 PM|LINK
What I said was, try to update the variable containing the like/dislike manually by using javascript. Do not depend on Ajax response about it. Use ajax to update the SQL but try to get a javascript to update the variable after every sec.
http://www.w3schools.com/js/js_timing.asp
~~! FIREWALL !~~