So... the page initially loads, and the user is shown either the 'add' or 'remove' link, depending on whether the offer is in their favourites. And what you want is that when the displayed link is clicked, the page makes a call behind the scenes to the PHP script, and switches the link over to the other link. Basically, a "toggle favourite" feature. Is that about right?
If so, here's roughly how I'd do it (using jQuery)
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.toggle_favourite').click(function(evt){
evt.preventDefault(); // stop the link going to the target page
var $link = $(this);
var link_href = $link.attr('href');
$.get(link_href, function(response){ // fetch the target page via AJAX
if (response == 'success'){
if (link_href.indexOf('addfavourite') > -1){
new_link_href = link_href.replace('addfavourite', 'removefavourite')
new_link_html = '<img src="template/images/rfav.png" alt="Remove Icon" border="0" /> Remove Favourite';
}else{
new_link_href = link_href.replace('removefavourite', 'addfavourite')
new_link_html = '<img src="template/images/afav.png" alt="Add Icon" border="0" /> Favourite';
}
$link.attr('href', new_link_href).html(new_link_html);
}
});
});
});
</script>
You'll need to add the "toggle_favourite" class to your links, like:
... and you'll need to alter your PHP script so that it outputs something useful. The javascript above looks for the string "success", so you could, for example, change addfavourite.php to something like:
Code:
<?php
$offerid = $_GET['offerid']
$username= $_GET['username']
// do some stuff
echo('success');
?>
Wow, thank you. That was exactly what I was looking for. There is one problem though. I can't seem to get it so the link changes? It submits the link without refresh but the link stays the same.
Well, there's a few places it could be going wrong. I'm gonna go out on a limb and assume my code is right and that the problem is with the HTTP request.
With the Firebug console open, click one of your links: you should be able to see the HTTP request logged. You'll be able to click on it and see exactly what was sent to your PHP page, and what the response from the PHP page was. If the response wasn't exactly the string "success", then none of the link-swapping code will get called.
So: first question - did the HTTP request fire off OK, and did it respond with "success"?
That should result in some more stuff being written to your firebug console. The first two lines should be fairly self-explanatory, and if those variables are empty or don't contain what you'd expect, there's the problem. The last one should show you something like 'object' with an expandable list of options. If you get "undefined" or anything else, we're not getting a handle on the link object in the DOM for some reason.
Ok, can you post the full code of your page? If no extra lines are added, and there are no error messages, then (response == 'success') isn't returning true. Are you definitely sure that's the string that your PHP page is returning?
$result = mysql_query("SELECT * FROM offers WHERE id = '$offerid'") or die(mysql_error()); while($list = mysql_fetch_array($result)){ $cat = $list['catID']; }
mysql_query("INSERT into favourites (`username`, `offerid`) VALUES('$username', '$offerID')") or die(mysql_error());
echo('success'); }
include ('template/footer.php'); ?>
This is the code in header.php
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.toggle_favourite').click(function(evt){
evt.preventDefault(); // stop the link going to the target page
var $link = $(this);
var link_href = $link.attr('href');
$.get(link_href, function(response){ // fetch the target page via AJAX
if (response == 'success'){
if (link_href.indexOf('addfavourite') > -1){
new_link_href = link_href.replace('addfavourite', 'removefavourite')
new_link_html = '<img src="template/images/rfav.png" alt="Remove Icon" border="0" /> Remove Favourite';
}else{
new_link_href = link_href.replace('removefavourite', 'addfavourite')
new_link_html = '<img src="template/images/afav.png" alt="Add Icon" border="0" /> Favourite';
}
console.log('new_link_href = ' + new_link_href);
console.log('new_link_html = ' + new_link_html);
console.log($link);
$link.attr('href', new_link_href).html(new_link_html);
}
});
});
});
</script>
If that PHP file is including a bunch of HTML, then it's not returning the string "success": it's returning the string "success" plus a bunch of HTML. Your PHP file shouldn't be outputting any HTML at all.
$result = mysql_query("SELECT * FROM offers WHERE id = '$offerid'") or die(mysql_error()); while($list = mysql_fetch_array($result)){ $cat = $list['catID']; }
mysql_query("INSERT into favourites (`username`, `offerid`) VALUES('$username', '$offerID')") or die(mysql_error());
Before you post, read our: 
and that the problem is with the HTTP request.
