Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    68
    Thanks
    1
    Thanked 1 Time in 1 Post

    AJAX Toggle Favourite Problem

    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:
    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
           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:
    Code:
    <?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):
    Code:
    <?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:
    Code:
    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?

  • #2
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Code:
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •