...

View Full Version : AJAX Toggle Favourite Problem



Skippy
10-10-2010, 10:15 PM
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 I 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.

I have a page called header.php where the template is stored. This is the relevant code for the feature:

<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
console.log(response);
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>


Toggle Favourite links:

<?php
$q = mysql_query("SELECT * FROM favourites WHERE username = '$username' AND offerid = '$oID'") or die(mysql_error());
$r = mysql_fetch_array($q);
if (empty($r)) {
echo '<a class="toggle_favourite" href="addfavourite.php?offerid=' . $list['id'] . '&username=' . $ofusername . '"><img src="template/images/afav.png" alt="Add Icon" border="0" /> Favourite</a>';
}else {
echo '<a class="toggle_favourite" href="removefavourite.php?offerid=' . $list['id'] . '&username=' . $ofusername . '"><img src="template/images/rfav.png" alt="Add Icon" border="0" /> Favourite</a>';
}
?>

PHP code (addfavourite.php):

<?php
session_start();
require ('connect.php');
require ('functions.php');

if(!isset($_SESSION['username'])){
echo 'Please <a href="login.php">login</a> to access this area!';
}

if(isset($_SESSION['username'])){

$offerID = mysql_real_escape_string($_GET['offerid']);
$username = mysql_real_escape_string($_GET['username']);

$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');
}
?>

Now the problem I have is that the php code works but the links won't switch over. I've tried debugging in Firebug and it responds with success therefore the bit in:

if (response == 'success'){
}

should work right? But no link switching occurs. The php page does work though.

Can anyone help me with this script please?

stratocaster
10-27-2010, 10:03 PM
Interesting issue. I tried something similar I reduced it to a single html file rather than PHP and the following is working for me. I defaulted response to success since you aren't having issues with the php. Just change the img src to something you have on your server and see if this works for you.

strat



<html>

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.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');
var response = 'success';
if (response == 'success'){
if (link_href.indexOf('remove') > -1){
new_link_href = link_href.replace('remove', 'add')
new_link_html = '<img src="img/new.gif" alt="Add Icon" border="0" /> Add Favourite';
}else{
new_link_href = link_href.replace('add', 'remove')
new_link_html = '<img src="img/delete.gif" alt="Remove Icon" border="0" /> Remove Favourite';
}


$link.attr('href', new_link_href).html(new_link_html);
}
});
});
</script>
</head>

<body>

<a class="toggle_favourite" href="add"><img src="img/new.gif"/> Add Favourite </a>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum