...

View Full Version : No refresh



Skippy
09-21-2010, 03:26 AM
Hi,

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


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

Spudhead
09-21-2010, 02:00 PM
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 (http://jquery.com/))


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


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



<?php
$offerid = $_GET['offerid']
$username= $_GET['username']

// do some stuff

echo('success');
?>


Make sense?

Skippy
09-23-2010, 05:03 PM
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.

Spudhead
09-23-2010, 05:51 PM
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 (http://getfirebug.com/) 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"?

Skippy
09-23-2010, 10:18 PM
Okay, I installed Firebug and tried what you said. It did respond with success.

Spudhead
09-24-2010, 01:30 PM
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:


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:

$link.attr('href', new_link_href).html(new_link_html);
so it now reads:


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.

Skippy
09-24-2010, 02:45 PM
Okay, after I input the extra code no extra lines are added to the console.

Spudhead
09-24-2010, 04:41 PM
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?

Skippy
09-24-2010, 09:42 PM
addfavourites.php

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

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

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>';

Spudhead
09-27-2010, 10:04 AM
include ('template/footer.php');

what's in that?

Lets see exactly what comes out of the PHP -


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

Skippy
09-27-2010, 03:42 PM
In footer.php is the rest of the template, basically just a few links.

The PHP just returns success.

Spudhead
09-27-2010, 07:22 PM
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.

Skippy
09-27-2010, 08:08 PM
Ah, I removed the header.php and footer.php from the add favourites.

So it's just:

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

Spudhead
09-29-2010, 09:59 AM
Does it work? Is the link now changing?

Skippy
10-01-2010, 05:26 PM
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.

opabam
10-05-2010, 08:13 PM
At the very beggining of my work with Java i had problems with many document generation systems and at that time I wasn't succesfull.
One day my searching was finished!
My business developed since that times but I'm still a proud user of <a href="http://http://www.javadocgen.info">Java document generation</a>]

If you are looking for a document generation system on Java, take a look at this <a href="http://http://www.javadocgen.info">Java document generation</a>] site. It has basic info on all the vendors. It makes for a great starting point.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum