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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: No refresh

  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    68
    Thanks
    1
    Thanked 1 Time in 1 Post

    No refresh

    Hi,

    I have 2 links which will insert information into a database.

    PHP 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 href="addfavourite.php?offerid=' $list['id'] . '&username=' $ofusername '"><img src="template/images/afav.png" alt="Add Icon" border="0" /> Favourite</a>';
            }else {
                echo 
    '<a href="removefavourite.php?offerid=' $list['id'] . '&username=' $ofusername '"><img src="template/images/rfav.png" alt="Add Icon" border="0" /> Favourite</a>';
            } 
    ?>
    Is there anyway I can get the link to update with addfavourites.php/removefavourite.php without refreshing the page?

    Thanks.

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    I think so, if I understand what you want.

    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:

    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>';
            } 
    ?>
    ... 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');
    ?>
    Make sense?

  • #3
    New Coder
    Join Date
    Jul 2009
    Posts
    68
    Thanks
    1
    Thanked 1 Time in 1 Post
    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.

  • #4
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    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.

    Do you have Firebug installed? If not, go get it

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

  • #5
    New Coder
    Join Date
    Jul 2009
    Posts
    68
    Thanks
    1
    Thanked 1 Time in 1 Post
    Okay, I installed Firebug and tried what you said. It did respond with success.
    Last edited by Skippy; 09-23-2010 at 11:51 PM.

  • #6
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Oh. Ummm....

    Ok, let's do some debugging.

    So the PHP page is returning 'success'. That means we're getting to, and past, the IF statement at the start of this bit:

    Code:
    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);
                }
    Add a couple of lines just above the last line:
    Code:
    $link.attr('href', new_link_href).html(new_link_html);
    so it now reads:
    Code:
    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);
    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.

  • #7
    New Coder
    Join Date
    Jul 2009
    Posts
    68
    Thanks
    1
    Thanked 1 Time in 1 Post
    Okay, after I input the extra code no extra lines are added to the console.

  • #8
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    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?

  • #9
    New Coder
    Join Date
    Jul 2009
    Posts
    68
    Thanks
    1
    Thanked 1 Time in 1 Post
    addfavourites.php
    PHP Code:
    <?php
    session_start
    ();
    require (
    'connect.php');
    require (
    'functions.php');
    include (
    'template/header.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');
    }

    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>
    The add favourites button code:
    PHP Code:
        echo '<div class="favourite">';
                
    $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>';
                } 
            echo 
    '</div>'

  • #10
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Code:
    include ('template/footer.php');
    what's in that?

    Lets see exactly what comes out of the PHP -

    Code:
    $.get(link_href, function(response){    // fetch the target page via AJAX
    	console.log(response);
        if (response == 'success'){

  • #11
    New Coder
    Join Date
    Jul 2009
    Posts
    68
    Thanks
    1
    Thanked 1 Time in 1 Post
    In footer.php is the rest of the template, basically just a few links.

    The PHP just returns success.

  • #12
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    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.

  • #13
    New Coder
    Join Date
    Jul 2009
    Posts
    68
    Thanks
    1
    Thanked 1 Time in 1 Post
    Ah, I removed the header.php and footer.php from the add favourites.

    So it's just:
    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');
    }

    ?>
    So it just outputs the word success.
    Last edited by Skippy; 09-27-2010 at 08:18 PM.

  • #14
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Does it work? Is the link now changing?

  • #15
    New Coder
    Join Date
    Jul 2009
    Posts
    68
    Thanks
    1
    Thanked 1 Time in 1 Post
    No, the links don't switch and the extra code you told me to put in doesn't return anything. It just prints the word success.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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