AJAX Toggle Favourite Problem

Discussion in 'JavaScript' started by Barry67, Oct 10, 2010.

  1. #1
    Hi, I'm currently trying to build myself a little AJAX Toggle Favourite feature.

    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>
    Code (markup):
    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>';
            }
    ?>
    Code (markup):
    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');
    }
    ?>
    Code (markup):
    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'){
    }
    Code (markup):
    should work right? But no link switching occurs. Can anyone help me with this script please?
     
    Barry67, Oct 10, 2010 IP