We help IT Professionals succeed at work.

Change word from Like to Unlike and change link!

Member_2_5230414
on
Below is what i have so far.

What i would like to do is change the like to unlike when the user clicks the like button so then they can change their mind if need be.
$(function() 
{
$(".likes").click(function() 
{
var ID = $(this).attr("id").replace('vi', '');

$.ajax({
type: "POST",
url: "include/likeit.php",
data: "msg_id="+ ID, 
cache: false,
success: function(html){
$("#likes"+ID).prepend(html);
$("#view"+ID).remove();
$("#two_comments"+ID).remove();
}
});
return false;
});
});




<a href="#" class="likes" id="<?php echo $id; ?>">Like?</a> jarratt and <a href="#" class="123" id="<?php echo $id; ?>">3 others</a> like this.
<div id="123<?php echo $id; ?>"></div>
<div id="likes<?php echo $id; ?>"></div>

Open in new window

Comment
Watch Question

Commented:
Hi. Slightly different, but the logic is there... :)
<html>
<head>
<script type="text/javascript">

$(document).ready(function() {
  $('#myButton').click(myClick);
});

var like = true;
function myClick()
{
  like = !like;
  $('#myButton').html(like ? "I hate it!" : "No-no!I like it!");

  if (like) {
    // do whatever you want if the user like it!
  } else {
    // also do whatever you want if the user doesn't like it.
  }

}

</script>
</head>
<body>
  <button id="myButton">Hey, aha-aha, I like it!</button>
</body>
</html>

Open in new window

Author

Commented:
if (like) {
    // do whatever you want if the user like it!
  } else {


does that do onchange?

Also if a user like it could i show the unlike button when the user visits the page atall?
Commented:
If you would like to have solution by just changing 2 lines in your original function instead, just follow my code. I also added code which changes Unlike to Like, if you may need it.

Try it and let me know how it goes.
<script type="text/javascript">
$(function() 
{
	//This code executes when someone clicks on the "Like" link. Do your processing here. At the end of the processing of this function, the Like will change to Unlike.
	$(".likes").click(function() 
	{
		var ID = $(this).attr('id');
		
		alert(ID);

		$.ajax({
			type: "POST",
			url: "include/likeit.php",
			data: "msg_id="+ ID, 
			cache: false,
			success: function(html)
				{
					$("#"+ID).html('Unlike');
					$("#"+ID).attr('class', "unlike"); 
					$("#likes"+ID).prepend(html);
					$("#view"+ID).remove();
					$("#two_comments"+ID).remove();
				}
			});
		return false;
	});
	
	//This code executes when someone clicks on the "Unlike" link. Do your processing here. At the end of the processing of this function, the Unlike will change to Like.
	$(".unlike").click(function() 
	{
		var ID = $(this).attr('id');
		
		alert(ID);

		$.ajax({
			type: "POST",
			url: "include/unlikeit.php",
			data: "msg_id="+ ID, 
			cache: false,
			success: function(html)
				{
					$("#"+ID).html('Like');
					$("#"+ID).attr('class', "like"); 
					$("#likes"+ID).prepend(html);
					$("#view"+ID).remove();
					$("#two_comments"+ID).remove();
				}
			});
		return false;
	});
});

</script>




<a href="#" class="likes" id="<?php echo $id; ?>">Like?</a> jarratt and 
<a href="#" class="123" id="<?php echo $id; ?>">3 others</a> like this.
<div id="123<?php echo $id; ?>"></div>
<div id="likes<?php echo $id; ?>"></div>

Open in new window

Author

Commented:
Hey again,

I tried the code and it does not change the like.

also the allows you to hit like and it keeps pasting the message  "3 others</a> like this."

Commented:
Ok I think I may know what the problem is. Can you please include the names and versions of the javascript files that you are using in this page?

I am not sure what you mean by the following:
also the allows you to hit like and it keeps pasting the message  "3 others</a> like this."

If you can explain that more clearly, I would be able to comment on it.

Commented:
And one more thing, the like will not be changed to Unlike if the function failed. I mean if there was an error, it would not be changed to "Unlike". Other than that, I test it locally and it worked.

Author

Commented:
Humm ok.

If i descibe what im looking to do that might help.

On facebook under comments you have a button where you can like it or dislike.

when you click like it adds text "you liek this" then next time you visit the opage it will say "mepro likes this"

im also using jquery to do this.

Commented:
Yes, this can be done. I just noticed that you have accepted the solution by another expert. Are you still seeking an answer just like what you have mentioned in your last post?

Commented:
Oops.. sorry, please discard my earlier post. I meant to post it for another user.

The functionality that you have mentioned can be achieved. Can you tell me what javascripts you have currently on the page and their versions?

Author

Commented:
Hey
Im just using this: <script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Commented:
Hi,
Please find attached, the code that you would need to solve the issue of Like and Unlike. I have tested it locally and it worked.

Also if you want to show the "user likes this" text when user visits the page again, you will have to do a query in PHP and show it on page load. That should solve the issues you were having with it.

Hope that helps.


<script type="text/javascript">
$(function() 
{
	$(".likes").live("click", function()      
	{
		var ID = $(this).attr('id');
				
		$.ajax({
			type: "POST",
			url: "include/likeit.php",
			data: "msg_id="+ ID, 
			cache: false,
			success: function(html)
				{
					$("#"+ID).html('Unlike');
					$("#"+ID).removeClass('likes');
					$("#"+ID).addClass('unlike');					
					$("#likes"+ID).prepend(html);
					$("#view"+ID).remove();
					$("#two_comments"+ID).remove();
				}
			});
		return false;
	});
	

	$(".unlike").live("click", function()      
	{
		var ID = $(this).attr('id');
		
		$.ajax({
			type: "POST",
			url: "include/unlikeit.php",
			data: "msg_id="+ ID, 
			cache: false,
			success: function(html)
				{
					$("#"+ID).html('Like');
					$("#"+ID).removeClass('unlike');
					$("#"+ID).addClass('likes');					
					$("#likes"+ID).prepend(html);
					$("#view"+ID).remove();
					$("#two_comments"+ID).remove();
				}
			});
		return false;
	});
});

</script>

Open in new window

Author

Commented:
Would i add this under thr code provided above

<a href="#" class="likes" id="<?php echo $id; ?>">Like?</a> jarratt and
<a href="#" class="123" id="<?php echo $id; ?>">3 others</a> like this.
<div id="123<?php echo $id; ?>"></div>
<div id="likes<?php echo $id; ?>"></div>

Commented:
You will need to actually add it just before the closing </head> tag under the line where you have added the javascript call to jquery file from google. I have added the code of the complete page below for your reference. Use it with your own modifications as needed and let me know if it worked.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Like &amp; Unlike</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
$(function() 
{
	$(".likes").live("click", function()      
	{
		var ID = $(this).attr('id');
				
		$.ajax({
			type: "POST",
			url: "include/likeit.php",
			data: "msg_id="+ ID, 
			cache: false,
			success: function(html)
				{
					$("#"+ID).html('Unlike');
					$("#"+ID).removeClass('likes');
					$("#"+ID).addClass('unlike');					
					$("#likes"+ID).prepend(html);
					$("#view"+ID).remove();
					$("#two_comments"+ID).remove();
				}
			});
		return false;
	});
	

	$(".unlike").live("click", function()      
	{
		var ID = $(this).attr('id');
		
		$.ajax({
			type: "POST",
			url: "include/unlikeit.php",
			data: "msg_id="+ ID, 
			cache: false,
			success: function(html)
				{
					$("#"+ID).html('Like');
					$("#"+ID).removeClass('unlike');
					$("#"+ID).addClass('likes');					
					$("#likes"+ID).prepend(html);
					$("#view"+ID).remove();
					$("#two_comments"+ID).remove();
				}
			});
		return false;
	});
});

</script>
</head>

<body>
<a href="#" class="likes" id="<?php echo $id; ?>">Like?</a> jarratt and 
<a href="#" class="123" id="<?php echo $id; ?>">3 others</a> like this.
<div id="123<?php echo $id; ?>"></div>
<div id="likes<?php echo $id; ?>"></div>
</body>
</html>

Open in new window

Commented:
Also make sure that you are supplying value to the variable $id. If you don't supply a value, the success event will not get executed and you will not see the change from "Like" to "Unlike" and vice-versa.

Author

Commented:
Hey i gave it ago with the following code and it just shows

Like? jarratt and 3 others like this.
lots and lots of names
You and 3 others like this.


Does not chnage like to unlike at all.


a want it to look like this...

Like. mepro likes this.

then if i click like

unlike.you and mepro likes this.

then it will add the like to my db or remove it on unlike!

Commented:
With the information you have provided I cannot really see where you may be missing something in your code. I will need to see the code for likeit.php & unlikeit.php & maybe even your database structures and the data on which you are operating. If your code is executing perfectly and fetching the results correctly, then the code will show the Like & Unlike just as you initially mentioned. I tested this locally & it worked. Since it did not work on your end, then that means that you do not have the correct code in likeit.php & unlikeit.php pages.

If you want to see it something like: "mepro likes this", PHP needs to be used to show that. I believe you are able to notice that this is pushing us a little away from what we were concentrating on.