Getting AJAX to work with PHP variables

My code is below. It is for a gallery that can be found here

http://test.shanedj.com/deborahtarr/gallery/

There is a favorites button that has the <a href> assigned to it.  I have it at teh moment so that it passes my variable to JavaScript and stores the Value. Eventually there will be a page where all the collected variable will be sent to and thus display the favorited images.

Here's what I want (but am struggling) to do.

Display on the page when any image has been favorited a link to "Go To Favorites", possibly need to refresh but without the page reloading.

Get the variable from JavaScript to PHP in the variable name $imgID

Hope you can help! Keep it simple i'm still learning on the JavaScript side of things!
<?php 
session_start();
 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gallery of Work - Deborah Tarr</title>
<link rel="stylesheet" href="../css/jd.gallery.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../css/main.css" type="text/css" />
<script src="../scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="../scripts/jd.gallery.js" type="text/javascript"></script>
<script src="../scripts/jd.gallery.set.js" type="text/javascript"></script>
<script src="../scripts/jquery.js" type="text/javascript"></script>
 
<script type="text/javascript">
  jQuery.noConflict();
	
	function startGallery() {
	var myGallery = new gallery($('myGallery'), {
	timed: false
	});
	}
	window.addEvent('domready', startGallery);
	
	function addTo(id){
	jQuery.post(".", { fav: id, date: new Date().getTime() }, 
         function() 
         {
            //alert(id);
			
         }
         );
	}	
</script> 
 
</head>
 
<body>
<?php if ($_GET['fav']){echo "Added";} ?>
<div id="myGallery">
    <div class="imageElement">
      <h4>Swans</h4>
      <p>Some Swans by the canal.</p>
<a href="javascript:addTo(1);" title="Favorite this image" class="open" rel="nofollow"></a>
      <img src="../images/brugges2006/1.jpg" class="full" />
    </div>
    <div class="imageElement">
      <h4>Castle</h4>
      <p>Orange lit castle.</p>
      <a href="javascript:addTo(2);" title="Favorite this image" class="open" rel="nofollow"></a>
      <img src="../images/brugges2006/2.jpg" class="full" />
    </div>
</div>
 
</body>
</html>

Open in new window

LVL 12
ShaneJonesAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

vibrazyCommented:
Hi,

I think the best solution will be when the user clicks on add to favourite, it will send a variable to a page called favourite.php and send $_GET['id'].

//favourite.php
This page could add the ids to a session variable etc.
and return 'sucess' if all goes well then display message "added to favourite".

Then you could create a favourite_show.php page that will get the session id and show the images.


$.get('favourite.php', 
{
    'id': (id of images stored in javascript)
}
, function(data){
    if(!data)
    {
        alert("There was an error with the processing of your information.\nPlease try again later.");
    }
    else
    {
        if(data == 'success')
        {
            //process the page
            //display message         
        }
        else
        {
            alert("There was an error with the processing of your information.\nPlease try again later.");
        }
    }
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ShaneJonesAuthor Commented:
so on favourite.php shoulkd I just have $_GET['id'] and then when a user goes to favourite_show.php i could just have echo $_GET['id']  ??
0
vibrazyCommented:
In your favourite.php, you will have a script that adds the ids of the images the users are clicking (add to favourite), and store it in a session variable.

$_SESSION['favourite'][] = $_GET['image.jpg'];
$_SESSION['favourite'][] = $_GET['image2.jpg'];
etc..

So basically if the user clicks  on add to favourite it will send the url of the image/or id, add to a session.

So then if they go to favourite_show_images,php, you will have the url of all the images they have added to the session, and display them.

<?php
foreach($_SESSION['favourite'] as $url)
{
echo '<img src="' . $url .'" />
}
?>
Or whatever code you have.

Regards,
Dan
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

ShaneJonesAuthor Commented:
This is defo getting there now. something not quite working tho it it is adding to the session just not bringing it back on teh showfav.php page.

For some reason after favouriting a few pictures it just outputs
<br><br><br><br><br><br>

but I am expecting

1<br>2<br>5<br>6<br>9<br>11<br>

have shows my 3 pages of code below.

Thanks

MY INDEX.PHP PAGE ////////////////////////
<?php 
session_start();
 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gallery of Work - Deborah Tarr</title>
<link rel="stylesheet" href="../css/jd.gallery.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../css/main.css" type="text/css" />
<script src="../scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="../scripts/jd.gallery.js" type="text/javascript"></script>
<script src="../scripts/jd.gallery.set.js" type="text/javascript"></script>
<script src="../scripts/jquery.js" type="text/javascript"></script>
 
<script type="text/javascript">
  jQuery.noConflict();
	
	function startGallery() {
	var myGallery = new gallery($('myGallery'), {
	timed: false
	});
	}
	window.addEvent('domready', startGallery);
	
	function addTo(id){
	jQuery.post(".", { fav: id, date: new Date().getTime() }, 
         function() 
         {
            //alert(id);
			
         }
         );
		
	jQuery.get('fav.php', 
	{
	    'id': id
	}
	, function(data){
	    if(!data)
	    {
	        alert("There was an error with the processing of your information.\nPlease try again later.");
	    }
	    else
	    {
	        if(data == 'success')
	        {
	            //process the page
	            //display message         
	        }
	        else
	        {
	            alert("There was an error with the processing of your information.\nPlease try again later.");
	        }
	    }
	})
}
 
;	
</script> 
 
</head>
 
<body>
<div id="myGallery">
    <div class="imageElement">
      <h4>Swans</h4>
      <p>Some Swans by the canal.</p>
<a href="javascript:addTo(1);" title="Favorite this image" class="open" rel="nofollow"></a>
      <img src="../images/brugges2006/1.jpg" class="full" />
    </div>
    <div class="imageElement">
      <h4>Castle</h4>
      <p>Orange lit castle.</p>
      <a href="javascript:addTo(2);" title="Favorite this image" class="open" rel="nofollow"></a>
      <img src="../images/brugges2006/2.jpg" class="full" />
    </div>
</div>
<a href="showfav.php">View Favs</a>
</body>
</html>
 
 
MY FAV.PHP PAGE
<?php
session_start();
$_SESSION['favourite'][] = $_REQUEST['fav'];
 
?>
 
MY SHOWFAV.PHP PAGE
<?php
session_start();
foreach($_SESSION['favourite'] as $imgID)
	{
		echo $imgID .'<br />';
	}
 
?>

Open in new window

0
vibrazyCommented:
Try this

foreach ($_SESSION['favourite'] as $key=>$value) {
    echo $value."<br/>";
    }

Open in new window

0
vibrazyCommented:
I think you might need to tweak afterwards, and add some checks into your php files.. So if someone tries to add an id that is already in the SESSION array, it doesnt add..or use unique_array(), "i think", to remove duplicate ids.

I can see its coming together nicely

Weldone
0
ShaneJonesAuthor Commented:
Brilliant, I have the JS and PHP communicating now. Thats all I asked for. The PHP stuff now I think I can cover off....

Thanks again for your help.... :)
0
ShaneJonesAuthor Commented:
Epic Win,,, totally does what I need now
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.