asked on

Change word from Like to Unlike and change link!

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

gyoreg

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

Member_2_5230414

ASKER

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?

ASKER CERTIFIED SOLUTION

mepro

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Member_2_5230414

ASKER

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."

mepro

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.

mepro

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.

Member_2_5230414

ASKER

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.

mepro

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?

mepro

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?

Member_2_5230414

ASKER

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

mepro

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

Member_2_5230414

ASKER

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>

mepro

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

mepro

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.

Member_2_5230414

ASKER

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!

mepro

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.